Skip to content

Commit 01303d3

Browse files
committed
docs: fix scripts section and some minor issues in universal documentation
1 parent 091a8a6 commit 01303d3

1 file changed

Lines changed: 15 additions & 23 deletions

File tree

aio/content/guide/universal.md

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ Finally, the server returns the rendered page to the client.
111111
Before your app can be rendered on a server, you must make changes in the app itself, and also set up the server.
112112

113113
1. Install dependencies.
114-
1. Prepare your app by modifying both the app code and its configuration.
114+
1. Prepare your app by modifying both the app code and its configuration.
115115
1. Add a build target, and build a Universal bundle using the CLI with the `@nguniversal/express-engine` schematic.
116116
1. Set up a server to run Universal bundles.
117117
1. Pack and run the app on the server.
@@ -142,11 +142,11 @@ If your server handles HTTP requests, you'll have to add your own security plumb
142142

143143
## Step 1: Install dependencies
144144

145-
Install `@angular/platform-server` into your project. Use the same version as the other `@angular` packages in your project. You also need `ts-loader` for your webpack build and `@nguniversal/module-map-ngfactory-loader` to handle lazy-loading in the context of a server-render.
145+
Install `@angular/platform-server` into your project. Use the same version as the other `@angular` packages in your project. You also need `ts-loader`, `webpack-cli` for your webpack build and `@nguniversal/module-map-ngfactory-loader` to handle lazy-loading in the context of a server-render.
146146

147-
```
148-
$ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader
149-
```
147+
<code-example language="sh" class="code-shell">
148+
$ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader webpack-cli
149+
</code-example>
150150

151151
## Step 2: Prepare your app
152152

@@ -325,6 +325,7 @@ import 'reflect-metadata';
325325

326326
import { renderModuleFactory } from '@angular/platform-server';
327327
import { enableProdMode } from '@angular/core';
328+
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
328329

329330
import * as express from 'express';
330331
import { join } from 'path';
@@ -342,10 +343,8 @@ const DIST_FOLDER = join(process.cwd(), 'dist');
342343
// Our index.html we'll use as our template
343344
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
344345

345-
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
346-
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
346+
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');
347347

348-
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
349348

350349
app.engine('html', (_, options, callback) => {
351350
renderModuleFactory(AppServerModuleNgFactory, {
@@ -437,23 +436,16 @@ node dist/server.js
437436
### Creating scripts
438437

439438
Now let's create a few handy scripts to help us do all of this in the future.
440-
You can add these in the `"server"` section of the Angular configuration file, `angular.json`.
439+
You can add these in the `"scripts"` section of the `package.json`.
441440

442441
<code-example format="." language="none" linenums="false">
443-
"architect": {
444-
"build": { ... }
445-
"server": {
446-
...
447-
"scripts": {
448-
// Common scripts
449-
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
450-
"serve:ssr": "node dist/server.js",
451-
452-
// Helpers for the scripts
453-
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
454-
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
455-
}
456-
...
442+
"scripts": {
443+
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
444+
"serve:ssr": "node dist/server.js",
445+
"build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
446+
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
447+
...
448+
}
457449
</code-example>
458450

459451
To run a production build of your app with Universal on your local system, use the following command.

0 commit comments

Comments
 (0)