简体繁体 English

在 angular 5 中使用 AMP 和 Material Design Lite

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

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

I would like to create an e-commerce progressive web app with angular 5. How can I use AMP with angular 5 in Google Material Design Lite?我想创建一个带有 angular 5 的电子商务渐进式 Web 应用程序。如何在 Google Material Design Lite 中使用带有 angular 5 的 AMP？ If it is not scalable or feasible then what are the other good options?如果它不可扩展或不可行，那么其他好的选择是什么？

1 个解决方案

I presume that you are already familiar with SSR/server-side rendering using Angular Universal, before anything else.我假设您已经熟悉使用 Angular Universal 的 SSR/服务器端渲染，在此之前。 Since no custom JavaScript is allowed on AMP.由于没有自定义JavaScript被允许在AMP。

Having said that, let's talk a bit about AMP standards and restrictions and see what possible issues are when it comes to Angular.话虽如此，让我们谈谈 AMP 标准和限制，看看在 Angular 方面可能存在哪些问题。

1. How does a website/app implement AMP, in my experience? 1.根据我的经验，网站/应用程序如何实施 AMP？

Well, you'd practically have 2 versions for each page (the regular version and the AMP version - with strict rules to adhere to).好吧，实际上每个页面都有 2 个版本（常规版本和 AMP 版本 - 需要遵守严格的规则）。 Let's say you have a video page on my-app.com/video/1234/some-video-slug .假设您在my-app.com/video/1234/some-video-slug上有一个视频页面。 And you want to tell Google that you have an AMP version for this page.并且您想告诉 Google 您有此页面的 AMP 版本。 You do that by adding the following in the <head> : <link rel="amphtml" href="my-app.com/video-amp/1234/some-video-slug"> where /video-amp would be the route that serves the AMP version.您可以通过在<head>添加以下内容来实现： <link rel="amphtml" href="my-app.com/video-amp/1234/some-video-slug">其中/video-amp将是服务于 AMP 版本的路由。 All the next points are about what happens on that AMP route/page.接下来的所有要点都是关于 AMP 路由/页面上发生的事情。

2. You are not allowed to have any external styles 2.不允许有任何外部样式

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

