The Angular CLI is a command-line interface tool that can create a project, add files, and perform various ongoing development tasks such as testing, bundling, and deployment.
Angular Router Tutorial
For Single Page applications, Routing is the only tool, or we can say module, to navigate the pages to pages.
You can find its documentation on this website.
Step 1: Install The Angular Project.
Install Angular CLI globally on your system by typing the following command.
npm install -g @angular/cli
Now, create one project called ngRouter.
ng new ngRouter
Serve the application by the following command.
cd my-app ng serve --open
Step 2: Make three components for the application.
Create one directory inside src >> app folder called components.
Next, make three components by typing the following command.
ng g c home ng g c about ng g c dashboard
It creates a separate folder inside the src >> app directory, and we need to move all these three folders inside the components folder for better project structure.
Step 3: Routing and Navigation.
The Angular Router enables navigation from one view to the next as users perform application tasks.
First, we need to import the routing modules inside our app.module.ts file.
// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
BrowserModule, RouterModule
],
Configuration
When you have created the components, its default path is different, and now we have moved the components, so now its path is different. So, first, we need to change that path in the app.module.ts file.
// app.module.ts
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
Okay, now we need to configure the routes. So make one file inside the app directory called routerConfig.ts file.
Write the following code in it.
// routerConfig.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{ path: 'dashboard',
component: DashboardComponent
}
];
We have defined one array, and inside that array, we have registered the different routes with their components. Then, finally, we have exported it.
Now, import this object inside app.module.ts and register the module.
// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
Step 4: Define the Router outlet.
In the app.component.html file, write the following code.
<!-- app.component.html -->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</div>
Now, we have already changed the title inside the app.component.ts file.
// app.component.ts title = 'Angular Router Tutorial';
Start the app with the following command.
ng serve --open
After the webpack compiles successfully, we can see the following page at http://localhost:4200/home.
That’s it for this tutorial. Thanks for the reading.
so helpful! thanks for this
Thank you
Thank you
Thanks for your effort, but export default appRoutes; didn’t work for me I got an error as soon as I ng served the app.
please use export const. It works fine.
export const appRoutes: Routes = [
{ path: ‘home’,
component: HomeComponent
},
{
path: ‘about’,
component: AboutComponent
},
{ path: ‘dashboard’,
component: DashboardComponent
}
];
Then import like this in app.module.ts file.
// app.module.ts
import { appRoutes } from ‘./routerConfig’;
Restart the server. And error will be gone.
i got these error:
ERROR in TypeError: Cannot read property ‘loadChildren’ of null
export const appRoutes: Routes = [
{ path: ‘home’,
component: HomeComponent
},
{
path: ‘about’,
component: AboutComponent
},
{ path: ‘dashboard’,
component: DashboardComponent
}
];
Then import like this in app.module.ts file.
// app.module.ts
import { appRoutes } from ‘./routerConfig’;
Restart the server. And error will be gone.
i got these error:
ERROR in TypeError: Cannot read property ‘loadChildren’ of null
I guess you need to export routes like export const routes. This will resolve the issue in the routes file.
Tks man
good and easy to understand tutorial. Thanks.
Good tutorial. You say to ‘cd my-app’, but for my version (Angular CLI: 1.7.3 / Angular: 5.2.9), the folder name is the project name from the previous command; ‘ng new ngRouter’, so ‘cd ngRouter’ is required.
hi, i got an error => ERROR in Cannot read property ‘loadChildren’ of null
and i changed from export default appRoutes; to export const routes
also i’m getting same error
import { Routes } from ‘@angular/router’;
import { HomeComponent } from ‘./components/home/home.component’;
import { AboutComponent } from ‘./components/about/about.component’;
import { DashboardComponent } from ‘./components/dashboard/dashboard.component’;
const appRoutes: Routes = [
{ path: ‘home’,
component: HomeComponent
},
{
path: ‘about’,
component: AboutComponent
},
{ path: ‘dashboard’,
component: DashboardComponent
}
];
export default appRoutes;
I receive the same error ‘ERROR in TypeError: Cannot read property ‘loadChildren’ of null’ even after changing the export type to const, could you please share a link to your code?
Kind regards,
Pietman
export const appRoutes: Routes = [
{ path: ‘home’,
component: HomeComponent
},
{
path: ‘about’,
component: AboutComponent
},
{ path: ‘dashboard’,
component: DashboardComponent
}
];
Then import like this in app.module.ts file.
// app.module.ts
import { appRoutes } from ‘./routerConfig’;
Restart the server. And error will be gone.
This is the best tutorial i found for angular routing.
good tutorial,thanks you so much.
hello i want to routing