在前面的章节中，我们探讨了如何使用 Angular 的 HttpClient 处理请求与响应，而在这一章中，我们将深入了解 Angular 应用的目录结构和最佳实践。这将为你的项目提供清晰的组织方式，使其更易于维护和扩展。

Angular 项目结构概述

Angular 项目通常是通过 Angular CLI 创建的，默认的项目结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── angular.json
├── package.json
└── tsconfig.json

目录结构解析

• e2e/: 存放端到端测试代码的目录。
• node_modules/: 存放项目依赖的目录。
• src/: 源代码目录，所有的应用代码都在这里。
  • app/: 应用的主要代码，包括组件、服务、模型等。
  • assets/: 静态资源，比如图片、样式等。
  • environments/: 环境配置文件，通常有 environment.ts 和 environment.prod.ts。
  • index.html: 应用的主 HTML 文件。
  • main.ts: 应用的入口文件。
  • polyfills.ts: 用于兼容不同浏览器的 polyfill。
  • styles.css: 全局样式文件。

最佳实践

1. 组件与服务的分离

在 Angular 中，组件和服务应该有明确的责任分离。通常我们会在 app/components 目录中存放组件，在 app/services 目录中存放服务。这样可以使代码更易于管理。

1
2
3
4
5
6
7
8
9
10
11

// 示例：用户组件
import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
})
export class UserComponent {
  constructor(private userService: UserService) {}
}

2. 使用模块化结构

为每个功能模块创建自己的子模块。假设我们有一个用户管理模块，可以在 app/user 子目录下创建如下结构：

1
2
3
4
5
6

app/
├── user/
│   ├── user.module.ts
│   ├── user.component.ts
│   ├── user.service.ts
│   └── user.model.ts

这样划分可以让每个模块的相关代码都集中在一起，提高可读性和可维护性。

3. 组织环境配置

在 src/environments/ 目录下，我们可以创建不同的环境配置文件，例如 environment.ts 和 environment.prod.ts，分别对应开发和生产环境。这使得在不同环境下运行时可以根据需要动态改变配置，比如 API 的基础 URL：

1
2
3
4
5
6
7
8
9
10
11

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

结论

良好的项目结构和约定不仅可以提升代码的可读性，同时也增强了团队协作的效率。在 Angular 开发中，遵循最佳实践，有助于我们编写可维护、易扩展的应用。在下一章中，我们将继续深入探讨组件设计原则，帮助你更好地构建 Angular 组件。这将是确保应用质量和功能完整性的关键一步。

在 Angular 中，组件是构建应用程序的基础单元。良好的组件设计不仅能够提高代码的可维护性和可重用性，还能增强团队协作的效率。本章将深入探讨一些组件设计的最佳实践与原则，帮助您在开发 Angular 应用时构建高质量的组件。

1. 组件的单一职责原则

组件应当聚焦于单一的功能。每个组件应该只负责展示一部分 UI 或执行特定的逻辑。这有助于提高组件的可重用性和可测试性。

示例

考虑一个简单的应用，其中有一个列表组件 UserListComponent 和一个单个用户展示组件 UserItemComponent。以下是它们的简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-item',
  template: `<div>{{ user.name }}</div>`,
})
export class UserItemComponent {
  @Input() user!: { name: string };
}

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      <app-user-item [user]="user"></app-user-item>
    </div>
  `,
})
export class UserListComponent {
  users = [
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Charlie' },
  ];
}

在这个例子中，UserListComponent 负责管理用户的列表，而 UserItemComponent 只负责渲染单个用户的信息，这便是对单一职责原则的很好实践。

2. 组件的可重用性

组件的设计应当考虑可重用性。您可以通过以下方式提高组件的可重用性：

• 使用输入和输出属性：让组件通过 @Input() 接收数据，通过 @Output() 发送事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="handleClick()">{{ label }}</button>`,
})
export class ButtonComponent {
  @Input() label!: string;
  @Output() clicked = new EventEmitter<void>();

  handleClick() {
    this.clicked.emit();
  }
}

在这个例子中，ButtonComponent 可以在不同的场景中重用，通过输入属性改变按钮的标签和通过输出事件响应点击操作。

