Go ProSign in

This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Server Side Render an Angular CLI Project with Angular Universal

In this lesson we will add Server Side Rendering to our application using Angular Universal. We'll build a simple Express application and see how Angular Universal builds and renders our app on the server.

Since Angular CLI v6 we can simple run ng generate universal --clientProject store, where store is the name of our app.

In angular.json in the architect.server object we define a configurations object, to make sure the correct environment gets copied on a production build.

To make Angular Universal with lazy loaded modules we need to add the ModuleMapLoaderModule to AppServerModule, which we get after installing @nguniversal/module-map-ngfactory-loader from npm.

npm install --save @nguniversal/module-map-ngfactory-loader @nguniversal/express-engine

In the project root we implement a server.ts and define our simple express server.

When we run the new server we see that the app gets rendered before it hits the browser.

You must be a Member to view code