在角度5中使用AMP和Material Design Lite
我想创建一个角度为5的电子商务渐进式网络应用程序。如何在Google Material Design Lite中使用带有角度5的AMP？
如果它不具有可扩展性或可行性，那么其他有什么好的选择呢？
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? If it is not scalable or feasible then what are the other good options?
我认为你已经是熟悉使用Angular Universal的SSR /服务器端渲染，在其他任何事情之前。由于AMP上允许没有自定义JavaScript。
I presume that you are already familiar with SSR/server-side rendering using Angular Universal, before anything else. Since no custom JavaScript is allowed on AMP.
话虽如此，我们先谈谈AMP标准和限制，看看可能存在哪些问题当谈到Angular时。
Having said that, let's talk a bit about AMP standards and restrictions and see what possible issues are when it comes to Angular.
1。根据我的经验，网站/应用如何实现AMP？
1. How does a website/app implement AMP, in my experience?
嗯，每个页面实际上有两个版本（常规版本和AMP版本 - 遵守严格的规则） ）。
假设您在 my-app.com/video/1234/some-video-slug 上有视频页面。并且您想告诉Google您有此页面的AMP版本。您可以在< head> 中添加以下内容：< link rel =amphtmlhref =my-app.com/ video-amp / 1234 / some-video-slug> 其中 / video-amp 将是为AMP版本提供服务的路线。接下来的所有要点都是关于该AMP路线/页面上发生的事情。
Well, you'd practically have 2 versions for each page (the regular version and the AMP version - with strict rules to adhere to).
Let's say you have a video page on my-app.com/video/1234/some-video-slug. And you want to tell Google that you have an AMP version for this page. 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. All the next points are about what happens on that AMP route/page.
2。你不允许拥有任何外部样式
所以，没有< link rel = stylesheethref =path-to-some.css> 。
AMP允许的只有少数（如Font Awesome // maxcdn.bootstrapcdn.com/font-awesome / 或材料图标/ Google字体 // font.googleapis.com ，因此，仅限于特定的cdns，绝对不会托管在您自己的服务器上。）
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路线上，您需要剥离AMP不允许的所有外部CSS引用的服务器呈现文档，并添加允许的文件，如果/在需要时 - 例如当您需要某些图标或谷歌字体时。使用文档可以删除和添加文档中的标记（因此，这包括< head> 部分）和Angular提供的渲染器。但是，对我来说，即使只遍历< head> 部分的子节点，它也似乎很慢，以便删除任何< link> 标记。而且我认为你不能在你的Angular应用程序之外做到这一点，因为你对在什么路线上需要做什么知之甚少。
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. Removing and Adding tags in the document (so, this includes the <head> section) is possible using the document and renderer provided by Angular. But, to me it seemed slow even to only traverse the children nodes of the <head> section in order to remove any <link> tag. 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.
3. 那么你如何设计你的应用程序？
3. How do you style your app then?
那么唯一的自定义css是AMP允许您在文档中的< style> 块内。
Well the only custom css that AMP allows you to have is inside a <style> block within the document.
如何做你这样做了吗？好吧，我没有看到任何其他解决方案，除了为一些css单独构建，它针对AMP版本并且与任何Angular / Angular CLI工作流程无关，除了编译/合并您已为组件编写的现有css文件。 以某种方式，将生成的结果放在< head> $ c中的< style> 块中$ c>部分，仅适用于AMP版本。
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. And somehow, put the generated result in a <style> block inside the <head> section, only when on the AMP version.
但请记住，这些样式不一定是100％有效的CSS。您可能有 / deep / 或：host 。
But keep in mind that those styles aren't necessarily 100% valid css. You might have /deep/ or :host.
4。 不允许拥有任何自定义JavaScript。
4. You are not allowed to have ANY custom JavaScript.
因此，基本上不应包括整个Angular应用程序代码。您必须从任何< script> 标记中删除服务器呈现的html。
So, basically your entire Angular app code should not be included. You have to strip the server-rendered html out of any <script> tags.
5. 如果没有自定义JavaScript，你如何 javascript ？
5. How do you javascript then, without custom JavaScript?
例如，在移动设备上没有滑动菜单或下拉菜单似乎很疯狂。嗯......你可以！但只能使用AMP组件。
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-sidebar> 而不是< mat-sidenav> 或您可能构建的任何自定义组件。但是 - 不知何故 - 只有在AMP路线上，因为我喜欢Angular Material组件。
You'd have to use <amp-sidebar> instead of <mat-sidenav> or whatever custom component you might have built. But - somehow - only when on the AMP route, because I love Angular Material components.
它是如何工作的？ < amp-sidebar> ？
And how does it work? The <amp-sidebar>?
当AMP为您提供组件时，包括JavaScript的。为了使侧栏工作，您可以包括： https://cdn.ampproject.org/v0/amp-sidebar-0.1.js 。这是允许的。您通常可以使用许多常用的/需要的组件： amp-carousel ， amp-img （是的，你是不允许简单地使用 < img> 标记）， amp-video ， amp-accordion ...
Well, when AMP offers you components, that includes JavaScript. In order to make the sidebar work, you can include: 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...
6。 HTML文档的其余部分怎么样？
6. What about the rest of the HTML document?
好吧，只需通过AMP传递服务器呈现的Angular应用程序的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:
-
任何自定义属性都出错。 Angular充满了这些，尤其是模仿本机ViewEncapsulation（你已经看到所有的
_ngcontent-c1和这样的属性）。为了摆脱这些，我猜你要么必须使用ViewEncapsulation.None，但随后每个组件样式都将变为全局或剥离服务器呈现的html所有那些_ng ...属性，并以某种方式构建一个仅按类/ id等定位的AMP css，并在你的内容中使用更多类无论如何都要设计风格。
It errors on any custom attributes. And Angular is full of those, especially to emulate a native ViewEncapsulation (you've seen all the
_ngcontent-c1and such attributes). In order to get rid of those, I guess you'd either have to go withViewEncapsulation.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.
它也会在所有自定义标签上出错（当然不是AMP）。
你知道Angular应用程序和Material Components是用
构建的。即使是第一个：< app-root> 。而且，老实说，除了标签选择器之外，我
不能用于其他任何东西，而在
中，有些情况属性选择器（如指令）。
It also errors on all custom tags (that aren't AMP, of course).
And you know Angular apps and Material Components are build with
those. Even the very first one: <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.
我想说在Angular应用程序上实现AMP几乎是不可能的。
I would say that implementing AMP on an Angular app is close to impossible at this point in time.
但是，鉴于AMP和Angular都是谷歌项目，我我们希望很快就能看到Angular + AMP取得一些进展。我听说过有人说Rob Wormald今年早些时候提到了关于AMP的一些事情，就像4月份在Ng-Conf那样...但我找不到任何相关内容，或者到目前为止的任何进展，我们接近2018年已经。另外，也许只有一些想法，甚至不是路线图...不知道！？
But, given that AMP and Angular are both Google projects, I would expect to see some progress in regards to Angular+AMP soon enough. 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. Plus, maybe there were just some ideas, not even a road map... don't know!?
希望Angular 6！我是一个乐观主义者。
Hopefully, with Angular 6! I'm an optimist.
目前，我认为渐进的网络应用程序应该足够快，AMP无法在这个速度上提高很多（只要你没有在第一次加载时连接错误）。我不知道你的排名如何（拥有一个非常好的PWA而不是实施AMP - 当它是一个或另一个，而不是两者）
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). 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)