After Upgrade from Angular 5 to 6: Error: Uncaught (in promise): TypeError: undefined is not a function
After Upgrade from Angular 5 to 6: Error: Uncaught (in promise): TypeError: undefined is not a function
执行 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'
}
];
经过长时间的谷歌搜索，link 为我指明了正确的方向：
我在 app.module 中导入延迟加载的功能模块，这导致了问题。这显然不是 Angular 5 中的问题。
所以删除我的延迟加载功能模块的导入解决了问题。
对于以后发现这个的任何人。我遇到了同样的问题，但是 不是 在我的 app.module.ts 中导入惰性模块，也没有任何其他建议的解决方案帮助。
我懒加载了一个使用自定义 angular 组件库的模块。这个库在 ng5 中运行良好，但是当我们升级到 ng6 时，这个错误就开始出现了。
修复与错误完全无关，事实上，错误具有极强的误导性和无用性！结果在我们的自定义库中，我们从索引文件中导入了一些模块，无论出于何种原因 Angular 编译器仍然无法弄清楚。
// This is BAD!
import { MyModule } from '../my-modules/index';
// This is GOOD?
import { MyModule } from '../my-modules/my.module';
希望这对某人有所帮助！
执行 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'
}
];
经过长时间的谷歌搜索，link 为我指明了正确的方向：
我在 app.module 中导入延迟加载的功能模块，这导致了问题。这显然不是 Angular 5 中的问题。
所以删除我的延迟加载功能模块的导入解决了问题。
对于以后发现这个的任何人。我遇到了同样的问题，但是 不是 在我的 app.module.ts 中导入惰性模块，也没有任何其他建议的解决方案帮助。
我懒加载了一个使用自定义 angular 组件库的模块。这个库在 ng5 中运行良好，但是当我们升级到 ng6 时，这个错误就开始出现了。
修复与错误完全无关，事实上，错误具有极强的误导性和无用性！结果在我们的自定义库中，我们从索引文件中导入了一些模块，无论出于何种原因 Angular 编译器仍然无法弄清楚。
// This is BAD!
import { MyModule } from '../my-modules/index';
// This is GOOD?
import { MyModule } from '../my-modules/my.module';
希望这对某人有所帮助！