应用外壳是一种在构建期间借助路由渲染部分应用的方法。它可以通过快速启动一个静态渲染页面（所有页面的公共骨架）来改善用户体验。与此同时，浏览器会下载完整的客户端版本，并在代码加载后自动切换到完整版。
这能让用户快速看到应用中第一个有意义的画面，因为浏览器可以渲染出 HTML 和 CSS，而无需初始化任何 JavaScript。
欲知详情，参阅应用外壳模型。
可以用下列 CLI 命令来执行本操作：
ng new my-app --routing
对于既有应用，你必须手动添加 RouterModule 并在应用中定义 <router-outlet>。
使用 CLI 自动创建一个应用外壳。
ng generate app-shell
执行完这个命令，你会发现 angular.json 配置文件中已经增加了两个新目标，并做了一些其它更改。
"server": {
"builder": "@angular-devkit/build-angular:server",
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/my-app/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"development": {
"outputHashing": "none",
},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"defaultConfiguration": "production",
"options": {
"route": "shell"
},
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development",
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
}
} 使用 CLI 构建目标 app-shell。
ng run my-app:app-shell:development
或使用产品环境配置。
ng run my-app:app-shell:production
要验证构建输出，请打开 dist/my-app/browser/index.html。寻找默认的文本 app-shell works! 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。