安装

按照官方执行

ng new ng-app

然后就卡住了，找了一下也有人碰到一样的问题，解决办法就是跳过安装

ng new ng-app --skip-install

生成项目成功，然后就可以进入文件夹，使用yarn安装依赖

cd ng-app

yarn

依赖安装完了可以启动了npm start，实际上是运行了ng server,在package.json中修改scripts的start，加上--open就可以自动打开浏览器

"scripts": {
    "start": "ng serve --open",
}

现在网站太丑了，加点东西美化一下，加入ant-design。angular的antd和react有点不一样，名字都改了，叫ng-zorro

没错，就是佐罗

开始安装，注意，这个命令会修改项目的配置文件等

ng add ng-zorro-antd

官方文档是这样说的

如果想自己维护工作流，理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发，如果遇到问题可参考我们所使用的 配置 进行定制。

1.安装组件

npm install ng-zorro-antd --save

2.引入模块

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { AppComponent } from './app.component';

/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    /** 导入 ng-zorro-antd 模块 **/
    NgZorroAntdModule
  ],
  bootstrap: [ AppComponent ],
  /** 配置 ng-zorro-antd 国际化（文案 及 日期） **/
  providers   : [
    { provide: NZ_I18N, useValue: zh_CN }
  ]
})
export class AppModule { }

3.在angular.json中引入样式和svg资源

{
  "assets": [
    ...
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ],
  "styles": [
    ...
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

创建组件

ng generate component components/my-first-component

就会在src/components/下创建一个组件，如果项目中有不止一个module，就会报错More than one module matches. Use skip-import option to skip importing the component into the clos est module.

我是通过ng add ng-zorro安装antd的，在pages下多了个welcome的模块

可以通过--module=moduleName来指定需要引入依赖的模块

ng generate component components/my-first-component --module=app

配置路由

路由配置在app-routing.module.ts，如下

...
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/welcome' },
  { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule) },
  { path: 'product-list', component: ProductListComponent },
  { path: 'product-list/:productId', component: ProductDetailsComponent },
  { path: 'my-cart', component: MyCartComponent },
];

loadChildren是一个懒加载，只有在访问这个path的时候才会加载对应的模块，似乎只能用于模块，不能用于组件