AOT compiler - include lazy loaded external module

Question

I am trying to include external module (hosted in git/npm repository) as lazy-loaded module in my Angular application.

I am compiling my external module with ngc compile

Answer 1

maybe it's too late, but I hope this could help someone.

I wrote a very simple node script to be run right after npm install. It is indeed a post install script. It copies source files from node_modules into a folder under the main project. It then updates references to lazy loaded modules in the main routes file.

It worked perfectly for my team and we increased app performances very much.

The script is short and well documented, please check it out

https://gist.github.com/insanediv/8b4ebba06824a3eb8233e10287a1cdcd

Answer 2

1) The first problem here is that AOT compiler doesn't compile your module(node_modules folder is excluded by default), so you have to include it in files option of your ts configs:

tsconfig.browser.json

tsconfig.server.json

tsconfig.server.aot.json

"files": [
  "./node_modules/@angular-universal-serverless/external-module/release/src/externalComponent/external.module.d.ts"
],
"include": [
  "./src/main.browser.ts",
  "./src/app/lazy/lazy.module.ts",
  "./src/app/httpProxy/http-proxy.module.ts"
]

We can't add it to includes array because typescript will exclude it

Files included using "include" can be filtered using the "exclude" property

See more details in the doc

2) Then \node_modules\@angular-universal-serverless\external-module\release\package.json should has typings field like:

"name": "@angular-universal-serverless/external-module",
"main": "./src/index.js",
"typings": "./src/externalComponent/external.module.d.ts", <=== this one

We have to use external.module.d.ts because angular doesn't create ngfactory file for index.d.ts while @ngtools/webpack plugin creates map for ContextElementDependency:

const factoryPath = lazyRoute.replace(/(\.d)?\.ts$/, '.ngfactory.ts');
// where lazyRoute === .../external-module/release/src/externalComponent/external.module.d.ts
const lr = path.relative(this.basePath, factoryPath);
this._lazyRoutes[k + '.ngfactory'] = path.join(this.genDir, lr);

If you don't want to change package.json then change loadChildren field:

{ 
  path: 'external', 
  loadChildren: '@angular-universal-serverless/external-module/release/src/externalComponent/external.module#ExternalModule'
}