13

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

Allen Fernandes
  • 1,293
  • 11
  • 18
Sim
  • 287
  • 1
  • 2
  • 13
  • I don't believe it's possible. One key part of AMP is that the content is all there: loaded and pre-composed. You would have to have another endpoint on your site for AMP. – Dai Oct 31 '16 at 05:08
  • Hello @Dai could you please elaborate what do you actually mean by another end point for your site? – Sim Oct 31 '16 at 08:32
  • I think what he means is to have canonical pages like `foo.bar/index.html` and AMP pages be at another endpoint like `amp.foo.bar/index.html` or `foo.bar/amp/index.html`. It is up to you how you would want to set up the structure of your URL but that is the idea behind it. – Andrew Nov 01 '16 at 22:15

2 Answers2

8

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.

ade
  • 4,056
  • 1
  • 20
  • 25
  • 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? – Sim Nov 08 '16 at 06:07
  • 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. – ade Nov 28 '16 at 19:03
  • 1
    your link is expired. – Amirhossein Mehrvarzi Aug 07 '20 at 21:10
7

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.

Toby
  • 8,483
  • 13
  • 45
  • 68
  • Hi @Toby So does it mean AMP can be used mostly for the static pages? – Sim Nov 03 '16 at 04:12
  • 2
    It can be used for pulling in dynamic content, but you have to use its conventions, not Angular's. – Toby Nov 03 '16 at 08:25
  • Everything needs to be fully rendered. (Possibly PhantomJS could help here?) All the AngularJS directives etc. are invalid and prohibited from AMP. – Kosso Jul 21 '17 at 15:17
  • Like @ade said, you can generate static AMP pages using SSR solutions like puppeteer – neoswf Feb 01 '18 at 11:50