1、先创建domain文件夹,在里面建一个user.model.ts的user领域对象。
export interface User{ id?:string; email:string; password:string; name:string; avatar:string; }
2、ng g m login创建一个login module.
在login下创建一个login组件。
3、在login下建立一个login-routing.module.ts子路由。
【最好为每个模块建立自己的路由】
建立路由的快捷方式。装插件Angulae7 Snippets,用ng-router-featuremodule.
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CommonModule } from '@angular/common'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path: 'login', component: LoginComponent } ]; @NgModule({ imports: [CommonModule, RouterModule.forChild(routes)], exports: [RouterModule] }) export class FeatureRoutingModule {}
4、配置根路由
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo:'/login',pathMatch:'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
确保根模块中引入根路由。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CoreModule } from './core/core.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSidenavModule} from '@angular/material'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, CoreModule, MatSidenavModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
子模块导入子路由。
import { NgModule } from '@angular/core'; import { LoginComponent } from './login/login.component'; import { SharedModule } from '../shared/shared.module'; import { LoginRoutingModule } from './login-routing.module'; @NgModule({ declarations: [LoginComponent], imports: [ SharedModule, LoginRoutingModule ] }) export class LoginModule { }
5、安装animation动画依赖
npm install --save @angular/animations
二、相关报错
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
之前路由配置
AppRoutingModule里这样配置
{path: '', redirectTo: '/login', pathMatch: 'full'}
LoginRoutingModule里这样配置
{ path: 'login', component: LoginComponent }
修改为:
AppRoutingModule:
const routes: Routes = [ {path: '', redirectTo: '/login', pathMatch: 'full'}, {path:'login',loadChildren:'./login/login.module#LoginModule'} ];
LoginRoutingModule
{ path: '', component: LoginComponent }
未完待续。。。