• Post Reply Bookmark Topic Watch Topic
  • New Topic

Progressive enhancement in Angular 2?  RSS feed

 
Ranch Hand
Posts: 90
1
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Angular 2 samples that I have seen use a custom element filled with a simple loading message as the launch point for the app. For example, the Angular Router demo uses:



.. and the Angular 2 Material demo uses:



This is fine if the user has enabled JavaScript in their browser, but if they don't enable JavaScript or there is some network issue that prevents one of the critical scripts from loading, then all the user will see is the loading message. Also, while Angular is loading, the user only sees the loading message. They might think that the website is broken.

Is it possible to implement progressive enhancement techniques with Angular 2? Maybe the server can render markup to display some content and then Angular will come along and take over the content elements once it finishes loading?
 
Author and ninkuma
Marshal
Posts: 66729
167
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Giving you a cow for starting off this week's book promo with some really excellent questions.
 
Daniel Trebbien
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you so much, Bear!
 
Author
Greenhorn
Posts: 7
5
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If JavaScript is disabled in the browser there is not much you can do, probably server-side rendering is the only option. Server-side rendering is indeed supported by Angular, the sub-project is called Angular Universal. While it works already, I would wait till Angular 4 before staring using universal in my projects. There is an ongoing process of incorporating Angular Universal into Angular core, breaking API changes are expected, but the process should become better integrated into Angular API and Angular apps.

The idea is that you will have two entrypoints (i.e. two bootstrap modules) in your application - one for browser, another one - for server-side process. The server-side bootstrap module will override services that are browser-specific. For example, in browser version you may have a service that uses HTTP to fetch data, while the server version will fetch data directly from the database. When user requests your application from the server very first time, it will bootstrap your application on the server, and return generated static HTML page as the response. The page will include links to the application JS bundles. Once bundles are loaded and the browser version of you app is bootstrapped, the page becomes interactive.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!