创建 Angular 项目

参考地址

1、开发环境介绍

• cli: @angular/cli@8.3.19
• node: v13.1.0
• npm: 6.12.1

2、创建项目 record-money-angular

ng new record-money-angular --skip-install --style=scss --routing

• --skip-install 表示跳过 npm 安装(因为很慢)
• --style=scss 表示期望样式风格是 scss（如果用 Angular Material UI，需要用 scss）。或者 --style=sass 、 --style=css
• --routing 创建带有路由的模块，并添加到根模块中

创建成功效果图如下：

D:\GitHub>ng new record-money-angular --skip-install --style=scss --routing
CREATE record-money-angular/angular.json (3793 bytes)
CREATE record-money-angular/package.json (1306 bytes)
CREATE record-money-angular/README.md (1036 bytes)
CREATE record-money-angular/tsconfig.json (543 bytes)
CREATE record-money-angular/tslint.json (1953 bytes)
CREATE record-money-angular/.editorconfig (246 bytes)
CREATE record-money-angular/.gitignore (631 bytes)
CREATE record-money-angular/browserslist (429 bytes)
CREATE record-money-angular/karma.conf.js (1032 bytes)
CREATE record-money-angular/tsconfig.app.json (270 bytes)
CREATE record-money-angular/tsconfig.spec.json (270 bytes)
CREATE record-money-angular/src/favicon.ico (948 bytes)
CREATE record-money-angular/src/index.html (304 bytes)
CREATE record-money-angular/src/main.ts (372 bytes)
CREATE record-money-angular/src/polyfills.ts (2838 bytes)
CREATE record-money-angular/src/styles.scss (80 bytes)
CREATE record-money-angular/src/test.ts (642 bytes)
CREATE record-money-angular/src/assets/.gitkeep (0 bytes)
CREATE record-money-angular/src/environments/environment.prod.ts (51 bytes)
CREATE record-money-angular/src/environments/environment.ts (662 bytes)
CREATE record-money-angular/src/app/app-routing.module.ts (246 bytes)
CREATE record-money-angular/src/app/app.module.ts (393 bytes)
CREATE record-money-angular/src/app/app.component.html (25530 bytes)
CREATE record-money-angular/src/app/app.component.spec.ts (1140 bytes)
CREATE record-money-angular/src/app/app.component.ts (225 bytes)
CREATE record-money-angular/src/app/app.component.scss (0 bytes)
CREATE record-money-angular/e2e/protractor.conf.js (808 bytes)
CREATE record-money-angular/e2e/tsconfig.json (214 bytes)
CREATE record-money-angular/e2e/src/app.e2e-spec.ts (653 bytes)
CREATE record-money-angular/e2e/src/app.po.ts (262 bytes)
    Directory is already under version control. Skipping initialization of git.

文件解释如下：

