求Angular 19中App-Shell模式的基础可运行示例

前置准备 #

确保你的Angular CLI为19版本：

npm install -g @angular/cli@19

步骤1：创建新Angular项目 #

ng new angular19-app-shell-demo
cd angular19-app-shell-demo

步骤2：添加App Shell #

运行CLI内置命令自动生成App Shell相关文件和配置：

ng generate app-shell

执行完成后，项目会新增src/app/app-shell目录，同时angular.json会自动配置App Shell的构建参数。

步骤3：自定义静态Shell内容 #

修改src/app/app-shell/app-shell.component.html，替换为纯静态的加载内容（不依赖主应用逻辑）：

<div class="app-shell-container">
  <div class="loading-spinner"></div>
  <h1>我的应用</h1>
  <p>正在加载中...</p>
</div>

<style>
.app-shell-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #e0e0e0;
  border-top: 6px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

内嵌样式确保无需等待外部CSS加载即可显示内容。

步骤4：构建并验证效果 #

执行生产环境构建：

ng build --configuration production

构建完成后，打开dist/angular19-app-shell-demo/browser/index.html，可见shell的静态内容已直接嵌入HTML中。

验证方式：

• 用本地服务器启动项目：npx serve dist/angular19-app-shell-demo/browser
• 开启浏览器网络节流（Chrome DevTools → Network → Throttling → 选择Slow 3G）
• 刷新页面，会立刻看到shell加载内容，待主应用JS/CSS加载完成后，Angular会自动替换shell为你的主应用界面。

核心原理 #

App Shell是Angular构建阶段预渲染的静态HTML，打包后直接写入初始index.html。用户打开页面时，浏览器先渲染这些静态内容（无需等待主应用bundle加载），大幅缩短首次绘制时间；主应用资源加载完成初始化后，Angular会接管DOM并替换shell内容。

内容的提问来源于stack exchange，提问作者sagerobert