Angular Universal与Firebase完美组合

目录

1. 介绍 🌟
2. 什么是服务器端渲染？🔍
3. 与Angular Universal集成的步骤 🚀
4. 在Angular中设置meta标签 ⚙️
5. 利用Angular的服务生成meta标签 🏷️
6. 在路由器中设置meta标签 🛣️
7. 读取Firestore中的数据 📄
8. 服务器端渲染中的状态传递 🔄
9. 使用RxJS操作符进行状态传递 🚦
10. Angular Universal的配置 🎛️
11. Angular服务器端配置，并构建Express.js服务器️ 🌐

介绍 🌟

在本文中，我们将讨论如何将Firebase与Angular Universal结合使用，以构建一个搜索引擎优化的JavaScript应用程序。通过对Angular Fire进行最新的更改，我们现在可以在Universal中执行服务器端渲染。这意味着搜索引擎可以理解我们应用程序的内容，并由社交媒体的链接BOT使用。此外，如果正确使用，还可以带来更好的页面加载性能。

如果您对此概念感到陌生，请放心，我们将逐步介绍所有步骤。让我们从设置meta标签开始，然后逐步进行服务器端渲染的配置。

什么是服务器端渲染？🔍

通常，我们将JavaScript直接交给浏览器来执行和呈现。但是，当应用程序具有需要在搜索引擎中进行索引或在社交媒体上共享的路由时，这会成为一个问题。大多数访问您站点的机器人仅能理解HTML，而不会解析其中的JavaScript。为了解决这个问题，我们可以使我们的Angular应用程序更像传统的Web应用程序，即在首次访问时从服务器返回HTML，并将其传递到浏览器中。

在本演示中，我们将展示如何从0开始构建一个部署的Angular Universal应用程序。我们将使用我在Firestore数据库中存储的一组动物作为示例数据。请注意，我们需要处理的代码非常多，但大部分都是与配置相关的内容，您可以直接在项目中复制粘贴使用。此外，我在主要文章中逐步记录了所有步骤，以便您能够跟上。

...

安装Angular Fire和Firebase

首先，确保您已经创建了一个新的Angular项目，并且已经设置了路由模块。接下来，您需要安装最新版本的Angular Fire 2和Firebase。打开命令行工具，并导航到您的项目目录。然后运行以下命令来安装所需的软件包：

npm install firebase @angular/fire --save

安装完成后，您将看到firebase和@angular/fire添加到您的package.json文件中的依赖项中。接下来，我们需要为firebase导入适当的模块。

在app.module.ts文件中，将以下代码添加到您的导入部分：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

...

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,
    ...
  ],
  ...
})
export class AppModule { }

请确保将environment.firebaseConfig替换为您的Firebase配置。您可以在Firebase控制台中找到此配置。

在Firestore中创建动物集合

在继续之前，请确保您已设置并连接了Firestore数据库。首先，在Firestore中创建一个集合，命名为animals。然后，为每个动物创建一个文档，并使用以下字段结构填充数据：

• name：动物的名称（字符串）
• bio：动物的简介（字符串）
• imageURL：动物的图像URL（字符串）

这些字段将用于在我们的应用程序中显示动物的详细信息。您可以根据需要添加更多字段。

生成meta标签的服务

在我们的Angular应用程序中，我们将使用一个服务来生成与动物详细信息相关的meta标签。创建一个名为SeoService的新服务，并将以下代码添加到该服务的文件中：

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class SeoService {
  private defaultTags = {
    title: 'Default Title',
    description: 'Default Description',
    image: 'Default Image URL'
  };

  constructor(
    private titleService: Title,
    private metaService: Meta
  ) { }

  public setMetaTags(tags: any): void {
    const title = tags.title ?? this.defaultTags.title;
    const description = tags.description ?? this.defaultTags.description;
    const image = tags.image ?? this.defaultTags.image;

    this.titleService.setTitle(title);
    this.metaService.updateTag({ name: 'description', content: description });
    this.metaService.updateTag({ property: 'og:title', content: title });
    this.metaService.updateTag({ property: 'og:description', content: description });
    this.metaService.updateTag({ property: 'og:image', content: image });
    this.metaService.updateTag({ property: 'twitter:title', content: title });
    this.metaService.updateTag({ property: 'twitter:description', content: description });
    this.metaService.updateTag({ property: 'twitter:image', content: image });
  }
}

