在 Angular 5 中将 AMP 与 Material Design Lite 一起使用答案

【问题标题】：Use AMP with Material Design Lite in angular 5在 Angular 5 中将 AMP 与 Material Design Lite 一起使用
【发布时间】：2018-04-22 05:33:38
【问题描述】：

我想创建一个 Angular 5 的电子商务渐进式 Web 应用。如何在 Google Material Design Lite 中使用 AMP 和 Angular 5？如果它不可扩展或不可行，那么其他好的选择是什么？

【问题讨论】：

标签： javascript angular architecture material-design amp-html

【解决方案1】：

我假设您已经熟悉使用 Angular Universal 进行 SSR/服务器端渲染，然后再进行其他操作。由于 no 允许在 AMP 上使用自定义 JavaScript。

话虽如此，让我们谈谈 AMP 标准和限制，看看在 Angular 方面可能存在哪些问题。

1.根据我的经验，网站/应用程序如何实施 AMP？

嗯，实际上每个页面都有 2 个版本（常规版本和 AMP 版本 - 需要遵守严格的规则）。假设您在my-app.com/video/1234/some-video-slug 上有一个视频页面。你想告诉谷歌你有这个页面的 AMP 版本。为此，您可以在 <head> 中添加以下内容：<link rel="amphtml" href="my-app.com/video-amp/1234/some-video-slug"> 其中/video-amp 将是为 AMP 版本提供服务的路由。接下来的所有要点都是关于该 AMP 路由/页面上发生的情况。

2.您不允许拥有任何外部样式

所以，没有<link rel="stylesheet" href="path-to-some.css">。

AMP 仅允许少数几个（例如 Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/ 或 Material Icons/Google Fonts //font.googleapis.com，因此仅来自特定的 cdns，绝对不能托管在您自己的服务器上）。

这是什么意思？好吧，当在 AMP 路由上时，您需要从服务器呈现的文档中去除 AMP 不允许的所有外部 css 引用，并添加那些允许的引用，如果/当需要时——比如当你需要一些图标或谷歌字体时。使用 Angular 提供的 document 和 renderer 可以在文档中删除和添加标签（因此，这包括 <head> 部分）。但是，对我来说，即使只遍历 <head> 部分的子节点以删除任何 <link> 标记似乎也很慢。而且我认为您无法在 Angular 应用程序之外执行此操作，因为您对在什么路线上需要做什么知之甚少。

3.那么您如何设计您的应用程序？

AMP 允许您拥有的唯一自定义 CSS 位于文档内的 <style> 块内。

你是怎么做到的？好吧，除了为某些 css 单独构建之外，我没有看到任何其他解决方案，它针对 AMP 版本并且与任何 Angular 无关/Angular CLI 工作流程，而不是编译/合并您已经为组件编写的现有 css 文件。 以某种方式，仅在 AMP 版本上将生成的结果放在 <head> 部分内的 <style> 块中。

但请记住，这些样式不一定是 100% 有效的 CSS。你可能有/deep/ 或:host。

4.您不允许拥有任何自定义 JavaScript。

因此，基本上不应包含您的整个 Angular 应用程序代码。您必须从任何 <script> 标记中去除服务器呈现的 html。

5. 那么，如果没有自定义 JavaScript，你如何javascript？

例如，在移动设备上没有滑动菜单或下拉菜单似乎很疯狂。嗯……你可以！但只能通过使用 AMP“组件”。

您必须使用<amp-sidebar> 而不是<mat-sidenav> 或您可能构建的任何自定义组件。但是 - 不知何故 - 只有在 AMP 路线上，因为我喜欢 Angular Material 组件。

它是如何工作的？ <amp-sidebar>?

嗯，当 AMP 为您提供组件时，其中包括 JavaScript。为了使侧边栏工作，您可以包括：https://cdn.ampproject.org/v0/amp-sidebar-0.1.js。这是允许的。您通常有很多常用/需要的组件可用：amp-carousel、amp-img（是的，您不允许简单地使用<img> 标签）、amp-video、@987654348 @...

6. HTML 文档的其余部分呢？

好吧，通过简单地通过 AMP 验证器传递 Angular 应用程序的服务器呈现的 html，这里也存在很多问题：

它在任何自定义属性上都会出错。而 Angular 充满了这些，尤其是在模拟原生 ViewEncapsulation 时（您已经看到了所有的 _ngcontent-c1 和此类属性）。为了摆脱这些，我想您要么必须使用ViewEncapsulation.None，但随后每个组件样式都将成为全局样式，或者将服务器呈现的html从所有_ng...属性中剥离出来并进行大量处理以某种方式构建一个仅以类/ID 等为目标的 AMP css 并在组件中使用更多类来设置样式是很痛苦的。
所有自定义标签也会出错（当然不是 AMP）。你知道 Angular 应用程序和 Material Components 是用那些。即使是第一个：<app-root>。而且，老实说，我除了标签选择器之外，它不能与其他任何东西一起使用，并且在某些情况下属性选择器（如指令）。

到目前为止，我能想到的就这些了。

我想说，目前在 Angular 应用上实现 AMP 几乎是不可能的。

但是，鉴于 AMP 和 Angular 都是 Google 项目，我希望尽快看到 Angular+AMP 方面的一些进展。我听说有人说 Rob Wormald 实际上在今年早些时候提到了一些关于 AMP 的事情，比如四月份的 Ng-Conf ......但我找不到任何关于这方面的信息，或者到目前为止的任何进展，我们已经接近2018 年了。另外，也许只是一些想法，甚至没有路线图……不知道！？

希望，使用 Angular 6！我是个乐观主义者。

目前，我认为渐进式网络应用程序应该足够快，以至于 AMP 无法大幅提高该速度（只要您在第一次加载时连接没有出现问题）。不过，我不知道你在这方面的排名如何（拥有一个非常好的 PWA 与实施 AMP - 当它是一个或另一个，而不是两者时）

【讨论】：

感谢@MrCroft ...您的详细解释确实有助于我决定技术堆栈。
@godblessstrawberry 我还联系了 YouTube 上的 AngularAir 频道 (youtube.com/channel/UCdCOpvRk1lsBk26ePGDPLpQ)，他们说他们将研究 AMP 与 Angular 并计划在这方面进行一集。从那以后已经一两个月了，但我希望它最终会发生。我只是不确定这是否可能没有太多麻烦:)