AOT compiler - includes a lazy loaded external module

I am trying to enable an external module (hosted in git / npm storage) as a lazy module in my Angular application.

I am compiling my external module using the ngc compiler:

node_modules/.bin/ngc -p tsconfig-aot.json

This is what my compiler configurator looks like:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": true,
    "outDir": "./release/src"
  },
  "files": [
    "./src/index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "release",
    "skipTemplateCodegen": true,
    "entryModule": "index#ExternalModule",
    "skipMetadataEmit": false,
    "strictMetadataEmit": true
  }
}

And in my main application, I am lazy loading this module:

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
      { path: 'external', loadChildren: '@angular-universal-serverless/external-module/release#ExternalModule'}
])

For compilation purposes, I am using the @ ngtools / webpack plugin.

Compiling JIT works without problems, but compiling AOT gives me an error:

ERROR in ./src/ngfactory lazy
Module not found: Error: Can't resolve '/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules/@angular-universal-serverless/external-module/release/src/index.js' in '/Users/mtreder/Documents/private/work/angular-universal-serverless/src/ngfactory'
 @ ./src/ngfactory lazy
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.server.aot.ts

So, I decided to check what is the result of the compiler ngc(which is called under the hood using the webpack plugin):

node_modules/.bin/ngc -p tsconfig.server.aot.json

And actually my module is not in the directory /path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules.

ls src/ngfactory/node_modules/
@angular        @nguniversal        @types          idb         ng-http-sw-proxy    rxjs            typescript-collections

How to force ngc to place these modules in the output directory ngfactory?

: https://github.com/maciejtreder/angular-universal-serverless/tree/externalModule

: https://github.com/maciejtreder/angular-external-module

+4
1

1) , AOT ( node_modules ), files ts:

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"
]

includes, typescript

, "include", ""

.

2) \node_modules\@angular -universal-serverless\external-module\release\package.json typings, :

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

external.module.d.ts, angular ngfactory index.d.ts, @ngtools/webpack 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);

package.json, loadChildren:

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

enter image description here

+4

Source: https://habr.com/ru/post/1687568/


All Articles