Angular 4/5应用使用AMP的优势及AoT构建集成方法咨询

我来分享一下关于Angular 4/5集成AMP的经验和见解，刚好之前做过类似的项目：

一、Angular 4/5应用使用AMP的核心优势 #

AMP（Accelerated Mobile Pages）对Angular 4/5这类SPA应用来说，主要优势集中在移动端体验和SEO场景：

• 极致的移动端加载速度：AMP严格限制自定义JS（仅允许AMP官方脚本）、强制使用轻量化组件（比如amp-img自动懒加载），能解决Angular SPA首屏加载慢的痛点——尤其是内容型页面（博客、新闻资讯），用户几乎能瞬间看到内容。
• SEO增益明显：Google等搜索引擎会优先收录AMP页面，在移动端搜索结果中会显示特殊标识（比如AMP闪电标），大幅提升曝光量。而Angular 4/5的SPA原本存在SEO劣势（爬虫难抓取动态内容），AMP可以完美弥补静态内容页面的SEO问题。
• 降低移动端适配成本：AMP提供了现成的响应式组件（比如amp-carousel、amp-form），不用自己手写复杂的移动端适配逻辑，快速就能构建符合规范的移动端页面。
• 缓存加持：AMP支持全球缓存网络，用户重复访问时直接从缓存加载，既提升速度又减轻服务器压力。

二、AMP与Angular 4/5集成的具体步骤（兼容AoT构建） #

需要明确的是：Angular的动态SPA逻辑和AMP的静态限制存在冲突，所以最佳方案是为需要AMP的页面单独构建AMP版本，而非将整个Angular应用改成AMP。以下是具体步骤：

1. 创建AMP专用页面组件与路由 #

• 在Angular项目中新建独立的AMP组件，比如AmpBlogPostComponent，专门用于渲染AMP版本的内容。
• 在路由配置中添加AMP专属路由，比如/blog/:slug/amp，让用户和搜索引擎能直接访问AMP页面。

2. 配置AMP基础页面结构 #

AMP页面必须遵循严格的HTML规范，在组件模板中按以下结构编写：

<!doctype html>
<html amp>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- 指向原Angular页面的规范链接，帮助搜索引擎关联内容 -->
  <link rel="canonical" href="{{ postCanonicalUrl }}">
  <!-- 引入AMP核心脚本 -->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- AMP自定义样式，不能超过50KB -->
  <style amp-custom>
    /* 这里写AMP页面的样式 */
    .post-title { font-size: 24px; margin: 16px 0; }
  </style>
</head>
<body>
  <!-- 用AMP组件渲染内容，比如amp-img替代img -->
  <h1 class="post-title">{{ postTitle }}</h1>
  <amp-img src="{{ postImageUrl }}" width="600" height="400" layout="responsive"></amp-img>
  <div class="post-content">{{ postContent }}</div>
</body>
</html>

注意：AMP页面中尽量避免使用Angular的双向绑定、自定义指令等会生成动态JS的功能，优先用静态预填充的数据。

3. 让AoT构建识别AMP自定义标签 #

Angular的AoT构建会严格校验模板中的标签，默认会把AMP的自定义标签（比如amp-img）当作未知标签报错，解决方法是在根模块中声明CUSTOM_ELEMENTS_SCHEMA：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AmpBlogPostComponent } from './amp-blog-post/amp-blog-post.component';

@NgModule({
  declarations: [
    AppComponent,
    AmpBlogPostComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  // 添加这个schema，让Angular允许自定义元素
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

4. 数据预加载（配合SSR更优） #

如果你的项目使用了Angular Universal（服务端渲染），可以在服务器端预加载AMP页面的内容，确保页面渲染完成后是纯静态的，符合AMP的要求。比如在AMP组件的ngOnInit中提前获取数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlogService } from '../blog.service';

@Component({
  selector: 'app-amp-blog-post',
  templateUrl: './amp-blog-post.component.html',
  styleUrls: ['./amp-blog-post.component.css']
})
export class AmpBlogPostComponent implements OnInit {
  postTitle: string;
  postContent: string;
  postImageUrl: string;
  postCanonicalUrl: string;

  constructor(
    private route: ActivatedRoute,
    private blogService: BlogService
  ) { }

  ngOnInit(): void {
    const slug = this.route.snapshot.paramMap.get('slug');
    // 提前获取博客数据，填充到模板
    this.blogService.getBlogPost(slug).subscribe(post => {
      this.postTitle = post.title;
      this.postContent = post.content;
      this.postImageUrl = post.imageUrl;
      this.postCanonicalUrl = `https://yourdomain.com/blog/${slug}`;
    });
  }
}

5. 构建与验证 #

• 执行AoT构建命令：ng build --prod --aot
• 构建完成后，使用AMP官方验证工具检查页面是否符合规范，确保没有错误。

注意事项 #

• AMP页面适合静态内容展示，不要在AMP页面中加入Angular的路由跳转、复杂交互等动态功能，否则会违反AMP规范。
• 所有样式必须放在<style amp-custom>标签中，且大小不能超过50KB，不能使用外部样式表。

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