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
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Server Side Render an Angular CLI Project with Angular Universal

    angularAngular
    ^6.0.0

    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.