Angular零基础入门-项目基本配置

添加 ng-zorro-antd

详情参考官网,安装后效果如下：

ng add ng-zorro-antd

分享、核心模块

1. 创建分享、核心模块

分享模块：主要用于数据的共享

核心模块：全局配置，只加载一次

ng g m core
ng g m shared

2. 模块注入

在app.module.ts中注入模块

import { SharedModule } from '@shared/shared.module';
import { CoreModule } from '@core/core.module';

@NgModule({
 ...
  imports: [
    CoreModule,
    SharedModule,
  ]
...
})

export class AppModule { }

配置路径别名

在tsconfig.json文件中配置如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@src/*":["src/*"],
      "@core/*":["src/app/core/*"],
      "@shared/*":["src/app/shared/*"],
    }
  }
}

在其他目录中引用

import {SharedModule} from '@shared/shared.module';

模块路由

1. 根路由

新建routes-routing.module.ts文件替换原来的app-routing.module.ts文件作为根路由，并将路由注入到app.module.ts中

/*
 * @Author: kingford
 * @Date: 2021-01-20 15:42:38
 * @LastEditTime: 2021-02-19 10:50:27
 */
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { environment } from '@env/environment';
import { LayoutMenuComponent } from '@layout/menu/menu.component';
import { LoginComponent } from './modules/basic/login/login.component';

const routes: Routes = [
  {
    path: '',
    component: LayoutMenuComponent,
    children: [
      // basic
      { path: 'basic', loadChildren: () => import('./modules/basic/basic.module').then(m => m.BasicModule) },
      // card
      { path: 'card', loadChildren: () => import('./modules/card/card.module').then(m => m.CardModule) },
    ]
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  // 单页不包裹Layout
  { path: '**', redirectTo: 'exception/404' }
];


@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: environment.useHash
    })
  ],
  exports: [RouterModule]
})


export class RoutesRoutingModule { }

2. 模块路由，如：basic-routing.module.ts

配置对应模块路由，如：basic-routing.module.ts,并将路由注入到basic.module.ts中

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

import { BasicMenuComponent } from './menu/menu.component';

const routes: Routes = [
    {
        path: 'menu',
        component: BasicMenuComponent,
    },
];


@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})


export class BasicRoutingModule { }

注意：需要在使用"<router-outlet></router-outlet>"的模块中引入RouterModule模块，路由应该在对应的模块中引入

import { RouterModule } from '@angular/router';

因此一般在共享模块中引入

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

// zorro-antd-module
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule,
    ...SHARED_ZORRO_MODULES
  ],
  exports: [
    CommonModule,
    RouterModule,
    ...SHARED_ZORRO_MODULES
  ]
})


export class SharedModule { }