Universal run on the server side, crate a static application bundle get bootstrapped on the client browse.
Purpose of Universal :
2. Compatibility with Social Media Crawlers and search engines Crawlers.
3. Search Engine Optimization.
Prerequisite of Angular Universal
- 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
- Break your every page in separate module to load page fast and that consume less computation of your server.
localStorageand 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
- Right click on browser page -> View page source. There you can see your content.
- 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.
10 thoughts on “Add angular universal to existing project”
Is it secure to use mock serve it is third party package c.
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.
If your dynamic content not showing then you should follow below link