V1.7.0 Nested routing not working

[kanji-keraliya]

I updated latest @angular/[email protected] and now nested routing not work.I created two routing file like app-routing.module.ts and report-route.module.ts.

report-route.module.ts used in app-routing.module.ts.after updating to latest Angular CLI not working. and its working in V1.6.8

Error is Uncaught (in promise) TypeError: undefined is not a function

[gremi64]

Same here, our application was working in 1.6.8 yesterday and now in 1.7.0 we got

Error: Uncaught (in promise): TypeError: webpack_require.e is not a function
webpackAsyncContext@http://our_url.fr/main.bundle.js:538:21

[MattMorrisDev]

+1

This worked in 1.7.0-rc.0, but stops working in (and after) 1.7.0 (Kleene). To clarify, in my main bundle I'm trying to navigate to a lazy loaded bundle with its own routing.

Full stack trace:

core.js:2086 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6756)
    at SystemJsNgModuleLoader.load (core.js:6740)
    at RouterConfigLoader.loadModuleFactory (router.js:4558)
    at RouterConfigLoader.load (router.js:4538)
    at MergeMapSubscriber.eval [as project] (router.js:2030)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6756)
    at SystemJsNgModuleLoader.load (core.js:6740)
    at RouterConfigLoader.loadModuleFactory (router.js:4558)
    at RouterConfigLoader.load (router.js:4538)
    at MergeMapSubscriber.eval [as project] (router.js:2030)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:821)
    at resolvePromise (zone.js:785)
    at eval (zone.js:870)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4938)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)

Versions:

Angular CLI: 1.7.0
Node: 8.6.0
OS: darwin x64
Angular: 6.0.0-beta.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.0
@angular/cli: 1.7.0
@angular/material: 5.2.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack-bundle-analyzer: 2.10.0
webpack: 3.11.0

ng build -prod correctly produces the lazy loaded bundle, but ng serve does not and just includes it in the main bundle.

[dewwwald]

I am having the exact same problem. From my debugging I found that it is because of webpack 3.11.0. That version of webpack removed support for System.import being called here:
https://github.com/angular/angular/blob/5.2.5/packages/core/src/linker/system_js_ng_module_factory_loader.ts#L67-L71

For now it might be best for us to roll back to the previous version of the angular cli.

[dewwwald]

I can also confirm that angular/cli version 1.6.8 works when building angular 5.2, however my modules are not being lazy loaded.

[marcincichocki]

Same in our case. Downgrading to 1.6.8 with flag -vc works

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[KellyR-STCU]

I think we are experiencing the same problem I get the same stack trace.

[KellyR-STCU]

Here is the "minimal" repro:
https://github.com/KellyR-STCU/minimalrepro

I included instructions in the Readme.md

[marcincichocki]

I've tried to reproduce it, without success. But @KellyR-STCU example made me realize that the problem is location of feature module.

When feature module is in app directory it works, but when it's below it fails.

fails

src/
  feature/
  app/

works

src/
  app/
    feature/

I have multiple apps, and so I moved some feature modules into libs(nx monorepo style) that are not in src/app directory, thus error I'm having. I hope this clarify the problem we are facing @filipesilva

[elvisfernandes]

For the record, I'm facing the same issue reported here with lazy loaded modules.

[blackholegalaxy]

The same happens to us. We use sibbling modules: app and other imported modules at the same level:

src/
  app/
  otherModule/

Navigating from app to otherModule breaks on 1.7.0 and 1.7.1. Workaround to move otherModule into map is not possible in all projects.

[Herzenkin]

Latest CLI v. 1.7.1 - got the same problem with lazy module loading. Modules are placed in app folder.

Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
at Array.map ()
at webpackAsyncContext ($_lazy_route_resource lazy:19)
at SystemJsNgModuleLoader.webpackJsonp../node_modules/@angular/core/esm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
at SystemJsNgModuleLoader.webpackJsonp../node_modules/@angular/core/esm5/core.js.SystemJsNgModuleLoader.load (core.js:6542)
at RouterConfigLoader.webpackJsonp../node_modules/@angular/router/esm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:4543)
at RouterConfigLoader.webpackJsonp../node_modules/@angular/router/esm5/router.js.RouterConfigLoader.load (router.js:4523)

UPD: my bad, forgot to remove imports of lazy-loading modules from AppModule. Now it works correctly.

[emanuelet]

I had to downgrade to 1.6.8 as well to solve the issue

[SirAjZellweger]

same here

[ghost]

Same here

[macjohnny]

same here
this seems to a duplicate of #9775

[MattMorrisDev]

I realized I forgot to remove the lazily loaded module from the imports of my AppModule. I removed that and upgraded to the latest beta (6.0.0-beta.5) and it seems to be fine now for me.

