Angular2 RC5 router can't find module (lazy load)

Question

I have a pretty simple Angular2 RC5 test project which attempts to use routing to lazy load modules. I can't see what's wrong with the project.

Folders

app
  |-about (contains about.module.ts and about.component.ts)
  |-home (contains home.module.ts, home.component.ts)

app.routing.ts

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './app/home/home.module' },
    { path: 'about', loadChildren: './app/about/about.module' }
];

export const routing = RouterModule.forRoot(routes);

home.module.ts

import { NgModule }         from '@angular/core';
import { HomeComponent }    from './home.component';

@NgModule({
    declarations: [HomeComponent],
    exports: [HomeComponent]
})

export default class HomeModule { }

home.component.ts

import { Component }        from '@angular/core';

@Component({
    template: `<h2>Home...</h2>`
})

export class HomeComponent { }

I know the redirect to "home" is working, at startup I can see that home.module.js and home.component.js files are downloaded, but then it throws a console error message Cannot find 'HomeModule' in './app/home/home.module' (and in the network traffic tab I can confirm that both of the js files are correct, spelling is correct, etc.)

I suppose I should also mention I'm using router 3.0.0-rc.1, which is the latest as of Angular2 RC5, as far as I know. — McGuireV10
– McGuireV10, Commented Aug 16, 2016 at 22:41

Kamil Myśliwiec · Accepted Answer · 2016-08-16 23:06:58Z

2

Just replace:

{ path: 'home', loadChildren: './app/home/home.module#HomeModule' },

Into this line:

{ path: 'home', loadChildren: './app/home/home.module' },

If you already add export default in your module file, you do not have to specify name in path.

Of course, if you forgot about "default", the only way to select proper module is to add #name attribute - this is the second way. You could use one of them, not both.

And also in your HomeModule, add:

imports: [ 
    RouterModule.forChil‌d([ 
       { path: '', component: HomeComponent } 
    ]) 
],

Because all modules could have few components (not only one) so it is necessary to show angular a path to your main component.

edited Aug 16, 2016 at 23:06

answered Aug 16, 2016 at 22:23

Kamil Myśliwiec

9,2482 gold badges36 silver badges34 bronze badges

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

7 Comments

McGuireV10 Over a year ago

Thanks, but if I remove either default (and only "default", keeping export class HomeModule) or if I remove the #name tag, it hangs for awhile then blows the stack. If I remove export default (leaving only class HomeModule and retain the #name tag, I get the same Cannot find module error.

Kamil Myśliwiec Over a year ago

No no, you can't remove export word. Try to remove #HomeModule and keep stay "default". So - { path: 'home', loadChildren: './app/home/home.module' } and export default class HomeModule. Do you have any error message now?

McGuireV10 Over a year ago

Sure, editing now. Stack error: imgur.com/q2BM7r9 (Sorry, previous reply was wrong -- if I only remove default or if I only remove the #name tag in the route, it blows the stack.)

Kamil Myśliwiec Over a year ago

In your HomeModule, add: imports: [ RouterModule.forChild([ { path: '', component: HomeComponent } ]) ],

Kamil Myśliwiec Over a year ago

Because you only tell angular which module should be loaded. All modules could have few components (not only one) so it is necessary to show angular a path to your main component :)

|

Collectives™ on Stack Overflow

Angular2 RC5 router can't find module (lazy load)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related