Modules with router-outlet in Angular 4/5

Question

Is possible to have different modules with separated router-outlets each?

I have made an entry-module for take care of login/register.

This module is loaded inside the main app.module Angular CLI builds.

This is my app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    UserComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    EntryPointModule,
    ApplicationModule,
    RoutingModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('id_token');
        },
        whitelistedDomains: ['localhost:8080']
      }
    })
  ],
  providers: [AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
  },
  AuthGuardService,
  RoleGuardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this are my routes at this routingmodule at this point:

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full'},  
  { path: 'login', loadChildren: '../entry-point/entry-point.module#EntryPointModule'},  
  { path: 'application', loadChildren: '../application/application.module#ApplicationModule'},
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RoutingModule { }

For now, the app redirects to login throught a router-outlet inside the bootstraped AppComponent:

This login component is inside a module called entry point:

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    EntryPointRouterModule,
    BrowserModule,
    BrowserAnimationsModule,
  ],
  declarations: [LoginFormComponent,
  RegisterComponent,
  ModalComponent],
  providers: [
    RegistrationService,
    ModalService
  ]
})
export class EntryPointModule { }

These are the routes of this module:

EntryPointRouterModule:

const routes: Routes = [
  { path: 'login', component: LoginFormComponent},
  { path: 'register', component: RegisterComponent},
];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  declarations: []
})
export class EntryPointRouterModule { }

app.component.html

<router-outlet></router-outlet>

If login is successful it sends to /application, with loadchildren as you see above. This is the logic when the login form is submited inside the loginform component:

  onSubmit(): void {
    this.authService.login(this.username, this.password)
      .subscribe(
      (res) => {
        this.authService.setSession(res);
        this.router.navigate(['application']);
      },
      (error) => {
        console.log(error);
        this.serverOutput = 'Wrong username/password';

      });
  }

Now it is heading to another module: applicationModule, in the routes of the main appmodule I set this route:

 { path: 'application', loadChildren: '../application/application.module#ApplicationModule'},
    ];

I want my application module to have its own router outlet

This is my applicationModule:

@NgModule({
  imports: [
    CommonModule,
    ApplicationRouterModule,
  ],
  declarations: [MainWindowComponent, DeleteOneComponent, DeleteTwoComponent],
  bootstrap: [MainWindowComponent]
})
export class ApplicationModule { }

And i have a MainWindowComponent with this html inside

<p>
  main-window works!
</p>
<router-outlet name="approuter"></router-outlet>

And this are the routes

const routes: Routes = [
  { 
    path: 'application', 
    component: MainWindowComponent,
    children: [
      { path: 'delete', component: DeleteOneComponent, outlet:'approuter'}
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  declarations: [],

})
export class ApplicationRouterModule { }

I want to load DeleteOneComponent inside the router-outlet of the MainWindowComponent.

Is that possible?

Hey dexter, thanks for your interest, hope you can help a bit ;) When i go to application/delete nothing shows and i get this error in the browser console: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'application/delete' — dmance

Uğur Dinç Uğur Dinç · Accepted Answer · 2018-02-09T13:01:25

You need to remove 'application' from your application routes and use an empty/default route in order to go to application/delete.

Otherwise, as the way you have it setup, you can only access DeleteOneComponent by application/application/delete.

Change this:

const routes: Routes = [ { path: 'application', component: MainWindowComponent, 
children: [ { path: 'delete', component: DeleteOneComponent, outlet:'approuter'} ] } ];

To this:

const routes: Routes = [ { path: ' ', component: MainWindowComponent, 
children: [ { path: 'delete', component: DeleteOneComponent, outlet:'approuter'} ] } ];

Modules with router-outlet in Angular 4/5

2 Answers