配置一个基础应用

设置package.json

package.json每一个接触过js项目的人都会看到过这个文件，它是项目的文件清单，项目的名称、版本、描述、作者、安装的依赖的名称和版本、node执行脚本。。。都在其中

version 表明了当前的版本。
name 设置了应用程序/软件包的名称。
description 是应用程序/软件包的简短描述。
main 设置了应用程序的入口点。
private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。
scripts 定义了一组可以运行的 node 脚本。
dependencies 设置了作为依赖安装的 npm 软件包的列表。
devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
browserslist 用于告知要支持哪些浏览器（及其版本）

所以需要先去设置这个文件，用来安装angular及其依赖项，将下面的这几行复制到package.json中

{
    "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
}

NgModule

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。一个NgModule就是一个容器，里面存放着一些内聚的代码块，这些代码块专注与某个应用领域、某个工作流、或者某些密切联系的功能。它包含着组件、服务、指令、管道。。。。，他们的作用域由NgModule决定，它可以导出内部的一些功能给其他模块使用，也可以导入其他模块的一些功能。
NgModule和JavaScript模块并没有直接关联，但是可以一起配合使用。JavaScript模块中每个文件就是一个模块，文件中所有的对象都属于这一个模块，可以通过export关键字来将改对象声明为公共的，在其他的JavaScript模块中再通过import关键字来使用这些对象。

每个angular应用都至少有一个跟模块，我们称之为AppModule，引导这个根模块就可以启动你的应用。下面是一个简单的例子

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

index.html

angular应用很适合用简单的静态html服务器来提供服务，不需要服务端引擎去动态合成页面，客户端会将这些做好。
如果你的应用使用的是angular路由器，那么必须要配置server，当路由器找不到文件时直接返回应用的宿主页index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

index.html里面有一个标签也很有意思 ,它用于配置解析静态文件的基地址，
比如，对于，浏览器就会把 some/place/foo.jpg 这样的 URL 解析成到 my/app/some/place/foo.jpg 的请求。
在导航期间，Angular 路由器使用 base href 作为到组件模板文件和模块文件的基地址。

tsconfig.json

使用Typescript第一步肯定是要导包嘛，在packag.json的devDependencies中添加这几行

  "@types/jasmine": "~3.8.0",
  "@types/node": "^12.11.1",
  "typescript": "~4.3.5"

浏览器不能直接执行typescript，需要先用tsc编译器将其编译为javascript，编译器需要进行一些配置。
tsconfig.json，

tsconfig.json目录中文件的存在表明该目录是 TypeScript 项目的根目录。该tsconfig.json文件指定了编译项目所需的根文件和编译器选项

将下面这段复制到tsconfig中，想要了解具体每个属性直接看官网

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": [
    "node_modules",
    "src/main.aot.ts"
  ]
}

TypeScript 类型定义(typings)

很多js库，会通过一些新的特性和语法来扩展js环境，比如jquery、jasmine。。。，tsc并不能直接识别并编译他们，编译器会抛出错误，

可以使用TypeScript 类型定义文件 —— .d.ts 文件来告诉编译器你要加载的库的类型定义。
TypeScript 敏感的编辑器借助这些定义文件来显示这些库中各个特性的类型定义。
很多库在自己的 npm 包中都包含了它们的类型定义文件，如果包里没有就去github找找。

。d.ts里面有一个特殊的文件lib.d.ts

这个文件包含 JavaScript 运行时以及 DOM 中存在各种常见的环境声明。
它自动包含在 TypeScript 项目的编译上下文中；
它能让你快速开始书写经过类型检查的 JavaScript 代码。
看如下例子：
const foo = 123;
const bar = foo.toString();
这段代码的类型检查正常，因为 lib.d.ts 为所有 JavaScript 对象定义了 toString 方法。
如果你在 noLib 选项下，使用相同的代码，这将会出现类型检查错误：
const foo = 123;
const bar = foo.toString(); // Error: 属性 toString 不存在类型 number 上
现在你已经理解了 lib.d.ts 的重要性，至于它的内容是怎么样的，我们接下来将会解释。

angular自定义配置webpack

什么是webpack？

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。

在开始前需要先理解一些核心概念
入口entry：入口起点指示webpack应该将哪个模块来作为构建依赖关系的开始，进入入口起点，webpack会找出入口起点所依赖的模块和库。
输出output：output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
loader：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖关系图中。
插件（plugin）loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
所有的这些都是在 webpack.config.js中设置.
如果是angular6之前的项目可以执行,那时候angular脚手架里还有这样一个指令：

ng eject

这个指令执行过后会在项目目录下自动生成一个webpack.config.js文件，将默认的webpack配置暴漏出来，之后在执行下面这几步
第一步：src下创建两个文件
vendor.ts、用于导入第三方依赖
polyfills.ts 为生产、开发配置浏览器环境的地方
第二步，写config文件，可以分dev和prod两种模式写两份，之后在webpack.config.js中引入

module.exports = function(env){
  console.log(env);
  return require(`./webpack.${env}.js`);
}

第三步，改package.json

 "scripts": {
    "start": "webpack-dev-server --env=dev --hot --inline --port 3000 --open\"",
    "build:dev": "webpack --env=dev --progress --profile --colors"
  }

之后执行npm run start 就能将整个项目跑起来了

6之后的版本就直接把这个命令给删掉了，就需要借助angular-builders

npm install @angular-builders/custom-webpack --save-dev
npm install @angular-devkit/build-angular --save-dev

安装这两个的时候会自动把webpack和wbpack-dev安装好，不需要单独装，如果装了需要卸载掉. 之后修改angular.json,将自定义的配置文件引入，把自定义的文件加入到customWebpackConfig的path里面去

angular.json为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。

 "architect": {
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack.config.js"
                }
            }
        },
        "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack.config.js"
                }
            }
        }
    }