繁体 English 中英

在 angular 5 中使用 AMP 和 Material Design Lite

[英]Use AMP with Material Design Lite in angular 5

原文 2017-11-09 09:28:40 5 1 javascript/ angular/ architecture/ material-design/ amp-html

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

1 个解决方案

我假设您已经熟悉使用 Angular Universal 的 SSR/服务器端渲染，在此之前。 由于没有自定义JavaScript被允许在AMP。

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

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

好吧，实际上每个页面都有 2 个版本（常规版本和 AMP 版本 - 需要遵守严格的规则）。 假设您在my-app.com/video/1234/some-video-slug上有一个视频页面。 并且您想告诉 Google 您有此页面的 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可以在document删除和添加标签（因此，这包括<head>部分）。 但是，对我来说，即使只遍历<head>部分的子节点以删除任何<link>标签似乎也很慢。 而且我认为你不能在你的 Angular 应用程序之外做这件事，因为你对在什么路线上需要做的事情知之甚少。

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

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

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

但请记住，这些样式不一定是 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 : https://cdn.ampproject.org/v0/amp-sidebar-0.1.js 。 这是允许的。 您通常有很多常用/需要的组件可用： amp-carousel 、 amp-img （是的，您不能简单地使用<img>标签）、 amp-video 、 amp-accordion ...

6.剩下的 HTML 文档呢？

好吧，通过简单地通过 AMP 验证器传递一个 Angular 应用程序的服务器渲染的 html，这里也有很多问题：

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

目前能想到的就这些。

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

但是，鉴于 AMP 和 Angular 都是 Google 的项目，我希望很快就会看到 Angular+AMP 方面的一些进展。 我听说有人说 Rob Wormald 实际上在今年早些时候提到了一些关于 AMP 的事情，比如 4 月份在 Ng-Conf 上......已经2018年了。 另外，也许只是一些想法，甚至没有路线图……不知道！？

希望有 Angular 6！ 我是一个乐观主义者。

就目前而言，我认为渐进式网络应用程序应该足够快，AMP 无法在该速度上提高太多（只要您在第一次加载时连接不坏）。 不过，我不知道你会如何排名（拥有非常好的 PWA 与实施 AMP - 当它是一个或另一个时，而不是两者）