Angular 2: Как реализовать отложенную маршрутизацию с помощью Ahead of Time Compilation?

Я успешно создал файлы.ngfactory с помощью компилятора ngc, а также обновил файл main.ts с помощью "platformBrowser(). BootstrapModuleFactory (AppModuleNgFactory)".

app.routes.ts

const appRoutes: Routes = [
    { path: '', loadChildren: 'app/starter/starter.module#StarterModule' },
    ...
    ...
    ...
];

export const appRoutingProviders: any[] = [

];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Теперь, когда я обслуживаю свое приложение, используя "ng build -prod && ng serve -prod", оно успешно размещается. Однако, когда я открываю его в своем браузере, моя консоль показывает мне эту ошибку "ИСКЛЮЧЕНИЕ: невыполнено (в обещании): ошибка: не удается найти модуль" app/starter/starter.module.ngfactory'".

И когда я проверяю мой каталог, файл "существует", но он не может его найти. Кто-нибудь сталкивался с этой проблемой? Если да, то как с этим бороться? Благодарю.

Я использую Angular-Cli Beta 14.

Источник

2 ответа

Вывод aot принимает только те файлы, которые вы добавили в массив файлов в файле tsconfig-aot.json. Поэтому обязательно добавьте туда все свои модули, в том числе и ленивые. Потому что они больше не включены через само приложение, кроме "loadChildren" в маршрутизаторе.

 "files": [
"app/app.module.ts",
"app/starter/starter.module.ts",
"app/main.ts"  ],

После этого в папке AoT должны быть скомпилированы все модули. После этого вы можете взять выходные данные в папке "aot" (или в какую папку вы собираете компиляцию) и выполнить древовидный обмен и т. Д.

Пример этого, но без angular-cli, с использованием веб-пакета можно найти здесь:

https://github.com/FabianGosebrink/ASPNET-ASPNETCore-AngularJS-Angular/tree/master/Angular-Client-Webpack

Источник

По описанию вы видите, что вы пытаетесь реализовать угловое универсальное приложение с рендерингом на стороне сервера. У меня очень простой проект в публичном репо, который работает. Вы можете исследовать это:
угловой универсальный-демо

Я считаю, что у вас есть некоторые проблемы с конфигурацией. Может быть, какой-то путь не так.

Проверьте эти файлы в первую очередь:

tsconfig.json

{
  "compileOnSave": false,
    "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "allowJs": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
  "genDir": "./dist/ngfactory",
  "entryModule": "./src/app/app.module#AppModule"
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
  "server.ts",
  "test.ts",
  "**/*.spec.ts"
  ]
}

Также команды для запуска приложения должны быть:

ng build --prod && ngc

Затем вам нужно внедрить сервер Express и запустить его с чем-то вроде:

ts-node server.ts

Пример файла server.ts вы можете найти в том же репо.

Совет: попробуйте реализовать простой проект LazyLoading перед использованием ngc и на стороне сервера. Вот хороший и простой урок:
Учебник текста

Источник
Другие вопросы по тегам