How can I implement AMP in angular/ionic website?

Question

Recently i've heard about the Accelerated Mobile Pages project, and read some info about it.

I wonder how to implement it for existing website that is built upon Ionic and Angular?

Algerian

I suggest you do some more reading. AMP pretty much excludes all javascript except its own. – Trident

@KobiCohen, did you find any solution or we cannot just have Angular while planning to have AMP HTML? – Gabbro

Short answer: no... – Algerian

Answer 1

Basically there is no nearly possible solution to do that. If you check the doc here.

Keep all third-party JavaScript out of the critical path

Third-party JS likes to use synchronous JS loading. They also like to document.write more sync scripts. For example, If you five ads, and each does three sync loads, with a 1 second latency connection, you’re in 18 seconds of load time just for JS loading.

AMP pages allow third-party JavaScript but only in sandboxed iframes. By banning them into iframes, they can’t block execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM.

Style-recalculations and layouts are typical to DOM size, so the iframe recalculations are very fast compared to a recalculating styles and layout for the page.

Imperceptible

I actually read the exact same lines, this is why I was asking if somebody already figure out a way to load angular async and bootstrap it later – Algerian

Answer 2

I haven't done this yet with an Angular app but this is what I got from my research to make it happen.

you may consider checking:

• a static site generator for Angular like scully
• scully-plugin-amp-css
• This medium article

I'm still searching for a better and fast solution, and I'll try it myself and update my answer.

Note: on AMP.dev Docs they mentioned you can turn any React app to AMP, but I can't find anything regarding Angular on the official AMP docs.

Skiplane