CODEWITHSUNDEEP
angularangular6angular-material-6
Markus S.
Markus S.

Reputation: 2812

After Upgrade from Angular 5 to 6: Error: Uncaught (in promise): TypeError: undefined is not a function

After performing the steps at https://update.angular.io/ in order to upgrade my Angular 5 SPA to Angular 6, i got this error after navigating to the app :

    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)

I suppose it has got something to do with my Lazy Loaded Feature Module Routes protected by a AuthGuard using the canActivate-Feature of the Angular Router but as this is happening outside my application code i'm a bit lost.

I also tried creating a new Angular 6 App using Angular CLI 6.1.2 from scratch, and then moving over my application but this resulted in the exact same error.

This is my 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"
  }
}

My module-level routing configuration looks like this:

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'
  }
];

Upvotes: 3

Views: 4983

Answers (2)

Nickofthyme
Nickofthyme

Reputation: 4327

For anyone else that finds this in the future. I had this same issue but was not importing the lazy module in my app.module.ts nor did any of the other suggested solutions help.

I was lazy loading a module that was using a custom angular component library. This library worked fine in ng5 but as soon as we upgraded to ng6, this error started occurring.

The fix was COMPLETELY unrelated to the error, in fact, the error was terribly misleading and useless! Turns out in our custom library we were importing a few modules from an index file which for whatever reason Angular compiler still can't figure out.

// This is BAD!
import { MyModule } from '../my-modules/index';

// This is GOOD?
import { MyModule } from '../my-modules/my.module';

Hope this helps someone!

Upvotes: 0

Markus S.
Markus S.

Reputation: 2812

After some extended googling, this link was pointing me into the right direction: angular6 feature module lazy loading throwing error TypeError: undefined is not a function

I was importing the lazy-loaded feature modules in my app.module and this was causing the issues. This apparently wasn't a problem in Angular 5.

So removing the imports of my lazy-loaded feature modules was solving the problem.

Upvotes: 3

Related Questions