CODEWITHSUNDEEP
htmlangulartypescriptangular2-routing
Luiz Negrini
Luiz Negrini

Reputation: 666

Angular routes not working with many modules

I'm creating my first application in Angular 4 and I imported my AppRoutingModule into app.module.ts, as far as I know, by importing the module into this app.module it becomes "visible" to the rest of the application. From this principle, I did not declare in a module below (retaguarda.module), but the component retaguarda.component has in its html the <router-outlet> </ router-outlet> tag, the error shown asks to import the AppRoutingModule Inside rearModule, however, as stated above, being declared in the app.module, should not be visible to the rear. Module as well?

Declaring straight in the retaguardamodule the error disappears, however the navigation is with bug, so I believe that the problem is in more than one place. Can you help me with that, too?

app.module.ts:

...
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        AppRoutingModule,
        RetaguardaModule,
        LoginModule
      ],
      providers: [
        LoginGuard,
        LoginService,
        Ambiente
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

retaguarda.module.ts:

...
@NgModule({
  imports: [
    CommonModule,
    NavbarModule,
    SidenavModule,
    CadastrosModule,
    MovimentacoesModule,
    AdministracaoModule,
    RelatoriosModule,
    ConfiguracoesModule,
    DashboardModule
  ],
  declarations: [
    RetaguardaComponent
  ],
  exports: [
    RetaguardaComponent
  ]
})
export class RetaguardaModule { }

app.component.html:

<app-retaguarda></app-retaguarda>

retaguarda.component.html:

<header>
    <app-navbar *ngIf="ambiente.usuarioLogado"></app-navbar>
    <app-sidenav ></app-sidenav>
</header>
<div class="container">
    <router-outlet></router-outlet>
</div>

Upvotes: 1

Views: 11684

Answers (1)

chrispy
chrispy

Reputation: 3612

You need to use .forRoot() and .forChild() here.

Start with AppRoutingModule.forRoot() and having a single route give you your RetaguardaComponent. Next, have the RetaguardaModule use the .forChild() notation to route within your module.

If RetaguardaComponent doesn't have any child routes and isn't a route itself (i.e. it always displays), then consider putting it into a CoreModule and having the AppComponent handle the routing.

Read more from this page to get a better grasp on how to set up routing:

https://angular.io/docs/ts/latest/guide/router.html#!#why-routing-module

Upvotes: 3

Related Questions