Angular

Add angular universal to existing project

Spread the love

Universal run on the server side, crate a static application bundle get bootstrapped on the client browse.

Purpose of Universal :

1. Performance.
2. Compatibility with Social Media Crawlers and search engines Crawlers.
3. Search Engine Optimization.

convert angular app to angular universal app
convert angular app to angular universal app

Prerequisite of Angular Universal

  1. Already used “localstorage” in your existing app throw “local storage is not define” error from server. install this package and server side npm global : npm i localstorage-polyfill
  2. Add server side mock browser for run some javascript code at server side.
  3. Break your every page in separate module to load page fast and that consume less computation of your server.
    N.B: windowdocument or localStorage and any others library like jQuery that you can use of them by use PLATFORM_ID token to check whether the current platform is browser or server.
    After using isPlatformBrowser method You should be able to access your local storage with no issues at all.
# use --clientProject in command for mono or multi repo app.
ng add @nguniversal/express-engine --clientProject <project name as in angular.json>

# Example.
ng add @nguniversal/express-engine --clientProject <TodoApp>
# command for build and run the app.
npm run build:ssr && npm run serve:ssr

Test your angular universal app by two options

  1. Right click on browser page -> View page source. There you can see your content.
  2. You can disable your browser JavaScript in chrome options-> Press F12 -> performance tab -> check the disable JavaScript sample.

Thank you! Like our Facebook page for more updates and to get more interested articles.


Spread the love
Tagged , , , , , ,

About Chandra

Technology lover. Professionally Software Developer and write some Technical Blog to help newcomer.
View all posts by Chandra →

10 thoughts on “Add angular universal to existing project

  1. I have done every thing that you explain. i have gone through your all blogs please help me I am not able to see HTML content in view source.

Leave a Reply

Your email address will not be published.