Configure Routing In An Angular CLI Project |About

... (/about/) Portfolio (/portfolio/) Blog (/blog/)

https://shermandigital.com/blog/configure-routin...
(//shermandigital.com/)
Home (//shermandigital.com/) Contact (/contact/)

Configure Routing In An Angular

CLI Project
May 14, 2017 by Chris Sherman

Angular CLI gets projects up and running quickly. If we’re building

any substantial web application, soon we’ll need to add routing for
displaying different views. To add routing, follow the steps below
after generating an Angular CLI project (https://github.com/angular
/angular-cli#generating-and-serving-an-angular-project-via-
a-development-server).

1. Open a terminal in the root directory of the application and

create a dashboard component: ng g component
dashboard
2. Open index.html and ensure there is a <base href="/"> tag
at the top of the head section.
3. In the root directory of the application, run the command: ng g
module app-routing
4. Open app-routing.module.ts and paste the following
configuration:

1 of 6 5/16/19, 12:16 PM
Configure import
Routing In{An
NgModule } Project
Angular CLI from |'@angular/core';
... https://shermandigital.com/blog/configure-routin...

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

import { DashboardComponent } from '../dashboard/dashboard.c

const routes: Routes = [

{
path: '',
component: DashboardComponent,
},
];

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

We export the RouterModule to indicate that our module has a

dependency on this module.

5. Open app.module.ts and add the AppRoutingModule to the

imports configuration section.

2 of 6 5/16/19, 12:16 PM
 ... Routing In An Angular CLI Project | ...
Configure https://shermandigital.com/blog/configure-routin...

import { AppRoutingModule } from './app-routing/app-routing.modu

...

@NgModule({
...
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
],
...
})

export class AppModule { }

6. In app.component.html, add <router-outlet></router-

outlet> in the space where views should appear.

7. Save all files. The dashboard view is now displayed within the
app component.

8. Now add other routes in app-routing.module.ts.

...
const routes: Routes = [
{
path: '/my-new-route',
component: MyNewRouteComponent,
},
{
path: '',
component: DashboardComponent,
},
];
...

 Angular (//shermandigital.com/tags/angular)

3 of 6 5/16/19, 12:16 PM
Configure Routing In An Angular CLI Project | ... https://shermandigital.com/blog/configure-routin...

4 of 6 5/16/19, 12:16 PM
Configure Routing In An Angular CLI Project | ... https://shermandigital.com/blog/configure-routin...
Comments for this thread are now closed ×

Comments Community 
1 Login

 Recommend 4 t Tweet f Share Sort by Oldest

@spjeff • 2 years ago

Thanks for the excellent post Chris.

Everything worked well with 'dashboard' only, but when I add

'/my-new-route' I see a console error. Any ideas? Is there a
config to allow paths starting with slash?

Unhandled Promise rejection: Invalid configuration of route

'/my-new-route': path cannot start with a slash ; Zone: <root> ;
Task: Promise.then ;

Screenshot Links:

https://ibb.co/hjW4Ek
https://ibb.co/n9RRS5
△ ▽ • Share ›

@spjeff > @spjeff • 2 years ago

Solved. Needed to add "useHash" like this:

imports: [RouterModule.forRoot(routes, {useHash:

true})],

I started a fresh new Angular CLI project with "ng new

project --routing" which auto created "app-
routing.module.ts"

Screenshot Links:
https://ibb.co/h3ty75
1△ ▽ • Share ›

Kyle J. Maxwell • 2 years ago

I was easily able to set up routing following these steps from
the cli.

Thanks Chris!
△ ▽ • Share ›

Mon Tresor Ada Bellash • 2 years ago

Using the CLI you may now create app with routing support like
following

ng new MyApp --routing

5 of 6 AND YOU ARE DONE! thanks to the CLI team 5/16/19, 12:16 PM
△ ▽ • Share ›
Configure Routing In An Angular CLI Project | ... https://shermandigital.com/blog/configure-routin...

Since writing
(/www.linkedin.com About
my first lines  /in/chrisjsherm/)
(/about/) Learn more about me
of code in
Connect with me on Portfolio
elementary
LinkedIn (/portfolio/) Browse some of my
school I've
(//www.linkedin.com work
developed expertise in
/in/chrisjsherm/) to
software engineering, team Blog
discover common
leadership, and project (/blog/) Technology tidbits
connections.
management. Today I’m
Contact
passionate about engineering (/github.com (/contact/) Send a message to get in
fast, scalable applications
 /chrisjshermtabrepositories) touch
powered by the cloud. My skills View Github (//github.com
and experience enable me to /chrisjsherm?tab=repositories/)
deliver a holistic approach that to browse the source code
generates results. of my open source
projects.

(/stackoverflow.com/users
 /1579559/chrisjsherm/)
Visit StackOverflow
(//stackoverflow.com
/users/1579559
/chrisjsherm/) to see my
contributions to the
programming community.

© 2018 Sherman Digital, LLC. All Rights Reserved. Developed by Sherman Digital, LLC (//shermandigital.com/)
Developed by Sherman Digital, LLC (//shermandigital.com/)

6 of 6 5/16/19, 12:16 PM