我们能在Angular应用程序中实现AMP吗？

Question

我对AMP不太熟悉，现在被要求在已经开发好的Angular网站中添加AMP。我也读到过AMP将所有第三方JavaScript保持在关键路径之外，但我不确定是否可行。如果可能的话，您能否分享一些链接。任何帮助都受欢迎。

- Sim

---

我不相信这是可能的。 AMP 的一个关键部分是内容都在那里：已加载和预组合。您需要在站点上拥有另一个 AMP 端点。 - Dai

你好 @Dai，请问您能否详细说明一下您所说的站点另一个终端是指什么？ - Sim

我认为他的意思是要有规范页面，比如 foo.bar/index.html，而 AMP 页面则位于另一个端点，如 amp.foo.bar/index.html 或 foo.bar/amp/index.html。你可以自行决定如何设置 URL 结构，但这就是其背后的想法。 - Andrew

Answer 1

假设您已经拥有一个包含Angular页面的站点，例如：

• 1.html
• 2.html

然后，您可以创建以下AMP：

• 1.amp.html
• 2.amp.html

1.html 可以使用 Angular 和客户端 javascript，但是 1.amp.html 应该是同样内容的服务器端生成的表示形式，而不是在其中使用 Angular javascript。请按照此处的步骤操作：https://ampbyexample.com/introduction/how_to_publish_amps/，您就应该没问题了。

- ade

---

嗨@Ade，感谢您提供的链接，它非常有帮助。然而，我有点困惑，因为我的网站是基于PHP的。它有一个主页index.php，在其中加载不同的组件并相应地进行路由，基本上是一个SPA。如果现在必须将其转换为AMP，则需要创建index.amp.php吗？是否有任何已实现AMP的实时Angular应用程序？ - Sim

我不知道有任何使用AMP的实时Angular AMP。我看到的所有AMP都使用服务器端渲染。我不认为可以使用客户端渲染创建AMP。 - ade

您的链接已过期。 - Amirhossein Mehrvarzi

Answer 2

您可以在现有网站上链接到AMP页面，但是AMP的规范是HTML元素的有限子集，并且存在对页面上可运行JavaScript的限制。我认为您无法使用Angular来驱动AMP页面。

- Toby

---

嗨@Toby，这是否意味着AMP主要用于静态页面？ - Sim

它可以用于拉取动态内容，但您必须使用它的约定，而不是Angular的。 - Toby

所有内容都需要完全呈现。（可能 PhantomJS 可以在这方面提供帮助？）所有 AngularJS 指令等都是无效的，禁止在 AMP 中使用。 - Kosso

就像@ade所说的那样，您可以使用像puppeteer这样的SSR解决方案生成静态AMP页面。 - neoswf