76616

Many router outlets in Angular 6

Question:

In my app I have two main parts:

<ul><li>Authorization - login and registration pages</li> <li>Panel - basic app pages</li> </ul>

In my app.component.html I have router outlet for navigation to Authorization and Panel components.

However in the mentioned components I have another router outlets for navigation between cards (subcomponents). I tried to do routing separetly for each module, but it doesnt work. When I go to path eg. "/authorization/login" I got error that such url doesnt exists.

Here is my app-routing.module.ts

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PanelComponent } from '../panel/panel.component'; import { AuthorizationComponent } from '../authorization/authorization.component'; import { DeliveriesComponent } from '../panel/cards/deliveries/deliveries.component'; const routes: Routes = [ {path: '', redirectTo: 'authorization', pathMatch: 'full'} ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class RoutingModule { }

authorization-routing.module.ts

const authorizationRoutes: Routes = [ {path: 'authorization', component: AuthorizationComponent, children: [ {path: 'authorization/register', component: RegisterComponent}, {path: 'authorization/login', component: LoginComponent}, {path: 'authorization/restaurant-registration', component: RestaurantRegistrationComponent}, {path: 'authorization/confirmation', component: ConfirmationComponent} ] } ]; @NgModule({ imports: [ RouterModule.forChild(authorizationRoutes) ], exports: [RouterModule] }) export class AuthorizationRoutingModule { }

app.module.ts

import { PanelModule } from './panel/panel.module'; import { AuthorizationModule } from './authorization/authorization.module'; import { RoutingModule } from './routing/routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, LayoutModule, PanelModule, AuthorizationModule, FormsModule, RoutingModule ], providers: [], bootstrap: [ AppComponent, ] }) export class AppModule { }

Could you explain me what I am doing wrong with this routing? I tried many ways to solve this issue, but nothing worked.

Answer1:

Change the routes to this:

const authorizationRoutes: Routes = [ {path: 'authorization', component: AuthorizationComponent, children: [ {path: 'register', component: RegisterComponent}, {path: 'login', component: LoginComponent}, {path: 'restaurant-registration', component: RestaurantRegistrationComponent}, {path: 'confirmation', component: ConfirmationComponent} ] } ];

You don't need to specify authorization again, because they are child routes

Answer2:

I can suggest you to implement this by creating seperate modules (i.e. Lazy loaded Modules) for each child Components. Lets say for RegisterComponent, you can create RegisterModule. Then you have to change the routes as shown below:

const authorizationRoutes: Routes = [ { path: 'authorization', component: AuthorizationComponent, children: [ { path: 'register', loadChildren: './register/register.module#RegisterModule' }, { path: 'login', loadChildren: './login/login.module#LoginModule' }, { path: 'restaurant-registration', loadChildren: './restaurant-registration/restaurant-registration.module#RestaurantRegistrationModule' }, { path: 'confirmation', loadChildren: './confirmation/confirmation.module#ConfirmationModule' } ] } ];

Recommend

  • How to change parent variable from children component?
  • Angular error: no provider for ActivatedRoute
  • Cannot find type definition file for 'highcharts'
  • Lazy loading not working in Angular 6
  • Angular2 - *ngIf and async observables
  • Error: No component factory found for TermsConditions
  • Execute particular component after click on md dialog button
  • Date format change angular 2
  • why route of backbone needs the default route
  • Manage different base layouts in Angular2
  • Accessing 3rd level of JSON with Angular ng-repeat
  • React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
  • PWA with multiple pages
  • Uber API - requests endpoint cannot read read json
  • Slicing an SPA into several components and use AngularJS
  • to implement a spinner in angular2+
  • Angular2 component view does not update on value change via method
  • CakePHP ACL tutorial initDB function warnings
  • JBoss External Properties Files in Classpath
  • Connect .sks to skscene.h
  • Why does access(2) check for real and not effective UID?
  • Checking free space on FTP server
  • Meteor helpers not available in Angular template
  • How to recover from a Spring Social ExpiredAuthorizationException
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Symfony2: How to get request parameter
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • SetUp method failed while running tests from teamcity
  • Python: how to group similar lists together in a list of lists?
  • Revoking OAuth Access Token Results in 404 Not Found
  • Hits per day in Google Big Query
  • Understanding cpu registers
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • File not found error Google Drive API
  • Linking SubReports Without LinkChild/LinkMaster
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Busy indicator not showing up in wpf window [duplicate]