Angular学习笔记

相关信息

以下内容全部基于Angular 17

appShell

在Angular 17中，appShell的实现方式进行了改为了服务端预渲染的方式生成，但文档尚未更新。 使用ng generate app-shell会得到类似下面的输出：

CREATE src/main.server.ts (264 bytes)
CREATE src/app/app.config.server.ts (652 bytes)
CREATE src/app/app-shell/app-shell.component.html (24 bytes)
CREATE src/app/app-shell/app-shell.component.spec.ts (611 bytes)
CREATE src/app/app-shell/app-shell.component.ts (245 bytes)
CREATE src/app/app-shell/app-shell.component.css (0 bytes)
UPDATE angular.json (2697 bytes)
UPDATE tsconfig.app.json (307 bytes)
UPDATE package.json (1109 bytes)
UPDATE src/app/app.config.ts (347 bytes)

该命令做了如下操作：

• 修改angular.json，在/projects/MoreFactory/architect/build/options处增加了"server": "src/main.server.ts"
• 修改tsconfig.app.json，在/files数组增加了一项src/main.server.ts
• 创建src/main.server.ts和src/app/app.config.server.ts，这是用于服务端运行的入口和配置文件
• 创建app-shell组件
• 安装@angular/platform-server依赖

该命令会判断angular.json是否存在"server": "src/main.server.ts"，如果存在则尝试修改src/app/app.config.server.ts而非创建。

在目前版本中(17.0.6)，如果设置了通配符路由会导致app-shell渲染的是通配符路由的结果，这是因为app.config.server.ts中默认生成的代码中 有一段合并主配置的代码mergeApplicationConfig(appConfig, serverConfig)，这里将应用主配置作为优选项进行合并，导致通配符路由的优先级高于shell路由。 因此需要改成mergeApplicationConfig(serverConfig，appConfig)才能让app-shell正常生效。(如果应用主配置定义了名为shell的路由也会导致同样的问题)