具有angular-router-loader错误的延迟加载模块无法找到模块“。”

时间:2018-03-14 06:40:16

标签: angular webpack lazy-loading angular-router-loader

Webpack无法通过 angular-router-loader 找到我试图延迟加载的模块。

我使用以下内容:
Webpack 2.2.1
Angular 5.2
angular-router-loader 0.8.2

通过npm安装 angular-router-loader ,并将加载器添加到我的 webpack config ::

    import itertools
    import matplotlib.pyplot as plt   
    A=['Dog','Cat','Fish','Bird']
    B=[26,39,10,20]
    lists = sorted(itertools.izip(*[A, B]))
    new_x, new_y = list(itertools.izip(*lists))
    fig=plt.figure()
    ax1 = fig.add_subplot(1,1,1)
    ax1.bar(new_x, new_y )
    ax1.set_xticklabels(new_x)
    plt.title("Animals")
    plt.show()

项目布局如下:

       {
            test: /\.ts$/,
            use: ['awesome-typescript-loader', 'angular2-template-loader'],
            exclude: [/\.(spec|e2e)\.ts$/]
        },
        {
            test: /\.(ts|js)$/,
            loaders: [
              'angular-router-loader'
            ]
        },

app.routing.ts

app/
  - app.routing.ts
  authenticated/
    property/
      - property.module.ts
      setup/
         - propertysetup.component.ts

property.module.ts

const appRoutes: Routes = [
  {path: 'property', canActivate: [AuthGuard],
    loadChildren: './authenticated/property/property.module#PropertyModule'
  }
];

当我启动webpack dev服务器时,我可以在控制台中看到 angular-router-loader 正在替换 app的 loadChildren 部分中定义的字符串。 routing.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 { }

但是我从webpack收到以下警告:

[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')

然后,当我尝试在浏览器中转到路径(http://localhost:3000/#/property/setup)时,我从浏览器控制台收到以下堆栈跟踪错误:

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

我尝试用绝对路径替换 loadChildren 中的模块路径。 E.g。

 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)

但是我从webpack得到完全相同的警告,并且如上所述在浏览器控制台中出错 我想我已经从这里正确地遵循了安装/使用说明:https://github.com/brandonroberts/angular-router-loader

任何建议/帮助都非常感激。

0 个答案:

没有答案