New angular project with routing

Here's a step-by-step guide to creating a new Angular project with routing:

Step 1: Install Node.js and npm

If you haven't already, install Node.js and npm (the package manager for Node.js) from the official website: https://nodejs.org/en/download/

Step 2: Create a new Angular project

Open a terminal or command prompt and run the following command to create a new Angular project:

ng new my-app

Replace my-app with the name of your project.

Step 3: Add routing to the project

In the terminal, navigate to the project directory:

cd my-app

Then, run the following command to add routing to the project:

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

This will create a new file called app-routing.module.ts and add it to the app.module.ts file.

Step 4: Configure the routing module

Open the app-routing.module.ts file and add the following code:

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

This code defines two routes: one for the home component and one for the about component.

Step 5: Create the home and about components

Create two new files called home.component.ts and about.component.ts in the src/app directory:

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h1>Home Component</h1>'
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '<h1>About Component</h1>'
})
export class AboutComponent { }

These components will be used to render the home and about pages.

Step 6: Add the routing module to the app module

Open the app.module.ts file and add the following code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

This code imports the AppRoutingModule and adds it to the imports array.

Step 7: Run the application

Run the following command to start the application:

ng serve

This will start the development server and open the application in your default web browser.

That's it! You now have a new Angular project with routing. You can navigate between the home and about pages by clicking on the links in the browser address bar.