Exclude some of the lazy modules from the build (Angular5)

lazy load non-routable modules in angular
angular 6 lazy load module without router
angular json lazy modules
angular lazy load module
angular lazy load module without router
angular load lazy module programmatically
angular manually lazy load module
angular lazy loading module without router

I am working on a project, which runs at multiple customers. There are many lazy loaded modules, and most of them is used by all of the customers. But there are some modules, which are only needed in a few places, so I would like to exclude them from the build everywhere else.

Is it possible?

How about something like this: (you could then use if statements, etc, to load different modules)

export class AppComponent implements AfterViewInit {

  @ViewChild('testOutlet', {read: ViewContainerRef}) testOutlet: ViewContainerRef;
  constructor(
    private loader: NgModuleFactoryLoader,
    private injector: Injector) {
    }

    ngAfterViewInit(): void {
    const path = 'src/app/lazy/lazy.module#LazyModule';
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
      const entryComponent = (<any>moduleFactory.moduleType).entry;
      const moduleRef = moduleFactory.create(this.injector);

      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
      this.testOutlet.createComponent(compFactory);
  });
  }
}

angular, How about something like this: (you could then use if statements, etc, to load different modules) export class AppComponent implements AfterViewInit  This is an interesting idea, though lazy loaded modules are part of the application which makes it hard to build on its own, since some code and dependencies are shared. It is also important to highlight that when having commonChunks enabled changing a lazy loaded module might have an effect on the a common chunk, if a dependency is introduced in a lazy loaded module.

Try adding the modules to the exclude setting in your tsconfig.app.json file

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
    "path/to/your/lazy.module.ts"
  ]
}

The path must be relative to the baseUrl setting

Now I'm not sure how your setup is (multi app cli project? 1 build per customer?) but this should work as long as each build has the correct config file

Drop lazy loaded modules like they're hot … with Angular + Webpack, json to exclude all domain code if you want builds to be somewhat independent. So let's at some actual code — the configuration file can be a  Both apps are the same, but one app includes all files in the build, the other needs to exclude a module. Angular CLI version: 1.7.4 Angular version: 5.2.10 I added two apps into the angular-cli.json file, and each has a separate ts-config file.

This is not possible with the current tooling. The AOT compiler has currently (up to V7) no support for conditional loading of routes. As a result, this is also not supported by the CLI. You can create a situation that the routes are shielded away from the user by router-guards, but for building, they need to be present. This is because the NGC needs to analyze the router tree statically. There are some long-term plans that might change this in the future.

If you want to save on your build time, you can move those parts into libraries, but then you still need a small module to be able to lazy load them. (you can't lazy load libraries, for the same reasons.) There are a couple of issues around this on GitHub around this. this is a good one to start if you want to dig into this deeper,

Multiple Apps bundling Lazy Modules from other apps on build , Angular CLI: 1.5.0 Node: 8.6.0 OS: darwin x64 Angular: 5.0.0 animations, Some Lazy Modules are bundled even if it's not part of the app. [app-name].​json config file and listing the other apps in "exclude" but now I get. one node_modules files exclude cli angular angular-cli tslint How to bundle lazy loaded components inside the production dist folder in angular-cli? Angular Cli Webpack, How to add or bundle external js files?

Make lazy loading available outside the Router Module · Issue , Once the module has been marked as "lazy loaded", the build should generate Angular version: X.Y.Z Browser: - [ ] Chrome (desktop) version XX This is almost the exact same method the router uses to lazy load except it  How can I exclude files from the angular build using angular-cli. I just add the path to exclude in the tsconfig.json and tsconfig.app.json files but when I run ng serve, angular still trying to c

NativeScript for Angular Mobile Development, It's hard to know the precise state model when you first build an app, and it will most while each lazy loaded feature module adds its own state and reducers later Providing the initial app state excluding any lazily loaded module state We  @angular/compiler-cli: 2.4.8. How to exclude some files from ng build ? My case is I will replace some js file dynamically in docker volume. For that , I just want to ignore some files while building. Is that possible ?

Learning Angular: A no-nonsense guide to building real-world apps , A no-nonsense guide to building real-world apps with Angular 5 Christoffer Noring, and every lazy-loaded route, except for the ones guarded by the canLoad guard. So, if we had a bunch of modules that were all set up as lazy, such as  Because the new module is meant to be lazy-loaded, the command does NOT add a reference to the new feature module in the application's root module file, app.module.ts. Instead, it adds the declared route, customers to the routes array declared in the module provided as the --module option.

Comments
  • Can canload help? Or we should remove(do not build) js files?
  • What's the actual purpose? Since the modules are lazily loaded, they won't load if unused, so there is no performance issue, it will just take a bit more space on HDD but it's derisory
  • are you trying to do this by route? or how does the app know if the module is needed or not?
  • I have exclude one module from build but I got an error like this sis.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
  • @malbarmawi And you do not reference explicitly that module anywhere in your code, right ? (using import)