How to add a routing module to an existing module in angular CLI version 1.1.1?

Question

I have created a module in using angular CLI and forget to add --routing while it's creation, now i want to add a routing module to it.

ng init --routing won't help in angular CLI version 1.1.1

Well, add the code by yourself. Or generate another module with routing, and copy and paste the generated code. — JB Nizet, Jul 08 '17 at 19:36

score 79 · Accepted Answer · edited Jan 23 '20 at 12:20

79

That's not a problem at all.

Just add the routing manually.

All that the --routing flag does, in addition to adding <router-outlet></router-outlet> in app.component.html, is add q RouterModule.forRoot() call in a separate module called AppRoutingModule, and include that module in the imports of AppModule.

So, in app.module.ts, it adds AppRoutingModule to the imports of your AppModule.

The AppRoutingModule is defined as app-routing.module.ts, which is created from this template.

It's very small that I'll copy it here:

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

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

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

The {path: '', children:[]} is just a placeholder that you are expected to replace (I know because I added it to the source code). It just makes sure the router doesn't complain about the <router-outlet> when you don't have any routes.

So, back to the question, what should you do? Either copy the file to your project, to look just like the original CLI, and add AppRoutingModule to your AppModule's imports...

Or just add RouterModule.forRoot([/* routes here */]) to your AppModule's imports instead. It'll still work, with built-in support for lazy loading and everything else working just fine.

P.S.

Remember that to add child routes, you can always generate more modules with routing ng generate module Foo --routing regardless of whether you used the --routing flag with ng new or not. No configuration or any magic to worry about.

edited Jan 23 '20 at 12:20

Sedat Kilinc

2,843
1
22
20

answered Jul 08 '17 at 23:09

Meligy

35,654
11
85
109

So is there any specific flag to generate child routes? or it'll automatically create child routes when I use `--routing` flag while creating a new module? – Rajendrasinh Parmar Feb 27 '18 at 03:23
angular-cli (as of version 6 at least) always uses ```RouterModule.forChild()``` when generating a new module. Only when using `--routing` with `ng new` it uses ```RouterModule.ForRoot()``` as import in the routing-module. There are no actual Routes defined by the cli anyways. – Jonas Krispin Jun 19 '18 at 16:18
1

To be able to run the tests with the `ng test` successfully, you need to add `import { RouterTestingModule } from '@angular/router/testing';` and `TestBed.configureTestingModule({ imports: [ RouterTestingModule ],...` in the `app.component.spec.ts` file. – Orienteerix Sep 30 '18 at 08:57
Working as expected. – CodeChanger Jan 04 '19 at 09:14
this does not seem to work for child routing modules that you want to associate with a feature module; I created two simple feature modules with a single component for each module. one of the modules I specced "--routing" during creation, the other I tried to add manually after the fact. then I added the loadChildren subroutes to the routes of the AppRoutingModule. desipte being identical in almost every way, the could not route to the feature component to which routing had been manually added to the feature module. I am using Angular 11, BTW – schnarbies Oct 02 '21 at 21:37

Eric Eskildsen · Answer 2 · 2020-04-03T17:00:05.743

ng generate module app-routing --module app --flat
- Replace app with the name of your existing module
- Replace app-routing with the name to give the routing module

In the new module, add appRoutes and RouterModule.forRoot or RouterModule.forChild.

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

const appRoutes: Routes = [
    { path: 'some-path', component: SomeComponent }
];

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

Add <router-outlet></router-outlet> to your component if needed (e.g., app.component.html)

Source

How to add a routing module to an existing module in angular CLI version 1.1.1?

2 Answers2

Linked