快速用angular+ng-zorro创建项目

创建项目

ng new abc --style css --routing
cd abc
ng add ng-zorro-antd

目录结构

不要急着创建组件，参考ng-alain的文件目录。这个是我快速整理的一个模板（含抽象类）

├── src
│   ├── app
│   │   ├── layout             # 通用布局
│   │   ├── routes
│   │   │   ├── business   # 业务目录
│   │   │   └── admin       # 系统管理部分
│   │   ├── shared              # 共享模块
│   │   │   ├── base          # 一些抽象类、公共组件
│   │   │   │   ├── app-component-base.ts        # 页面父类，DI为主
│   │   │   │   └── paged-component-base.ts    # 页面父类，公共业务处理为主
│   │   │   ├── services       # 服务
│   │   │   ├── pipes       # 管道
│   │   │   ├── mock       # 模拟数据
│   │   │   └── shared.module.ts    # 共享模块文件

创建组件、服务等

创建完项目,创建两个组件

ng g c cmp1
ng g c cmp2

在appcomponent中添加 <router-outlet></router-outlet>
在app-routing.module.ts中添加路由

const routes: Routes = [
  { path: '', redirectTo: 'cmp1', pathMatch: 'full' },
  { path: 'cmp1', component: Cmp1Component},
  { path: '**', redirectTo: 'cmp1' }
];

运行项目npm start

引进zorro样式

在组件所在的module中引入NgZorroAntdModule,
在style.css中引用@import "~ng-zorro-antd/ng-zorro-antd.min.css";

参考：https://ng.ant.design/docs/getting-started/zh

注意⚠️：
在10.2.0版本中没有NgZorroAntdModule，可以手动将组件模块一起.
新建一个模块import-ng-zorro-antd.module.ts

import { NgModule } from '@angular/core';
import { NzAffixModule } from 'ng-zorro-antd/affix';
// ……
@NgModule({
  exports: [
    NzAffixModule,
  ]
})
export class ImportNgZorroAntdModule {}

引进到需要的模块，并export给该模块的组件使用。

imports: [
    ImportNgZorroAntdModule
  ],
  exports: [ImportNgZorroAntdModule],

部署

用mac OS 自带的web服务器SimpleHTTPServer部署静态网站

$ cd abc/dist/Abc
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

打开http://localhost:8000