2

In my app I have a lot of simple data model classes. For example

export class Client {
   first_name: string;
   last_name: string;
   fullName(): string {
       return `${this.first_name} ${this.last_name}`;
   }
}

Notice this is not a ClientService provider class. These are core model classes used across whole application. Now I want to implement lazy loaded ng modules. Angular docs describe how to share components, providers, directives and pipes. However there is noting about simple (non annotated) classes. The Heros example has an exported model class but it is not used outside of its module.

I guess that the root module should import all model classes. Then feature modules should import just model class declarations. There should be one fullName() method definition after all modules are loaded. Does this mean that I should define a module for model classes? Is it possible to do this for non annotated classes?

Update: I checked files in the dist directory. It turned out that the Client class methods aren't included into lazy loaded modules (*.chunk.js). But how does this work? How does Angular/Webpack know which classes should packed into the main.bundle.js and which into chunk.js files?

1
  • I have exactly the same problem. At the end which solution would you recommend in terms of design, clarity, convenience and scalability. Is a separate shared module of all common models the most appropriate solution ? My concern is that my lazy-loaded modules are not reusable if they depend on models defined in the root module.
    – egelev
    Apr 26, 2018 at 6:40

1 Answer 1

2

Webpack does global app source code analysis and keeps a register which class is referenced from. If a class is referenced only from a lazy loaded module then it is packed into that lazy loaded module (*.chunk.js).

Common classes, referenced from the main module, are packed into the main bundle. And therefore aren't present in lazy loaded modules, they should be loaded by the main bundle.

NgModules (main and lazy loaded) are treated as application entry points to dependency graph. Model classes cannot be treated as application entry points so hence there is no need to annotate them (no additional info is needed). Webpack will do all the dirty work of resolving dependencies.

4
  • Actually this is not true. Shared modules that are imported in in lazy loaded modules are included in lazy bundles :( I am looking for a way to avoid that - not critical. May 22, 2018 at 9:28
  • @antoniossss What is not true in the following sentence? "If a class is referenced only from a lazy loaded module then it is packed into that lazy loaded module (*.chunk.js)."
    – Greg Dan
    May 30, 2018 at 8:59
  • @GregDan. Greg, can you elaborate a little please. If a class is referenced only from a lazy loaded module then where is it packed? Can I control it? The author stated it was packed in the lazy loaded module, but you state this is wrong... Feb 4, 2019 at 4:13
  • @JimbobTheSailor I am not sure where is the misunderstanding. I said exactly the same thing. If a class is referenced only from a lazy loaded module then it is packed into the/that class. And this is the best solution, there is no need to change/control this.
    – Greg Dan
    Feb 4, 2019 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.