There are various ways we can add Universal support to our application. But one of the best ways is mentioned in the Angular documentation, in the Angular Universal guide (https://angular.io/guide/universal): we can use the ng add command, along with @nguniversal/express-engine and clientProject, to add Universal support to our project:

> ng add @nguniversal/express-engine --clientProject personal-blog

This command adds all the required dependencies to the package.json file and installs them. It also creates all the different files, along with code changes. The following files are created and updated:

 CREATE src/main.server.ts (220 bytes)
 CREATE src/app/app.server.module.ts (427 bytes)
 CREATE src/tsconfig.server.json (219 bytes)
 CREATE webpack.server.config.js (1360 bytes)
 CREATE server.ts (1472 bytes)
 UPDATE package.json (2013 bytes)
 UPDATE angular.json (5282 bytes)
 UPDATE src/main.ts (432 bytes)
 UPDATE src/app/app.module.ts (837 bytes)

This updates angular.json with another application, called server, and updates the path of the output of the application to the browser folder, which can be found in the dist folder.

main.server.ts exports AppServerModule, which uses ServerModule from @angular/platform-browser, and also imports AppModule, along with ModuleMapLoaderModule from @nguniversal, which helps the lazy-loaded routes run in the application. The command also creates webpack.server.config.js, which is a webpack configuration that compiles the server.ts file. The server.ts file sets up the server using Express, which allows it to compile the application using ngExpressEngine, as follows:

app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
        provideModuleMap(LAZY_MODULE_MAP)
    ]
}));

Here, AppServerModuleNgFactory and LAZY_MODULE_MAP are loaded from the compiled server's main file.

The command also adds some npm build commands, more specifically build:ssr and server:ssr. The build:ssr command compiles our application for browsers and servers using production configuration. It creates a couple of folders in the dist folder, that is, browser and server, and also compiles the server.ts file with server.js in the dist folder. The serve:ssr command runs server.js using Node.js.

Let's build and serve our application using the npm scripts:

> npm run build:ssr && npm run serve:ssr

These scripts should run the application in http//localhost:8080. The application should work without any errors.

Now, let's view the page source using View page source again. We will see that all the content has been loaded into pb-root:

Again, the power of the ng add command makes it so much easier to add new functionality to our application. With just one command, we can get our application running on the Express server. Next, we will create one small problem in our application, solve it using TransferStateModule, and then deploy our application on Now.

We now have a simple Angular Universal application. In the next section, we'll understand how the state of the application is being transferred from the server to the client and optimize the transition of the state using TransferState.