[piq9117]

same error. rolled back to 1.6.8 and its working.

[dewwwald]

@macjohnny this is actually the original as this thread has an earlier date.

[ddiebel]

same for me, moved from 1.7.3 to 1.6.8 and now it works.

[salvdev]

Had this same issue. I fixed it by making a few changes to my Routes file.
Original:

import { RouterModule } from '@angular/router';

const appRoutes= [
{ path: '**', redirectedTo: '', component: HomeComponent }
]

export const AppRouter = RouterModule.forRoot(appRoutes);

Updated:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
{ path: '**', redirectTo: '', component: HomeComponent }
]

@NgModule({
	imports: [
		RouterModule.forRoot(
			appRoutes,
			{ enableTracing: false } // <-- debugging purposes only
		)
	],
	exports: [
		RouterModule
	]
})
export class AppRouter {}

[TobiasBreuer]

Same issue here with CLI 1.7.2. As it has been mentioned in #9775 compiling with --aot seems to fix the problem which is acceptable workaround in my case until its fixed. Really would like to avoid downgrading 😉

[dewwwald]

I upgraded to 1.7.4, and that version is working. I also used --aot, same as Tobias.

[ghostlandr]

Upgrading to 1.7.4 worked for me; we're also using --aot.

[ashitosh31]

Downgrading to 1.6.8 worked for me as well!

[CDuPlooy]

1.7.4 also works with the --aot flag but not without.

[GeorgeKnap]

I experience the same error with @angular/cli: 6.0.0 dev build succeeds but there is runtime error Uncaught (in promise): TypeError: undefined is not a function.

AOT works

fixed: see this comment module import order matters!

[fuchien]

Same here, work with AOT

[bluecaret]

Had the same issue. Fixed it by removing my lazy loaded modules from AppModule since they are, you know, lazy loaded 😄
This comment along with the one GeorgeKnap linked to helped me fix this.

[GuerrillaCoder]

I have same issue. My lazy loaded modules are under app/ but ng build --watch does not work I get same error. If I do ng build --prod then everything works fine but it makes development hard. I am on cli version 6.0.8.

Anyone know how to fix?

[martin-g]

@GuerrillaCoder The workaround with AOT explained above works for everyone. Did you try it ?

[GuerrillaCoder]

Ahh sorry I missed it, yes that works.

[kufre-okon]

Same issue here with angular/cli: 1.7.3, work with aot

[hiepxanh]

@bluecaret thank you. why the error just only warning that I import lazy module at app.module.ts is wrong?

[k80oshea]

I'm still getting that same error sadly, did try with ng serve --aot as well. I've messed around with it so many time that I'm losing hope - most solid error is that it can't reach my child routes (although occasionally it will give me the undefined error instead).

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'parent/child'
Error: Cannot match any routes. URL Segment: 'parent/child'

I'm clicking on a link to my child route while operating from the parent route when the error is thrown.
I'm on Angular 5.2 and CLI 1.7.4 - did try downgrading to 1.6.8 but met with same results.

[ghost]

uninstall global and local cli, and reinstall and check that they are identical, check package-lock.json, check that you have the good typescript version. I had a problem a while back and resolve it like this.

[ashitosh31]

I would recommended to go for a specific version of cli with other third party plugins which supports same version, for me 1.6.8 worked perfectly.

…

On Tue, 28 Aug 2018, 2:59 am k80oshea, ***@***.***> wrote: I'm still getting that same error sadly, did try with ng serve --aot as well. I've messed around with it so many time that I'm losing hope - most solid error is that it can't reach my child routes (although occasionally it will give me the undefined error instead). Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'parent/child' Error: Cannot match any routes. URL Segment: 'parent/child' I'm clicking on a link to my child route while operating from the parent route when the error is thrown. I'm on Angular 5.2 and CLI 1.7.4 - did try downgrading to 1.6.8 but met with same results. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#9651 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATvlkgB7xdtcWHnbENy6GQ7ozaRjG_Bvks5uVGSngaJpZM4SIQJT> .

[k80oshea]

@jfborie @ashitosh31 thanks - it didn't seem to work right off the bat, but I think it helped after I restructured some more after following this example from the angular docs for my routing

[rmcsharry]

For anyone else with quite old angular code (eg. v2 or 3 or 4) it is possible that you might be importing global services that you have written in your app.component.ts (in the providers array) as this was an old-style way you could import them. So if you have a providers array in your app.component.ts then delete it and the import statements and instead place them in app.module.ts.

This fixed this exact error for me.

[clydin]

Closing as CLI 1.x is no longer actively maintained. Please update to the latest support version (currently 6.2.4). If the observed problems still exist after updating, please open an new issue detailing the version and environment information. Thank you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}