Skip to content

docs(aio): Upgrade server-side rendering example to Angular V6 #23649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
brandonroberts wants to merge 1 commit into from
Closed

docs(aio): Upgrade server-side rendering example to Angular V6 #23649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions aio/content/examples/universal/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

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

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
Expand Down Expand Up @@ -51,7 +51,7 @@ app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
// #docregion navigation-request
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });

@vikerman vikerman May 2, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we no longer looking for the index.html as part of the DIST_FOLDER?

@brandonroberts brandonroberts May 2, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change was based off the universal-starter upgrade to V6. Did fix the change from index.html to index

res.render('index', { req });
});
// #enddocregion navigation-request

Expand Down
3 changes: 2 additions & 1 deletion aio/content/examples/universal/webpack.server.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/(node_modules|main\..*\.js)/],
externals: [/node_modules/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
Expand Down
10 changes: 5 additions & 5 deletions aio/content/guide/universal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,9 +442,9 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
<code-example format="." language="ts">
"scripts": {
...
"build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:universal": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
...
}
Expand All @@ -457,7 +457,7 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
From the command prompt, type

<code-example format="." language="bash">
npm run build:universal
npm run build:ssr
</code-example>

The Angular CLI compiles and bundles the universal app into two different folders, `browser` and `server`.
Expand All @@ -469,7 +469,7 @@ Webpack transpiles the `server.ts` file into Javascript.
After building the application, start the server.

<code-example format="." language="bash">
npm run serve:universal
npm run serve:ssr
</code-example>

The console window should say
Expand Down
4 changes: 2 additions & 2 deletions aio/tools/example-zipper/customizer/package-json/base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@
"@angular/animations",
"@angular/common",
"@angular/compiler",
"@angular/compiler-cli",
"@angular/core",
"@angular/forms",
"@angular/http",
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/platform-server",
"@angular/router",
"@angular/upgrade",
"angular-in-memory-web-api",
Expand All @@ -21,6 +19,8 @@
"zone.js"
],
"devDependencies": [
"@angular/compiler-cli",
"@angular/platform-server",
"@types/jasmine",
"@types/node",
"jasmine-core",
Expand Down
9 changes: 5 additions & 4 deletions aio/tools/example-zipper/customizer/package-json/universal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,20 @@
{ "name": "e2e", "command": "ng e2e" },
{ "name": "build:ssr", "command": "npm run build:client-and-server-bundles && npm run webpack:server" },
{ "name": "serve:ssr", "command": "node dist/server.js" },
{ "name": "build:client-and-server-bundles", "command": "ng build --prod && ng build --prod --app 1 --output-hashing=false" },
{ "name": "build:client-and-server-bundles", "command": "ng build --prod && ng run angular.io-example:server" },
{ "name": "webpack:server", "command": "webpack --config webpack.server.config.js --progress --colors" }
],
"dependencies": [
"@nguniversal/express-engine",
"@nguniversal/module-map-ngfactory-loader",
"ts-loader"
"@nguniversal/module-map-ngfactory-loader"
],
"devDependencies": [
"@angular/cli",
"@types/jasminewd2",
"jasmine-spec-reporter",
"karma-coverage-istanbul-reporter",
"ts-node"
"ts-loader",
"ts-node",
"webpack-cli"
]
}
6 changes: 3 additions & 3 deletions aio/tools/example-zipper/exampleZipper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ class ExampleZipper {
}

// rename a custom main.ts or index.html file
_renameFile(file) {
if (/src\/main[-.]\w+\.ts$/.test(file)) {
_renameFile(file, exampleType) {
if (/src\/main[-.]\w+\.ts$/.test(file) && exampleType !== 'universal') {
return 'src/main.ts';
}

Expand Down Expand Up @@ -158,7 +158,7 @@ class ExampleZipper {
let zip = this._createZipArchive(outputFileName);
fileNames.forEach((fileName) => {
let relativePath = path.relative(exampleDirName, fileName);
relativePath = this._renameFile(relativePath);
relativePath = this._renameFile(relativePath, exampleType);
let content = fs.readFileSync(fileName, 'utf8');
let extn = path.extname(fileName).substr(1);
// if we don't need to clean up the file then we can do the following.
Expand Down
2 changes: 1 addition & 1 deletion aio/tools/examples/example-boilerplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ BOILERPLATE_PATHS.i18n = [

BOILERPLATE_PATHS.universal = [
...cliRelativePath,
'.angular-cli.json',
'angular.json',
'package.json'
];

Expand Down
2 changes: 1 addition & 1 deletion aio/tools/examples/example-boilerplate.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ describe('example-boilerplate tool', () => {
);
// for example
expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', '../cli/tslint.json');
expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', '.angular-cli.json');
expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', 'angular.json');
expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'c/d', 'src/styles.css');
});

Expand Down
84 changes: 0 additions & 84 deletions aio/tools/examples/shared/boilerplate/universal/.angular-cli.json
View file
Open in desktop

This file was deleted.

156 changes: 156 additions & 0 deletions aio/tools/examples/shared/boilerplate/universal/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular.io-example": {
"root": "",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
}
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular.io-example:build"
},
"configurations": {
"production": {
"browserTarget": "angular.io-example:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular.io-example:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css"
],
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
}
},
"angular.io-example-e2e": {
"root": "",
"projectType": "application",
"cli": {},
"schematics": {},
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "angular.io-example:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"cli": {},
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
Loading