3. 组件的状态管理

组件应尽量避免内部状态的复杂性，推荐将状态提升到父组件中管理。这样可以减少组件之间的耦合和复杂性。

示例

假设有一个购物车组件，管理商品的数量。我们可以把数量状态提升到父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Component({
  selector: 'app-cart',
  template: `
    <div *ngFor="let item of items">
      <app-item [item]="item" (quantityChange)="updateQuantity(item, $event)"></app-item>
    </div>
  `,
})
export class CartComponent {
  items = [{ name: 'Apple', quantity: 1 }, { name: 'Banana', quantity: 1 }];

  updateQuantity(item: any, quantity: number) {
    item.quantity = quantity;
  }
}

在这里，CartComponent 负责管理商品的数量，而 ItemComponent 只负责显示和修改数量，这样的做法增强了组件的可维护性。

4. 组件的样式和布局

在组件中管理样式时，建议使用 Angular 的视图封装特性。这样，您可以避免样式冲突，并提高组件的独立性。

示例

使用 Angular 的 ViewEncapsulation，可以将样式局部化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-styled-component',
  template: '<div class="box">Hello Style!</div>',
  styles: [`
    .box {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid blue;
    }
  `],
  encapsulation: ViewEncapsulation.Emulated, // 默认值，封装样式
})
export class StyledComponent {}

通过这种方式，StyledComponent 的样式不会影响到其他组件。

5. 组件的文档和注释

为每个组件撰写文档和注释是一个良好的实践。清晰的文档可以帮助其他开发者理解组件的使用和功能。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
 * AppButtonComponent 是一个可重用的按钮组件
 * @Input label - 按钮显示的文本
 * @Output clicked - 按钮点击时发出事件
 */
@Component({
  selector: 'app-button',
  template: `<button (click)="clicked.emit()">{{ label }}</button>`,
})
export class AppButtonComponent {
  @Input() label!: string;
  @Output() clicked = new EventEmitter<void>();
}

在这个例子中，组件的使用方法和属性都有详细的注释，有助于提高代码的可读性。

结论

良好的组件设计是构建健壮 Angular 应用的基石。在设计组件时，应该遵循单一职责原则，提高组件的可重用性，合理管理状态，封装样式，以及提供良好的文档和注释。通过遵循这些原则，您将能够创建出更加可维护、可扩展的 Angular 应用。

在下一篇中，我们将讨论如何实现代码复用和模块化，使得我们的 Angular 项目结构更加合理和高效。

在这一章中，我们将探讨Angular项目中的代码复用和模块化。这不仅有助于提升代码的可维护性和可读性，还有助于提升团队协作效率。上一章我们讨论了组件设计原则，模块化则是组件设计的延续，它确保了我们的应用结构清晰且可扩展。

1. 什么是模块

在Angular中，模块是一个集合，它将相关的组件、指令、管道和服务组织在一起。模块化有助于将应用分解为多个功能区块，使得这些区块可以在不同的上下文中重用。一个Angular应用至少有一个根模块，通常是AppModule。

示例：创建一个模块

假设我们正在开发一个电子商务应用，其中有一个产品管理的功能区，我们可以为这部分功能创建一个ProductModule。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

@NgModule({
  declarations: [
    ProductListComponent,
    ProductDetailComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ProductListComponent,
    ProductDetailComponent
  ]
})
export class ProductModule { }

在这个例子中，我们创建了一个名为ProductModule的模块，其中包含了两个组件：ProductListComponent和ProductDetailComponent。通过将它们放在同一个模块中，我们可以在其他模块中轻松引用和复用这些组件。

2. 代码复用的最佳实践

2.1 创建共享模块

为了实现代码复用，可以创建一个共享模块来存放通用的组件、指令和管道。这种方式能够避免在每个模块中反复引入相同的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example/example.component';

@NgModule({
  declarations: [
    ExampleComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ExampleComponent
  ]
})
export class SharedModule { }

将通用组件放在SharedModule中，可以在其他模块中通过简单地引入SharedModule来使用它。

