Ленивая загрузка модулей с ошибками angular-router-loader с невозможностью найти модуль "."
В Webpack возникли проблемы с поиском модуля, который я пытаюсь загрузить с помощью angular-router-loader.
Я использую следующее:
Webpack 2.2.1
Угловой 5,2
angular-router-loader 0.8.2
Установил angular-router-loader через npm и добавил загрузчик в мою конфигурацию webpack::
{
test: /\.ts$/,
use: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
]
},
Макет проекта выглядит следующим образом:
app/
- app.routing.ts
authenticated/
property/
- property.module.ts
setup/
- propertysetup.component.ts
В app.routing.ts:
const appRoutes: Routes = [
{path: 'property', canActivate: [AuthGuard],
loadChildren: './authenticated/property/property.module#PropertyModule'
}
];
property.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { PropertySetupComponent } from './setup/propertysetup.component';
const routes: Routes = [
{
path: 'setup',
component: PropertySetupComponent
}
];
@NgModule({
imports: [
RouterModule.forChild(routes),
CommonModule
],
exports: [
RouterModule
],
declarations: [
PropertySetupComponent
]
})
export class PropertyModule { }
Когда я запускаю dev-сервер webpack, я вижу в консоли, что angular-router-loader заменяет строку, определенную в разделе loadChildren app.routing.ts:
[angular-router-loader]: --DEBUG--
[angular-router-loader]: File: e:\eclipse_workspace\projectNG\projectFrontend\src\app\app.routing.ts
[angular-router-loader]: Original: loadChildren: './authenticated/property/property.module#PropertyModule'
[angular-router-loader]: Replacement: loadChildren: function() { return new Promise(function (resolve, reject) { (require as any).ensure([], function (require:
any) { resolve(require('.\\authenticated\\property\\property.module')
Но я получаю следующее предупреждение из веб-пакета:
WARNING in ./src/app/app.routing.ts
44:84-91 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Затем, когда я пытаюсь перейти по пути ( http://localhost:3000/) в браузере, я получаю следующую ошибку трассировки стека из консоли браузера:
ERROR Error: Uncaught (in promise): Error: Cannot find module "."
Error: Cannot find module "."
at webpackMissingModule (eval at 903 (app.js:1618), <anonymous>:44:129)
at eval (eval at 903 (app.js:1618), <anonymous>:44:208)
at new ZoneAwarePromise (eval at <anonymous> (polyfills.js:4031), <anonymous>:875:29)
at loadChildren (eval at 903 (app.js:1618), <anonymous>:44:44)
at RouterConfigLoader.loadModuleFactory (eval at <anonymous> (vendor.js:156), <anonymous>:4647:109)
Я попытался заменить путь модуля в loadChildren абсолютным путем. Например
loadChildren: 'app/authenticated/property/property.module#PropertyModule'
Но я получаю точно такое же предупреждение из веб-пакета и ошибку в консоли браузера, как указано выше.
Я думаю, что я правильно выполнил инструкции по установке / использованию здесь: https://github.com/brandonroberts/angular-router-loader
Любые предложения / помощь высоко ценится.