Can we implement AMP in an angular app?

Question

I am new to AMP and have been asked to add amp to an already developed angular website. I have also read that AMP Keep all third-party JavaScript out of the critical path But I am not sure whether it is possible or not.And if possible can you share some links for that. Any help is welcome

Solution 1

Assuming you already have a site with Angular pages like:

• 1.html
• 2.html

Then you can create AMPs like:

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

1.html can use Angular and client-side javascript but 1.amp.html should be a representation of the same content but produced server-side rather than by using Angular javascript inside it. Follow the steps in here: https://ampbyexample.com/introduction/how_to_publish_amps/ and you should be fine.

Solution 2

You can certainly link to AMP pages from your existing site, but the specification for AMP is a limited subset of HTML elements and there are restrictions on what JavaScript you can have running on your page. I don't believe you can have an AMP page powered by Angular.

Comments

[Sim]

Hi @Toby So does it mean AMP can be used mostly for the static pages?

[Toby]

It can be used for pulling in dynamic content, but you have to use its conventions, not Angular's.

[Sim]

Hi @Ade thanks for the link it is quite helpful. However, I am a bit confused as my site is on PHP. It has a main page index.php inside the different components are loaded and routing is done accordingly basically a SPA. If now this has to be converted into AMP then I need to create the index.amp.php? Is there any live angular application that has implemented AMP?

[ade]

I don't know of any live Angular AMPs that use AMP. All AMPs I've seen use server-side rendering. I don't believe it's possible to create AMPs with client-side rendering.

[Kosso]

Everything needs to be fully rendered. (Possibly PhantomJS could help here?) All the AngularJS directives etc. are invalid and prohibited from AMP.

[neoswf]

Like @ade said, you can generate static AMP pages using SSR solutions like puppeteer

[Amirhossein Mehrvarzi]

your link is expired.