Question

我们刚刚将我们的应用程序从Angular 4 升级到Angular 5.2.6 该应用程序使用Angular CLI构建，CLI最近更新为1.6.8。

我们的应用程序对某些模块使用延迟加载。这曾经与Angular 4完美配合，但我们现在看到了一些奇怪的行为。

应用程序分为两个区域（模块），其中是“管理员”。然后管理模块也被拆分成模块，其中一个模块是同步加载的，其余模块是懒惰的。

问题在于延迟加载的模块：UsersModule。

const routes: Routes = [
  {
    path: 'admin',
    redirectTo: '/admin/requests',
    pathMatch: 'full'
  },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthAdminGuard],
    children: [
      {
        path: 'requests',
        // syncrhronous because we always hit this route first
        loadChildren: () => RequestsModule, 
        data: { title: 'Requests' }
      },
      {
        path: 'users',
        loadChildren: './users/users.module#UsersModule',
        data: { title: 'Users' }
      },

构建应用程序时，会为users模块创建一个块。

当用户导航到＆＃39; admin.users＆＃39; 路径时，应用程序会将该块加载到页面的头部，并且可以在浏览器源资源管理器中使用。

但是应用程序没有加载模块，而是在控制台中显示错误。

Error: Cannot find 'UsersModule' in './users/users.module'

但是如果我们删除模块名称#UsersModule

即。如果模块路由从

更新

   {
        path: 'users',
        loadChildren: './users/users.module#UsersModule',
        data: { title: 'Users' }
      },

到

  {
            path: 'users',
            loadChildren: './users/users.module',
            data: { title: 'Users' }
          },

应用程序重新加载并且现在用户模块已正确加载... ??

但是如果我们首先从这个配置开始，那么没有为用户模块创建一个块... ???

注意延迟加载的模块不会导入父模块。

修改的package.json

 "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-devkit/core": "^0.4.2",
    "@angular/animations": "^5.2.6",
    "@angular/common": "^5.2.6",
    "@angular/compiler": "^5.2.6",
    "@angular/core": "^5.2.6",
    "@angular/forms": "^5.2.6",
    "@angular/http": "^5.2.6",
    "@angular/platform-browser": "^5.2.6",
    "@angular/platform-browser-dynamic": "^5.2.6",
    "@angular/platform-server": "^5.2.6",
    "@angular/router": "^5.2.6",
    "@cloudinary/angular-5.x": "^1.0.1",
    "@google-cloud/storage": "^1.3.0",
    "@types/google-maps": "^3.2.0",
    "@types/googlemaps": "^3.26.14",
    "@types/underscore": "^1.8.1",
    "angularfire2": "4.0.0-rc.1",
    "cloudinary": "^1.9.0",
    "cloudinary-core": "^2.3.0",
    "core-js": "^2.4.1",
    "firebase": "4.1.2",
    "material-design-lite": "^1.3.0",
    "raven-js": "^3.16.1",
    "rxjs": "^5.5.6",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^5.2.6",
    "@types/jasmine": "^2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "^2.0.1",
    "cpx": "^1.5.0",
    "ejs": "^2.5.6",
    "husky": "^0.15.0-rc.8",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "onchange": "^3.3.0",
    "prettier": "1.10.2",
    "pretty-quick": "^1.4.1",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "2.4.2"
  }

Answer 1

确保您不是在父模块中导入UsersModule。如果您使用延迟加载，则导入是不必要的，并将导致问题。

Answer 2

这是Angular CLI v1.7.x的已知问题。我希望它正在进行中，但在官方GitHub回购中发现了几个错误报告（例如Issue #9825）。

我不确定您是否遇到了dev服务器或生产版本的问题，但我个人无法使用ng serve加载开发服务器。但是，我能够使用ng serve --aot解决此问题。我的生产构建工作正常（ng build --prod）。这Stack Overflow post是我找到解决方案的地方。

Answer 3

我遇到了同样的错误，这是因为BrowserModule是在主模块和我想要延迟加载的模块中声明的。

Angular 5 Update会中断模块的延迟加载

3 个答案: