Generate Angular Project using Angular CLI

This commands help you to generate the Angular project in specific cases.
Replace “my-app” with your desired project name.
This guide was created using Angular 5.2 & CLI 1.6.7

→ Install Angular CLI

If you haven’t already installed the Command Line Interface, you need to install it at first.

Note: In most cases (e.g. macOS and Ubuntu) you need to add sudo if you want to install a global npm package.

bash

npm install -g @angular/cli

→ New project

Type the following command to create a new Angular project:

bash

ng new my-app

→ in current folder

Note: Be sure you are in the right folder!

bash

ng new my-app --directory ./

→ with router

The following commands will create a new Angular project, router module and a main page. You can choose a different name than ‘dashboard’, but remember to rename all code occurences.

bash

ng new my-app
cd my-app
ng generate module app-routing --flat --module=app
ng generate component pages/dashboard

Open src/app/app-routing.module.ts and replace all code with the following:

typescript

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

import { DashboardComponent } from './pages/dashboard/dashboard.component';

const appRoutes: Routes = [
  {path: 'app', component: DashboardComponent},
  {path: '', redirectTo: '/app', pathMatch: 'full'},
  {path: '**', component: DashboardComponent} // Error route
  // {path: '**', redirectTo: '/app'} // Alternatively you can just reroute somewhere
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      {enableTracing: false} // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule {
}

Open src/app/app.component.html and replace all code with the following:

html

<router-outlet></router-outlet>

Read more:

Leave a Reply

Your email address will not be published. Required fields are marked *