Add angular universal to existing project

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.

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: window, document 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.

• How to deploy angular Universal to production?
• window is not defined in angular universal?
• LocalStorage Is Not Defined In Angular Universal?
• api request is calling twice in angular universal

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