Angular Universal
•Download as PPTX, PDF•
1 like•413 views
This document discusses Angular Universal, which allows Angular applications to render on the server side. It covers the traditional page load process versus single page applications, some problems with client-side rendering, and an overview of how Angular Universal works. The rest of the document provides steps for setting up an Angular Universal app, including prerequisites, configuring the app for server-side rendering, creating a server bundle, and running the server. It concludes with references for additional information.
Report
Share
Angular Universal
- 2. 1. Traditional Page Vs SPAs 2. The problem 3. What is Angular Universal? 4. Pre-Requisites 5. How to set it up 6. Demo 7. References What we’ll cover
- 3. Traditional Page vs SPA Initial Request HTML Form POST HTML CLIENT SERVER Initial Request HTML XHR JSON CLIENT SERVER refresh
- 4. The Problem
- 6. What is Angular Universal? SEO Fast Load “Server-side Rendering for Angular apps”. It’s the middleware that sits between node.js and Angular. UX
- 8. 0. Create your angular app and install @angular/platform-server 1. Prepare your app for Universal rendering 2. Create a server main file and tsconfig to build it 3. Create a new project in .angular-cli.json 4. Create your server to test it How to set it up?
- 9. 0. Create your angular app and Install @angular/platform-server $ ng new app-universal-demo $ cd app-universal-demo $ npm install Make sure you have angular-cli 1.3 installed Platform server should be same version as other angular packages $ npm install --save-dev @angular/platform-server
- 10. 1. Prepare your app for Universal rendering src/app/app.module.ts: src/app/app.server.module.ts:
- 11. 2. Create a server main file and tsconfig to build it src/main.server.ts: src/tsconfig.server.json:
- 12. 3. Create a new app in .angular-cli.json Build the project: # This builds the client application in dist/ $ ng build --prod # This builds the server bundle in dist- server/ $ ng build --prod --app 1 .angular-cli.json:
- 13. 4. Create your server to test it Build the project: $ node server server.js: Run the server:
- 14. 1.Angular docs [https://angular.io/docs] 2. Angular-cli [https://github.com/angular/angular-cli] 3. Angular-universal [https://universal.angular.io] 4. Express [https://expressjs.com] Referencias