时间戳

首页 > 解决方案 > 从 Angular 5 升级到 6 后：错误：未捕获（承诺）：TypeError：未定义不是函数

angular - 从 Angular 5 升级到 6 后：错误：未捕获（承诺）：TypeError：未定义不是函数

问题描述

在https://update.angular.io/执行步骤以将我的 Angular 5 SPA 升级到 Angular 6 后，导航到应用程序后出现此错误：

    ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4997)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4989)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3257)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3245)
    at MergeMapSubscriber.project (router.js:1517)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4997)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4989)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3257)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3245)
    at MergeMapSubscriber.project (router.js:1517)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3816)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

我想这与我使用 Angular 路由器的 canActivate-Feature 受 AuthGuard 保护的延迟加载功能模块路由有关，但由于这发生在我的应用程序代码之外，我有点迷失了。

我还尝试使用 Angular CLI 6.1.2 从头开始​​创建一个新的 Angular 6 应用程序，然后移动我的应用程序，但这导致了完全相同的错误。

这是我的 package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.2",
    "@angular/material-moment-adapter": "^6.4.2",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@aspnet/signalr": "^1.0.2",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/file-saver": "^1.3.0",
    "@types/hellojs": "^1.16.1",
    "chart.js": "^2.7.2",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-datalabels": "^0.3.0",
    "chartjs-plugin-zoom": "^0.6.3",
    "core-js": "^2.5.4",
    "file-saver": "^1.3.8",
    "hammerjs": "^2.0.8",
    "hellojs": "^1.17.1",
    "moment": "^2.22.2",
    "ng2-charts": "^1.6.0",
    "rxjs": "^6.0.0",
    "saturn-datepicker": "^6.0.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

我的模块级路由配置如下所示：

const routes: Routes = [
  {
    path: 'login-redirect',
    component: LoginRedirectComponent
  },
  {
    path: 'settings',
    canActivate: [AuthGuard],
    component: SettingsComponent
  },
  {
    path: 'showcase',
    canActivate: [AuthGuard],
    loadChildren: '../showcase/showcase.module#ShowcaseModule'
  },
  {
    path: 'feature1',
    canActivate: [AuthGuard],
    loadChildren: '../feature1/feature1.module#Feature1Module'
  },
  {
    path: 'feature2',
    canActivate: [AuthGuard],
    loadChildren: '../feature2/feature2.module#Feature2Module'
  },
  {
    path: '**', redirectTo: '/feature2'
  }
];

标签： angularangular6angular-material-6

解决方案

经过一些扩展的谷歌搜索后，这个链接将我指向正确的方向： angular6 feature module lazy loading throwing error TypeError: undefined is not a function

我在我的 app.module 中导入了延迟加载的功能模块，这导致了问题。这在 Angular 5 中显然不是问题。

所以删除我的延迟加载功能模块的导入解决了这个问题。

推荐阅读