Компилятор AOT - включает ленивый загружаемый внешний модуль

Я пытаюсь включить внешний модуль (размещенный в репозитории git / npm) как модуль с отложенной загрузкой в ​​мое приложение Angular.

Я компилирую свой внешний модуль с помощью компилятора ngc:

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

Вот так выглядит моя конфигурация компилятора:

{
  "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
  }
}

И в моем основном приложении я лениво загружаю данный модуль:

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

Для компиляции я использую плагин @ ngtools / webpack.

Компиляция JIT работает без проблем, но компиляция AOT выдает ошибку:

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

Поэтому я решил проверить, что выводит компилятор ngc (который вызывается изнутри плагином webpack):

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

И вообще мой модуль отсутствует в каталоге /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

Как заставить ngc поместить указанные модули в выходной каталог ngfactory?

Мое основное приложение можно найти здесь: https://github.com/maciejtreder/angular-universal-serverless/tree/externalModule

И внешний модуль здесь: https://github.com/maciejtreder/angular-external-module


webpack angular angular-compiler angular-compiler-cli
person Maciej Treder    schedule 16.10.2017    source источник
comment
Как включить внешний модуль? npm я или ссылка npm?   -  person yurzui    schedule 16.10.2017
comment
npm, как зависимость: @ angular-universal-serverless / external-module: git + github. com / maciejtreder / angular-external-module.git,   -  person Maciej Treder    schedule 16.10.2017
comment
Извините, не заметил, что это ветка externalModule   -  person yurzui    schedule 16.10.2017

Ответы (2)


arrow_upward
5
arrow_downward

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, потому что машинописный текст исключит его

Файлы, включенные с помощью "include", могут быть отфильтрованы с помощью свойства "exclude".

Дополнительные сведения см. В документе

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

введите описание изображения здесь

person yurzui    schedule 16.10.2017
comment
После перехода на Angular CLI я снова столкнулся с этой проблемой. Внешний модуль отлично работает для компиляции AOT. Но я столкнулся с проблемой JIT-компиляции (ng serve). Не могли бы вы взглянуть или как-нибудь связаться со мной? Всю контактную информацию можно найти на maciejtreder.com. - person Maciej Treder; 06.04.2018

arrow_upward
0
arrow_downward

возможно, уже слишком поздно, но я надеюсь, что это может кому-то помочь.

Я написал очень простой скрипт узла, который нужно запускать сразу после npm install. Это действительно сценарий после установки. Он копирует исходные файлы из node_modules в папку в основном проекте. Затем он обновляет ссылки на ленивые загружаемые модули в основном файле маршрутов.

Это отлично сработало для моей команды, и мы значительно повысили производительность приложений.

Скрипт короткий и хорошо документированный, пожалуйста, ознакомьтесь с ним.

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

person andrea simeoni    schedule 03.11.2019