Angular 2 AOT and lazy loading sub modules

Question

Before I upgraded to angular-cli.beta-24 I had this route structure:

+route1
 - +subroute1
 - +subroute2
 - +subroute3

But this fails when having the subroutes defined in the router.module of +route1 because they can't be found now that AOT is enabled by default.

I can get it working by not having the subroutes defined there, and instead moving them to the same router.module as all the other routes in the app. Instead looking like this:

+route1
+subroute1
+subroute2
+subroute3

With the routes obviously not being subroutes anymore.

While this works, it's not a viable solution for me since my breadcrumbs relies on the router tree and it just creates a mess overall if you can't have a router tree anymore.

Here's an example (route1's router.module file):

const routes: Routes = [
  {
    path: '',
    component: Route1Component
  },
  {
    path: 'subroute1',
    loadChildren: '+subroute1/subroute1.module#Subroute1Module'
  },
  {
    path: 'subroute2',
    loadChildren: '+subroute2/subroute2.module#Subroute2Module'
  },
  {
    path: 'subroute3',
    loadChildren: '+subroute3/subroute3.module#Subroute3Module'
  }
];

Why can't you define routes like this when using AOT? What am I missing?

Community · Accepted Answer · 2017-05-23 12:32:32Z

2

AOT and lazy loading works well together since BETA.21 (I made a post about that).

Instead of passing to loadChildren a relative path from . you should start from the app folder like that :

const routes: Routes = [
  {
    path: '',
    component: Route1Component
  },
  {
    path: 'subroute1',
    loadChildren: 'app/+route1/+subroute1/subroute1.module#Subroute1Module'
  },
  {
    path: 'subroute2',
    loadChildren: 'app/+route1/+subroute2/subroute2.module#Subroute2Module'
  },
  {
    path: 'subroute3',
    loadChildren: 'app/+route1/+subroute3/subroute3.module#Subroute3Module'
  }
];

EDIT 1 : It could come from your barrel.

There was some trouble with beta.23 and they did jump to beta.24. BUT a breaking change was introduced in beta.23 and if you read only the changelog for beta.24 you might have missed it. Please take a look to Beta 23 changelog, breaking changes :

blueprints: The app root module and component must now be imported directly. (e.g., use import { AppModule } from './app/app.module'; instead of import { AppModule } from './app/';)

If I understood well, barrels are not working with AOT (which is now enabled by default). Basically, you can remove index.ts and should import what you need directly.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jan 2, 2017 at 11:53

maxime1992

24k11 gold badges90 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Chrillewoodz Over a year ago

Already tried this without luck. Thing is that some of the child routes work but never when the lazy loading is 3 levels deep. Because starting from my AppModule, I've got another level with AdminAreaModule, which has a DashboardModule, but beyond that one it doesn't work.. Despite doing the exact same definitions.

Chrillewoodz Over a year ago

Could it be my barrel imports that cause issues?

maxime1992 Over a year ago

I don't understand "barrel imports". What do you mean by that ?

Aluan Haddad Over a year ago

Barrel is a redundant, meaningless term that someone in the angular world came up with for describing the convention of an index file that ex-exports the contents of its containing directory. There was no need for such a term and hopefully people will stop using it.

Chrillewoodz Over a year ago

Currently changing thousands of imports lol, I'll get back to you when my fingers stop bleeding.

|

Collectives™ on Stack Overflow

Angular 2 AOT and lazy loading sub modules

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related