Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.