Multiple modules and routing in angular 5

Question

can somebody tell me how correct to set up routing when using multiple modules in my project? I have app.module and courses.module with some components declared in. I want to know how to connect modules and edit properly routing in courses.module, thats share routes: "/courses/list" and "/courses/detail"

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//import { CoursesRoutingModule } from './components/courses/courses-routing.module';

const routes: Routes = [
  {
    path: 'courses',
    loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' 
  }
];

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

app.component.html

<h1>App.component</h1>
<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses">KURSY</button>
</p>
<router-outlet></router-outlet>

And here's courses component:

courses.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CoursesComponent } from './courses.component';
import { CoursesDetailComponent } from './components/courses-detail/courses-detail.component';
import { CoursesListComponent } from './components/courses-list/courses-list.component';

const routes: Routes = [
//  {
//    path: 'courses',
//    loadChildren: '/src/app/components/courses/courses.module'
//  }
//  ,
//  {
//    path: 'courses/list',
//    component: CoursesListComponent,
//    outlet: 'courseslist'
//  }
];

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

courses.component.html:

<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses/list">list</button>
    <button routerLink="/courses/detail">detail</button>
</p>

Riscie · Accepted Answer · 2021-10-18 11:31:17Z

49

Edit 08/2019

Adapted the lazy load module syntax to the newly, strong-typed syntax introduced in angular 8.

Edit 10/2021:

This construct is still valid for Angular 12.

Solution

Here is how I do it:

app.module.ts

import {ModuleRouting} from './app.routing';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        ModuleRouting,
        SubmoduleModule         
    ]
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';

const routes: Routes = [
    {path: 'submodule', loadChildren: () => import('app/submodule/submodule.module').then(m => m.SubmoduleModule)}
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

submodule.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SubmoduleRouting} from './submodule.routing';

@NgModule({
    imports: [
        CommonModule,
        SubmoduleRouting
    ],
    declarations: [
        //...
    ]
})
export class SubmoduleModule {
}

submodule.routing.ts

import {RouterModule, Routes} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';

const routes: Routes = [
    {
        path: '',
        component: SomeComponent,
    },
    {
        path: 'other',
        component: SomeOtherComponent,
    }
];

export const SubmoduleRouting: ModuleWithProviders = RouterModule.forChild(routes);

You can also generate the module and routing files using the angular cli and then adapt them: (cd to the directory where the files should be created before every command)

ng g m module --routing
ng g m submodule --routing

edited Oct 18, 2021 at 11:31

answered Nov 17, 2017 at 14:52

Riscie

4,9291 gold badge29 silver badges33 bronze badges

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

11 Comments

Eeks33 Over a year ago

You may want to add that Submodule should be imported by AppModule in this case

Osmiornica najszybszy kucharz Over a year ago

I'm using app-routing.module.ts created by angular cli, in your solution i see module.routing.ts. I bet you have created it by you own. One is module, next is as encapsulated logic file. What's the correct way?

Riscie Over a year ago

Do you mean like in this file github.com/johnpapa/angular-tour-of-heroes/blob/master/src/app/… @Osmiornicanajszybszykucharz?

Osmiornica najszybszy kucharz Over a year ago

Yes, exacly. Is Treated as moudle. Is This changing anything?

Riscie Over a year ago

You could include the modules name if you want export const SubmoduleRouting: ...

|

woodykiddy · Accepted Answer · 2017-11-17 15:00:03Z

2

app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'courses', loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' }
    ]
  }
];

courses.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'list', component: CoursesListComponent}
    }
  }
];

I would do it this way. Give it a try yourself and see how it goes.

answered Nov 17, 2017 at 15:00

woodykiddy

6,48518 gold badges66 silver badges107 bronze badges

2 Comments

Osmiornica najszybszy kucharz Over a year ago

I got Error: "Component CoursesListComponent is not part of any NgModule or the module has not been imported into your module." even I have imported this component in courses.module.ts and courses-routing.module.ts.

woodykiddy Over a year ago

have you declared your CoursesListComponent in either courses module or the app module? i.e. add it to the declarations.

Collectives™ on Stack Overflow

Multiple modules and routing in angular 5

2 Answers 2

11 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related