文件	用途
app/app.component.{ts,html,css,spec.ts}	使用 HTML 模板、CSS 样式和单元测试定义  AppComponent  组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts	定义  AppModule，根模块为 Angular 描述如何组装应用。 目前，它只声明了  AppComponent。 不久，它将声明更多组件。
assets/*	这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*	这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。
browserslist	一个配置文件，用来在不同的前端工具之间共享目标浏览器。
favicon.ico	每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html	这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有  js  和  css  文件添加进去，所以你不必在这里手动添加任何  <script>  或  <link>  标签。
karma.conf.js	给 Karma 的单元测试配置，当运行  ng test  时会用到它。
main.ts	这是应用的主要入口点。 使用 JIT 编译器编译本应用，并启动应用的根模块  AppModule，使其运行在浏览器中。 你还可以使用 AOT 编译器，而不用修改任何代码 —— 只要给  ng build  或  ng serve  传入  --aot  参数就可以了。
polyfills.ts	不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用  core-js  和  zone.js  通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
styles.css	这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts	这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.json	TypeScript 编译器的配置文件。tsconfig.app.json  是为 Angular 应用准备的，而  tsconfig.spec.json  是为单元测试准备的。
tslint.json	额外的 Linting 配置。当运行  ng lint  时，它会供带有  Codelyzer  的  TSLint  使用。 Linting 可以帮你们保持代码风格的一致性。

ng new 设定选项

除了--skip-install、--style=scss、--routing 之外，ng new 还有很多选项，请参考下表：

选项	缩写	说明
--dry-run	-d -dryRun	空跑，会列出创建的文件但是不会实际创建
--verbose	-v -verbose	输出详细的日志信息
--directory	-dir	制定项目的目录名称，缺省为项目名称
--inline-style	-is	使用内连样式
--inline-template	-it	使用内连模版样式
--version	-	制定 Angular CLI 使用的版本
--routing	-	创建带有路由的模块，并添加到根模块中
--prefix	-p	设定选择器制定前缀，缺省为 app
--style	-	设定样式类型，缺省为 css
--skip-tests	-st	跳过创建测试文件
--skip-install	-	跳过安装依赖包
--skip-git	-sg	跳过初期化 git 仓库

3、安装依赖包

npm install

或(推荐使用yarn install，可以将 yarn 设置为淘宝源，加快包安装的速度)

yarn install

4、运行项目

使用默认端口运行(tips: --open 指的是自动打开网页，可缩写成 --o)

ng serve --open

指定端口运行

ng serve --open --port 4003

允许其他主机访问（在 Docker Linux 容器中中开发必须带上 --host: 0.0.0.0 ，在 Windows 下需要使用 --host=0.0.0.0）

ng serve --open --port 4003 --host=0.0.0.0

效果图如下：

5、生成 Components, Directives, Pipes and Services

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

6、添加 ng-zorro-antd 脚手架

执行命令

ng add ng-zorro-antd

详情如下：

D:\GitHub\record-money-angular>ng add ng-zorro-antd
Skipping installation: Package already installed
? Add icon assets [ Detail: https://ng.ant.design/components/icon/en ] Yes
? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
? Choose your locale code: zh_CN
? Choose template to create project: sidemenu

7、添加 material-design ui 库 + flex-layout 布局

安装依赖（tips：material-design 依赖 hammerjs ，所以也要安装 hammerjs）

npm install --save @angular/material @angular/cdk hammerjs @angular/flex-layout

安装动画依赖

npm install --save @angular/animations

配置动画

/* ... */
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
/*...*/
imports: [
BrowserModule,
BrowserAnimationsModule,
],
})
export  class  AppModule { }

在文件styles.css中添加主题

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

安装离线字体 material-design-icons or material-design-icons-iconfont

npm install --save material-design-icons

Or

npm install material-design-icons-iconfont --save

配置离线字体（两种方式，分别对应）

/* fallback 设置使用离线字体*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Or(高亮行（8）tips: Angular CLI 会优先从 tsconfig.json 的 paths 属性中查找，然后再在 node_modules 中查找。)

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // 配置主题

/* fallback 设置使用离线字体*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

部署到 IIS woff2 字体 404 解决办法，将如下高亮部分的代码加入到 web.config 文件中

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

注意

在国内使用 google 的字体服务器不稳定，所以才使用离线字体：material-design-icons-iconfont

官方介绍:要使用 material 的 icon 字体，需要在 src/index.html 中加上如下代码

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

参考地址：https://www.sitepoint.com/angular-material-design-components/

material 中文版：https://material.angular.cn/

material 英文版：https://material.angular.io/

flex-layout： https://github.com/angular/flex-layout

material-design-icons：https://github.com/google/material-design-icons

material-design-icons-iconfont：https://www.npmjs.com/package/material-design-icons-iconfont

8、部署到 IIS，刷新访问 404 解决方法

首先，安装 iis URL Rewrite 模块，配置urlrewrite。 其次，在 src 目录下创建 web.config 文件，填入以下内容

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

最后，在 angular 项目中配置 web.config 自动打包。在 angular.json 中添加如下（第四行）高亮行代码。

            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ]

9、打包发布项目

使用如下命令打包。tips：–prod 默认开启–aot，angular-cli 会把用不到的包都删掉，而–aot 参数是让 angular-cli 启动预编译

ng build --prod

建议：路由懒加载，以便更快速地访问首页。 正式环境部署时 nginx 或 tomcat 下开启 gzip 压缩

--prod：将 environment.prod.ts 替换 environment.ts，切换环境为生产环境。默认做有限到到代码和 bundle 大小到优化。 --aot：采用 aot 预编译 --buildOptimizer：使用@angular-devkit/build-optimizer 进行编译优化 --deployUrl：assets 资源访问目录(官方说明：URL where files will be deployed.) --baseHref：index.html 访问目录(官方说明：Base url for the application being built.)

ng build --prod --aot --build-optimizer --deployUrl /web/ --baseHref /web/

10、Budget 10 kB was not met by 20 kB with a total of 30 kB

修改 angular.json 文件

找到 budgets 节点，修改 "maximumError": "10kb"

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "5mb",
    "maximumError": "10mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "150kb",
    "maximumError": "200kb"
  }
]