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

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'
}