该服务具有一个setMetaTags方法，该方法接受一个对象参数tags。我们使用此对象来覆盖默认的meta标签值。根据需要，您可以在默认标签中添加其他标签。

在app.module.ts文件中，将SeoService服务添加到提供程序数组中：

import { SeoService } from './seo.service';

...

@NgModule({
  providers: [SeoService],
  ...
})
export class AppModule { }

这将使我们能够在需要的任何组件中注入SeoService。

现在，我们已经配置了基本的meta标签生成服务。接下来，我们将在我们的动物详情组件中使用它来设置相关的meta标签。

在路由器中设置meta标签 🛣️

在我们的应用程序中，我们将使用路由参数来显示动物的详细信息。我们需要在动物详细信息组件中设置各种meta标签。为此，我们首先需要在我们的动物详情组件中注入SeoService。

找到您的动物详情组件文件，并将以下代码添加到该文件的顶部：

import { SeoService } from '../seo.service';
import { ActivatedRoute } from '@angular/router';

然后，在该文件的构造函数中注入SeoService和ActivatedRoute，如下所示：

constructor(
  private seoService: SeoService,
  private route: ActivatedRoute
) { }

现在，我们可以在该组件中使用这些服务。

在该组件的代码中，找到ngOnInit方法，并添加以下代码：

ngOnInit(): void {
  const animalName = this.route.snapshot.paramMap.get('name');

  // Replace 'animals' with the actual Firestore collection name if different
  this.firestore.collection('animals').doc(animalName).valueChanges().pipe(
    tap((animal: any) => {
      const tags = {
        title: animal.name,
        description: animal.bio,
        image: animal.imageURL
      };

      this.seoService.setMetaTags(tags);
    })
  ).subscribe();
}

此代码片段从路由参数中获取动物的名称，并使用此名称作为文档ID从Firestore中获取动物的详细信息。通过使用tap操作符，我们可以在获取动物数据后调用setMetaTags方法。

请注意，这里假设您的Firestore集合名称为animals。如果名称不同，请根据实际情况进行更改。

现在，当用户导航到动物详情页时，我们的SeoService将根据动物的详细信息自动设置相关的meta标签。

完成上述步骤后，您的应用程序应该能够在用户访问特定动物详细信息页面时正确设置meta标签。

...

请注意，这只是一个基本的例子，用于演示如何在Angular Universal应用程序中使用服务器端渲染和Firestore。根据您的实际需求，您可以根据需要进行更多的配置和自定义。

总结

在本文中，我们介绍了如何将Firebase与Angular Universal结合使用，以构建一个搜索引擎优化的JavaScript应用程序。通过使用服务器端渲染，我们可以使我们的应用程序更易于被搜索引擎和社交媒体的链接BOT理解，并获得更好的页面加载性能。

我们从设置meta标签开始，讨论了如何利用Angular的服务生成和设置这些标签。然后，我们演示了如何在路由器中动态设置meta标签，使用不同动物的详细信息作为示例。

随后，我们探讨了如何读取Firestore中的数据，并在服务器端和浏览器端之间传递数据状态。在这过程中，我们使用了rxjs操作符和Angular Universal的提供的工具。

最后，我们说明了如何配置Angular Universal，并使用Express.js作为服务器。我们还提供了一些脚本命令，用于构建和启动我们的Express.js服务器和Angular应用程序。

以上是本文的主要要点，我们希望您能从中获得帮助。如果您有任何进一步的问题或需要更多关于服务器端渲染的高级场景的信息，请考虑成为angularfirebase.com的高级会员。我们提供各种独家内容，旨在帮助您在Angular Firebase堆栈上构建应用程序。

感谢您的阅读！如果您喜欢这篇文章，请点赞和订阅我们的频道。我们将尽快回来，再见！