Only a few allowed by AMP (like Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/ or Material Icons/Google Fonts //font.googleapis.com , so from specific cdns only, definitely NOT hosted on your own server).只有少数 AMP 允许（例如 Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/或 Material Icons/Google Fonts //font.googleapis.com ，因此仅来自特定的 cdns，绝对不在您自己的服务器上托管） .

What does this mean?这是什么意思？ Well, when on an AMP route, you need to strip the server-rendered document of all external css references that aren't allowed by AMP and add those that are allowed, if/when needed - like when you need some icons or google fonts.好吧，当在 AMP 路由上时，您需要去除 AMP 不允许的所有外部 css 引用的服务器渲染文档，并在需要时添加那些允许的文档 - 比如当您需要一些图标或谷歌字体时. Removing and Adding tags in the document (so, this includes the <head> section) is possible using the document and renderer provided by Angular.使用 Angular 提供的document和renderer可以在document删除和添加标签（因此，这包括<head>部分）。 But, to me it seemed slow even to only traverse the children nodes of the <head> section in order to remove any <link> tag.但是，对我来说，即使只遍历<head>部分的子节点以删除任何<link>标签似乎也很慢。 And I don't think you could do that outside of your Angular app, since you have very little knowledge about what needs to be done on what route.而且我认为你不能在你的 Angular 应用程序之外做这件事，因为你对在什么路线上需要做的事情知之甚少。

3. How do you style your app then? 3.那么你如何设计你的应用程序？

Well the only custom css that AMP allows you to have is inside a <style> block within the document. AMP 允许您拥有的唯一自定义 css 位于文档中的<style>块内。

How do you do that?你怎么做？ Well, I don't see any other solution other than having a separate build just for some css, which targets the AMP version and has nothing to do with any Angular/Angular CLI workflow, other than maybe compiling/merging the existing css files you already wrote for your components.好吧，除了为某些 css 单独构建之外，我没有看到任何其他解决方案，它针对 AMP 版本并且与任何 Angular/Angular CLI 工作流程无关，除了可能编译/合并现有的 css 文件之外已经为您的组件编写了。 And somehow , put the generated result in a <style> block inside the <head> section, only when on the AMP version.并且以某种方式将生成的结果放在<head>部分内的<head> <style>块中，仅当在 AMP 版本上时。

But keep in mind that those styles aren't necessarily 100% valid css.但请记住，这些样式不一定是 100% 有效的 css。 You might have /deep/ or :host .您可能有/deep/或:host 。

4. You are not allowed to have ANY custom JavaScript. 4.您不得拥有任何自定义 JavaScript。

So, basically your entire Angular app code should not be included.因此，基本上不应包含您的整个 Angular 应用程序代码。 You have to strip the server-rendered html out of any <script> tags.您必须从任何<script>标记中去除服务器呈现的 html。

5. How do you javascript then, without custom JavaScript? 5.你怎么那么JavaScript中，没有自定义JavaScript？

For example, it would seem crazy to not have a sliding menu or a dropdown menu, on mobile.例如，在移动设备上没有滑动菜单或下拉菜单似乎很疯狂。 Well... You can!嗯……你可以！ But only by using AMP "components".但只能通过使用 AMP“组件”。

You'd have to use <amp-sidebar> instead of <mat-sidenav> or whatever custom component you might have built.您必须使用<amp-sidebar>而不是<mat-sidenav>或您可能构建的任何自定义组件。 But - somehow - only when on the AMP route, because I love Angular Material components.但是 - 不知何故 - 只有在 AMP 路线上，因为我喜欢 Angular Material 组件。

And how does it work?它是如何工作的？ The <amp-sidebar> ? <amp-sidebar> ?

Well, when AMP offers you components, that includes JavaScript.好吧，当 AMP 为您提供组件时，其中包括 JavaScript。 In order to make the sidebar work, you can include: https://cdn.ampproject.org/v0/amp-sidebar-0.1.js .为了使侧边栏工作，您可以包括： https://cdn.ampproject.org/v0/amp-sidebar-0.1.js : https://cdn.ampproject.org/v0/amp-sidebar-0.1.js 。 That is allowed.这是允许的。 You generally have a lot of common used/needed components available: amp-carousel , amp-img (yes, you are not allowed to simply use the <img> tag), amp-video , amp-accordion ...您通常有很多常用/需要的组件可用： amp-carousel 、 amp-img （是的，您不能简单地使用<img>标签）、 amp-video 、 amp-accordion ...

6. What about the rest of the HTML document? 6.剩下的 HTML 文档呢？

Well, by simply passing a server-rendered html of an Angular app through the AMP validator, there are a lot of problems here also:好吧，通过简单地通过 AMP 验证器传递一个 Angular 应用程序的服务器渲染的 html，这里也有很多问题：

It errors on any custom attributes.它在任何自定义属性上出错。 And Angular is full of those, especially to emulate a native ViewEncapsulation (you've seen all the _ngcontent-c1 and such attributes). Angular 充满了这些，尤其是模拟原生 ViewEncapsulation（你已经看到了所有的_ngcontent-c1和这样的属性）。 In order to get rid of those, I guess you'd either have to go with ViewEncapsulation.None , but then each component style will become global OR strip the server rendered html out of all those _ng... attributes and go though a great deal of pain to somehow build an AMP css that only targets by class/id etc. and use more classes in your components to style by anyway.为了摆脱这些，我想你要么必须使用ViewEncapsulation.None ，但随后每个组件样式都将变为全局或从所有这些_ng...属性中_ng...服务器呈现的 html _ng...以某种方式构建一个仅以类/ID 等为目标的 AMP css 并在您的组件中使用更多类来设置样式，这很痛苦。
It also errors on all custom tags (that aren't AMP, of course).它还会在所有自定义标签（当然不是 AMP）上出错。 And you know Angular apps and Material Components are build with those.你知道 Angular 应用程序和 Material Components 是用它们构建的。 Even the very first one: <app-root> .即使是第一个： <app-root> 。 And, honestly, I wouldn't work with anything else other than tag selectors and, in some cases attribute selectors (like with Directives).而且，老实说，除了标签选择器和在某些情况下属性选择器（例如指令）之外，我不会使用其他任何东西。

This is all that I could think of, so far.目前能想到的就这些。

I would say that implementing AMP on an Angular app is close to impossible at this point in time.我想说，目前在 Angular 应用程序上实施 AMP 几乎是不可能的。

But, given that AMP and Angular are both Google projects, I would expect to see some progress in regards to Angular+AMP soon enough.但是，鉴于 AMP 和 Angular 都是 Google 的项目，我希望很快就会看到 Angular+AMP 方面的一些进展。 I've heard someone saying that Rob Wormald actually mentioned something about AMP early this year, like in April at Ng-Conf... But I couldn't find anything on that, or any progress so far, and we're close to 2018 already.我听说有人说 Rob Wormald 实际上在今年早些时候提到了一些关于 AMP 的事情，比如 4 月份在 Ng-Conf 上......已经2018年了。 Plus, maybe there were just some ideas, not even a road map... don't know!?另外，也许只是一些想法，甚至没有路线图……不知道！？

Hopefully, with Angular 6!希望有 Angular 6！ I'm an optimist.我是一个乐观主义者。

For now, I think that a progressive web-app should be fast enough that AMP wouldn't be able to improve much on that speed (as long as you're not on a bad connection on the first load).就目前而言，我认为渐进式网络应用程序应该足够快，AMP 无法在该速度上提高太多（只要您在第一次加载时连接不坏）。 I don't know how you'd rank on that, though (having a really good PWA versus implementing AMP - when it's one or the other, not both)不过，我不知道你会如何排名（拥有非常好的 PWA 与实施 AMP - 当它是一个或另一个时，而不是两者）