CODEWITHSUNDEEP
angularangular2-routing
Max
Max

Reputation: 1210

Angular 2 Cli adding routes to existing project

I have an existing Angular 2 App. Now I would like to use routing for navigation. Is there a way to add routing to an existing Angular 2 Project using the Angular 2 Cli?

Lets say I have an Component "test" and want a route to this in a global Scope.

Upvotes: 28

Views: 33011

Answers (7)

frezq
frezq

Reputation: 702

In the current (Angular 15) version of Angular, a project created with the angular routing configuration and one without, only differ in 4 files:

  1. First there is an additional file in src/app called app-routing.module.ts, with the contents:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. src/app/app.module.ts has these two extra highlighted lines:
import { AppRoutingModule } from './app-routing.module';
@NgModule({
    ...
  imports: [
    ...
    AppRoutingModule

Image of diff

  1. src/app/app.component.spec.ts has these extra lines:
import { RouterTestingModule } from '@angular/router/testing';

   ...
   await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],

Image of diff

  1. src/app/app.component.html has an extra line at the very end of the file:
<router-outlet></router-outlet>

Upvotes: 0

AAshish jha
AAshish jha

Reputation: 952

In Angular 5/6 you can use these commands to add routing to an existing project.

  1. ng generate module app-routing --flat --module=app

--flat puts the file in src/app instead of its own folder. --module=app tells the CLI to register it in the imports array of the AppModule.

This will generate the file src/app/app-routing.module.ts for you.

  1. Now inside src/app/app-routing.module.ts you have to import the router code:

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

  2. Further, edit src/app/app-routing.module.ts to look like this:

    import { RouterModule, Routes, Router } from '@angular/router';
    import {class name} from 'address your component Component';
    const routes: Routes = [
      { path: '/home' , component : yourComponenetName}
    ];
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule { }
  1. Next, add the router-outlet tag to your app.html file to tell the router where to display routed views.
    <router-outlet></router-outlet>
  1. Additionally, you should check in an index.html file with this tag at the top.
    <base href="/">

It will be added directly if you use the CLI command that I mention above.

Upvotes: 8

Atif Sheikh
Atif Sheikh

Reputation: 115

update on the accepted answer

make sure to follow below points:

1> make sure that <base href="/"> is added inside index.html

    <html>
    <head>
    <base href="/" />
    <title>Angular Demo</title>

2> Add router outlet in ur app.component.html file <router-outlet></router-outlet>

    div style="text-align:center">
    <h1>
    Welcome to MyApp
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">
    </div>
    <router-outlet></router-outlet>
  • router outlet tells the router where to display routed view.

3> Remember to add AppRoutingModule to the "imports" section of your @NgModule decorator in app.module.ts too

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

Upvotes: 0

Vova Bilyachat
Vova Bilyachat

Reputation: 19474

UPDATE Original question is about Angular 2 CLI. This doesn't work for curent Angular version!

It depends but if you want to add routings to existing module then add folowing to your module.

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

const routes: Routes = [];
//in array you should have your routes like 
// { path: "path",  component: ComponentName },

Then in NgModule where you have imports definition 

RouterModule.forRoot(routes, { useHash: true })

Or for child

RouterModule.forChild(routes)

Example for clean project

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



const routes: Routes = [{ path: "path",  component: ComponentName }];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

Upvotes: 2

Ivan
Ivan

Reputation: 1577

UPDATE Original question is about Angular 2 CLI. This doesn't work for curent Angular version!

  1. Run ng init --routing

  2. And answer no every question from CLI. By this way you will get app-routing.module.ts.

  3. Add import { AppRoutingModule } from './app-routing.module';

and imports: [AppRoutingModule] to your app.module.ts

  1. Profit! You get the same routing you would get if you would create routing with Angular CLI from the start.

Upvotes: 8

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

I found the simplest way so far. I know this is already answered and accepted also but it is not working in the current scenarios because ng init is removed so if you have forgotten to add routing while creating new project than you can add routes to existing project as following steps. Hope it will be helpful.

First of all add app-routing.module.ts file in your src --> app folder

app-routing.module.ts file would be like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';     // Add your component here
import { AboutComponent } from './about/about.component';  // Add your component here

//This is my case 
const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    }
];

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

Then Import app-routing.module.ts file in app.module.ts file as follow.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; // Added here

Now you will be able to perform routing task.

Upvotes: 26

freedeveloper
freedeveloper

Reputation: 4082

it is not explain if you currently has some router declared in your application, any way you can add routing in any moment.

It is not possible using the command --ng int --routing because was eliminated. and the routing option is only available when you running the new command, that create a new solution.

But you can create manually it. if you have some router in your app.module or none, you can follow the step described here to generate it: Implementing routing in separate module in angular

Upvotes: 1

Related Questions