import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { RouterModule , Routes , Router } from '@angular/router' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import { HeaderComponent } from './header/header.component' ; import { HomeComponent } from './home/home.component' ; import { AboutComponent } from './about/about.component' ; import { TodosListComponent } from './todos-list/todos-list.component' ; import { TodoComponent } from './todo/todo.component' ; import { PageNotFoundComponent } from './page-not-found/page-not-found.component' ; import { FormsModule } from '@angular/forms' ; import { HttpClientModule } from '@angular/common/http' ; import { NgZorroAntdModule , NZ_I18N , en_US } from 'ng-zorro-antd' ; import { registerLocaleData } from '@angular/common' ; import en from '@angular/common/locales/en' ; registerLocaleData ( en ) ; const appRoutes = [ { path : '' , component : HomeComponent } , { path : 'todos/:id' , component : TodoComponent } , { path : 'todos' , component : TodosListComponent , data : { title : 'Todos List' } } , { path : '**' , component : PageNotFoundComponent } ] ; @ NgModule ( { declarations : [ AppComponent , HeaderComponent , HomeComponent , AboutComponent , TodosListComponent , TodoComponent , PageNotFoundComponent ] , imports : [ RouterModule . forRoot ( appRoutes ) , BrowserModule , BrowserAnimationsModule , FormsModule , HttpClientModule , NgZorroAntdModule , ] , providers : [ { provide : NZ_I18N , useValue : en_US } ] , bootstrap : [ AppComponent ] } ) export class AppModule { }