why the component is not loading in angular?

Question

I am trying to learn lazy loading in angular 4 .I took help from this tutorial How to Lazy Load Components in Angular 4 in Three Steps using loadchildren I tried to implement this in my example.My application is working fine but lazy load is not working .

I have four tab on header (first, second , third ,fourth) .When I click on third or fourth I didn't find any extra network to load module

here is my code

const  appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent },
 { path: 'seo', loadChildren: '../foo/foo.module#FooModule'},
  { path: '',redirectTo: '/first',pathMatch: 'full'}
];
@NgModule({
  imports:      [ BrowserModule, FormsModule ,RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent,FirstComponent,SecondComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

What I'm doing wrong?

Did you notice additional chunks when bundling your app ? (They should not be marked as [initial]) — Guerric P
– Guerric P, Commented May 28, 2018 at 10:01

Tony · Accepted Answer · 2018-05-28 11:01:59Z

1

Your code is not wrong, I tested with localhost and it renders as expected. I think stackblitz has a different way to deal with lazy loading. stackblitz's issue

edited May 28, 2018 at 11:01

answered May 28, 2018 at 10:15

Tony

1,2942 gold badges12 silver badges18 bronze badges

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

2 Comments

user5711656 Over a year ago

will it load foo-module on both cases when user click on third and forth tab

Tony Over a year ago

@user5711656 it will load only first time when user click third or forth tab

Collectives™ on Stack Overflow

why the component is not loading in angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related