如何在没有CLI的情况下延迟加载Angular模块？

Question

I have yet to find this specific use case described any where. If it exists, please refer me to it.

I would like to achieve lazy loading of Angular modules (using Angular version 7), because we use many large 3rd party libraries for specific parts of our app that are rarely used. However, we do not use the Angular CLI (ng command). All examples I have seen use Angular CLI to build the module chunk, and load via a path string, either in loadChildren or some other way.

Our build is managed with Webpack (webpack.config.js file). My understanding is that Angular CLI is a build tool, and use of Angular does not require it. Since we know this functionality exists in Angular, there must be a way to leverage it without the CLI. I don't mind hacky solutions to this, as it is my hope that this feature may be more robustly introduced in the future to the Angular framework.

Any crumb of information will be appreciated.

Answer 1

All examples I have seen use Angular CLI to build the module chunk, and load via a path string, either in loadChildren or some other way.

That's right, but if you don't use Angular CLI, the next thing you have to do is to install angular-router-loader package and afterwards in your webpack.config.js file you add it to to your typescript loaders:

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader'
    ]
  },
  {
    test: /\.(ts|js)$/,
    loaders: [
      'angular-router-loader'
    ]
  }  
]