Skip to main content

how add route in default module in angular

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

Use the CLI to generate it.

ng generate module app-routing --flat --
module=app
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

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



const routes: Routes = [
  { path:'users', component: UsersComponent }
];

Comments

Popular posts from this blog

Create module and component in angular by CLI

To create a component as part of a module you should ng g module newModule  to generate a module, cd newModule  to change directory into the  newModule  folder ng g component newComponent  to create a component as a child of the module.

How to display text in angular component?

Let’s take an example and understand more about Data Display. In our example, we will look at displaying the values of the various properties in our class in an HTML page. Step 1  − Change the code of the app.component.ts file to the following. import { Component } from '@angular/core' ; @Component ({ selector : 'my-app' , templateUrl : 'app/app.component.html' }) export class AppComponent { TutorialName : string = 'Angular JS2' ; appList : string [] = [ "Binding" , "Display" , "Services" ]; } Following points need to be noted about the above code. We are defining an array called appList which of the type string. We are defining 3 string elements as part of the array which is Binding, Display, and Services. We have also defined a property called TutorialName which has a value of Angular 2. Step 2  − Make the following changes to the app/app.component.html file w...

How setup or install angular?

Before creating our first Angular app, first, we’ll see how to install Angular on a Windows system. Step 1 - Install NodeJS Follow the link -  https://nodejs.org/en/download/ Download the node.js installer for Windows and install it. To check the installed version of Node.js, open the command prompt. Type the  “npm -v”  command to check the Node.js installation and version.   Step 2 - Install TypeScript Open the link  https://www.npmjs.com/package/typescript   Copy the above command  “npm install -g typescript”  and run it on command prompt. Step 3 - Install Angular CLI (Angular command line interface) Open the link  https://cli.angular.io/  and follow the instructions to install Angular CLI and to create your first  Angular app.   Type the command “npm install -g @angular/cli” on the command prompt and press enter to install Angular cli. Type “ng new hello-world” and hit enter to create the Hello World app. Once you see t...