1
2
3
4
5
6
7
8
9
10

// another.module.ts
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule
  ]
})
export class AnotherModule { }

2.2 服务的复用

在Angular中，服务是实现业务逻辑的地方。为了扩展和复用服务，可以通过将服务提供到模块中来实现。这样，您可以在多个组件中共享相同的服务功能。

1
2
3
4
5
6
7
8
9
10
11

// product.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  getProducts() {
    // 这里可以调用API获取产品数据
  }
}

在上述代码中，ProductService通过providedIn: 'root'声明为根注入器的服务，这意味着它在整个应用中都是共享的。

3. 组件的复用与参数化

组件的复用不仅可以通过模块实现，还可以通过输入属性和输出事件来实现。例如，我们可以创建一个通用的CardComponent，用于展示不同类型的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>
  `,
  styles: ['.card { border: 1px solid #ccc; padding: 10px; margin: 10px; }']
})
export class CardComponent {
  @Input() title: string;
  @Input() content: string;
}

此组件可以在不同地方被复用：

1
2

<app-card title="产品名称" content="产品描述"></app-card>
<app-card title="用户名称" content="用户描述"></app-card>

4. 模块的懒加载

Angular支持懒加载，这意味着只有在需要时才加载特定的模块，极大提升了应用的性能。懒加载通常结合路由使用，例如，创建一个对用户管理进行懒加载的模块。

示例：懒加载模块

我们可以在路由配置中设置一个懒加载模块，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这个例子中，ProductModule只有在用户访问/products路径时才会被加载。

结论

在Angular中，合理的代码复用与模块化是构建高效、可维护应用的核心。通过利用模块、共享模块、以及懒加载等手段，我们可以有效地管理和复用代码。每个应用的结构可能会有所不同，但在设计中注重模块化和复用，将会大幅提升代码质量与开发效率。

在下一章中，我们将讨论如何发布与部署Angular应用，包括构建和打包的最佳实践，让我们一起期待高效的发布流程！

在上一篇中，我们探讨了Angular 项目的结构及其最佳实践，尤其是代码复用和模块化的重要性。在本章中，我们将深入了解如何为 Angular 项目进行构建和打包，以便发布到服务器。

什么是构建和打包？

构建和打包是将开发环境中的应用程序转换成可部署版本的过程。这一过程包括代码的压缩、合并和优化，以提高应用的加载速度和运行性能。

构建过程

Angular 使用 Angular CLI 工具来简化构建和打包的流程。利用 Angular CLI，你可以轻松生成生产环境的构建版本。首先，确保已经在你的 Angular 项目中安装了 @angular/cli。

在项目目录中，你可以通过以下命令生成构建：

1

ng build --prod

其中 --prod 标志表示构建生产环境的代码。构建结果会输出到 dist/ 文件夹中。

1. 输出内容

dist/ 文件夹中的内容包括：

• index.html: 应用的入口文件。
• main.js: 应用的主要 JavaScript 代码。
• polyfills.js: 用于支持旧浏览器的 JavaScript 代码。
• styles.css: 全局样式文件。
• 其他依赖的文件和资源。

每个生成的文件都是经过压缩和优化的，这将使得应用在生产环境中有更好的性能。

配置 Angular 构建

你可以通过 angular.json 文件来配置构建过程中的各种参数。例如，你可以指定不同的输出路径、设置不同的环境变量，或修改文件的命名方式等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name",
            "optimization": true,
            "sourceMap": false,
            "extractCss": true
          }
        }
      }
    }
  }
}

使用环境变量

在构建时，你可能需要为应用程序设置不同的环境变量。Angular CLI 已内置支持环境变量，可以通过创建 src/environments/ 目录下的不同文件（如 environment.ts, environment.prod.ts）进行配置。

在代码中，你可以使用如下方式访问相应的环境变量：

1
2
3

import { environment } from '../environments/environment';

console.log(environment.apiUrl);

构建后的测试

构建完成后，我们可以运行一些基本的测试，确保应用在生产环境中能够正常运行。可以用静态服务器来快速检验构建效果。例如，使用 http-server 提供一个简单的 HTTP 服务器：

1
2
3

npm install -g http-server
cd dist/your-app-name
http-server

在浏览器中访问 http://localhost:8080，检查应用是否正常工作。

自动构建与 CI/CD

为了自动化构建和部署流程，我们可以结合 CI/CD 工具，如 GitHub Actions 或 GitLab CI。当你推送代码到主分支时，可以自动触发构建过程并部署到相应的服务器上。

以下是一个简单的 GitHub Actions 工作流示例，它将在每次推送时自动构建项目并保存构建产物：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build project
        run: npm run build --prod
      
      - name: Upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist
          path: dist/

在这个工作流中，我们进行了代码检出、安装依赖、构建项目，并上传构建产物。这为后续的部署工作奠定了基础。

总结

在本章中，我们仔细研究了 Angular 应用的构建和打包过程，探讨了各种配置选项，并尝试通过实际案例来展示如何在生产环境中使用构建后的应用。接下来，我们将深入学习如何将构建后的应用部署到服务器，确保应用可供最终用户访问。这一过程也将是提升我们项目最终用户体验的重要环节。

在本章中，我们将详细探讨如何将 Angular 应用程序部署到服务器。在上一篇章节中，我们讨论了如何对 Angular 应用进行构建和打包，确保我们的代码在生产环境中能够高效运行。本章将基于这些构建文件，介绍如何将它们发布到服务器上，使得最终用户能够访问到我们的应用。

1. 准备构建文件

首先，确保我们的应用已成功构建。这一步通常是在应用的根目录下通过以下命令实现的：

1

ng build --prod

这个命令将创建一个 dist 文件夹，其中包含构建好的代码。构建过程将为我们的应用生成压缩过的、优化过的文件，确保其在生产环境中的加载速度更快。

2. 部署到静态文件服务器

对于大多数 Angular 应用，特别是那些由 ng build --prod 生成的单页面应用（SPA），我们可以选择一个静态文件服务器来进行部署。这里我们将以 nginx 为例。

2.1 安装 Nginx

在很多 Linux 发行版中，可以通过如下命令安装 nginx：

1
2

sudo apt update
sudo apt install nginx

在安装完成后，我们可以通过如下命令启动 Nginx 服务：

1

sudo systemctl start nginx

2.2 配置 Nginx

然后，我们需要配置 Nginx 使其能够服务于我们 Angular 应用的文件。找到并编辑 nginx 配置文件（通常位于 /etc/nginx/sites-available/default），修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/your-angular-app/dist;  # 将此处的路径替换为实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 确保 Angular 路由工作正常
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public, no-transform";
    }
}

在这里，root 指令指向构建输出的路径，try_files 语句确保 Angular 的路由正常工作。

2.3 复制文件

接下来，您需要将构建文件复制到 Nginx 所需的目录：

1

sudo cp -r dist/your-angular-app/* /var/www/your-angular-app/dist/

2.4 重启 Nginx

完成文件复制后，您需要重启 Nginx 以使得更改生效：

1

sudo systemctl restart nginx

现在，您应该能够通过浏览器访问 http://your_domain.com 来查看您的 Angular 应用。

3. 使用其他服务器

除了 nginx，您也可以选择其他类型的服务器。比如，您可以使用 Apache、Node.js 服务器等。以下是使用 http-server 进行快速测试的一种方法：

3.1 安装 http-server

首先，确保已安装 Node.js，然后通过 npm 安装 http-server：

1

npm install -g http-server

3.2 运行 http-server

导航到构建的文件夹并运行：

1
2

cd dist/your-angular-app
http-server -p 8080

您可以在浏览器中访问 http://localhost:8080 查看您的应用。

4. 处理常见部署问题

在部署过程中，您可能会遇到一些常见问题，例如：

• 路由问题：如果您在浏览器中直接访问某个子路由而不是通过主页面访问，可能会得到 404 错误。这是因为 Nginx 默认不会处理 Angular 路由。要解决此问题，请确保使用 try_files 指令（如上所述）。

• 缓存问题：若您对应用进行了更新，浏览器可能使用缓存中的旧文件。可以通过版本控制文件名或清除浏览器缓存来解决此问题。

结论

通过以上步骤，您应该可以成功地将您的 Angular 应用程序部署到服务器上，使得其他用户可以通过互联网访问它。根据您的需求，您可以选择不同的服务器和替代方案。下一章，我们将介绍如何使用 Angular Universal 进行服务器端渲染，为用户提供更快的首屏加载体验。

在上一章中，我们讨论了如何将 Angular 应用程序部署到服务器。在本章中，我们将深入了解 Angular Universal，这是 Angular 的官方解决方案，用于实现服务器端渲染（SSR）。

什么是 Angular Universal？

Angular Universal 是一个用于在服务器上渲染 Angular 应用程序的技术。通过使用 SSR，你可以显著提高应用程序的性能，改善 SEO（搜索引擎优化），并增强用户体验。Angular Universal 允许你的应用在服务器端生成 HTML，这意味着用户在访问时会立即看到内容，而不必等到 JavaScript 加载和执行。

服务器端渲染的优点

使用 Angular Universal 进行服务器端渲染有以下几个主要优点：

1. 更好的加载时间：由于 HTML 已在服务器上生成，页面的首屏加载时间会大大缩短。
2. SEO 友好：许多搜索引擎无法有效索引 SPA（单页面应用程序），但使用 SSR 后，可以清楚地索引每个页面内容。
3. 社交媒体分享：当分享你的网页时，社交媒体平台能够抓取并显示适当的预览内容。

如何实现 Angular Universal

让我们通过步骤讲解如何将服务器端渲染集成到你的 Angular 应用程序中。

1. 安装 Angular Universal

在你的 Angular 项目中，首先，你需要安装 @nguniversal/express-engine 和 @nguniversal/module-map-ngfactory-loader 包。在终端中运行以下命令：

1

ng add @nguniversal/express-engine

这一命令会自动设置 Angular Universal，并生成需要的文件。

2. 配置应用程序

执行上一步后，你的项目目录中会创建几个新文件，比如 server.ts 和 app.server.module.ts。以下是 server.ts 的一个基本示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './dist/YOUR_PROJECT_NAME/server/main';

enableProdMode();

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/YOUR_PROJECT_NAME/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

3. 构建应用程序

接下来，您需要构建应用以生成浏览器和服务器端的应用程序。可以使用以下命令：

1

npm run build:ssr

在 package.json 中，确保有以下三个脚本：

1
2
3
4
5

"scripts": {
  "build": "ng build --prod",
  "serve": "node dist/YOUR_PROJECT_NAME/server/main.js",
  "build:ssr": "ng build --prod && ng run YOUR_PROJECT_NAME:server:production"
}

4. 运行应用程序

在构建完成后，您可以运行服务器端渲染的应用程序：

1

npm run serve

访问 http://localhost:4000 ，您将会看到您的 Angular 应用在服务器端的渲染结果。

5. 部署到服务器

和您之前部署 Angular 应用一样，Angular Universal 也可以部署到诸如 Heroku、AWS 或其他支持 Node.js 的云服务提供商。在配置好你的环境后，只需确保运行 npm run build:ssr 和 npm run serve。

示例代码

下面是一个简单的示例，用于说明如何使用 Angular Universal 渲染组件。假设你有一个组件 hello-world，其代码如下：

1
2
3
4
5
6
7

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
})
export class HelloWorldComponent {}

当访问 /hello 路径时，你可以在 app.routing.module.ts 文件中添加路由：

1
2
3

const routes: Routes = [
  { path: 'hello', component: HelloWorldComponent },
];

然后在服务器上加载 HelloWorldComponent 并通过 Angular Universal 进行渲染。

总结

在本章中，我们探讨了 Angular Universal 的概念和配置，并通过实际代码示例展示了如何实现服务器端渲染。通过使用 Angular Universal，你能够显著提高应用的性能，增强 SEO 效果，并为用户提供更好的体验。

在下一章中，我们将继续讨论关于 Angular 应用的性能优化策略，确保您能够在各个方面都精益求精，提升应用的响应速度和用户体验。