honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

PR Close #23649
This commit is contained in:
Brandon Roberts 2018-05-02 07:13:32 -05:00 committed by Igor Minar
parent b45fa5e263
commit 2cf6244b1d
13 changed files with 2000 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/examples/universal/server.ts
View File

@ -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';
@ -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 });
res.render('index', { req });
});
// #enddocregion navigation-request

3
aio/content/examples/universal/webpack.server.config.js
View File

@ -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'

10
aio/content/guide/universal.md
View File

@ -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"
...
}
@ -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`.
@ -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

4
aio/tools/example-zipper/customizer/package-json/base.json
View File

@ -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",
@ -21,6 +19,8 @@
"zone.js"
],
"devDependencies": [
"@angular/compiler-cli",
"@angular/platform-server",
"@types/jasmine",
"@types/node",
"jasmine-core",

9
aio/tools/example-zipper/customizer/package-json/universal.json
View File

@ -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
aio/tools/example-zipper/exampleZipper.js
View File

@ -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';
}
@ -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.

2
aio/tools/examples/example-boilerplate.js
View File

@ -57,7 +57,7 @@ BOILERPLATE_PATHS.i18n = [
BOILERPLATE_PATHS.universal = [
...cliRelativePath,
'.angular-cli.json',
'angular.json',
'package.json'
];

2
aio/tools/examples/example-boilerplate.spec.js
View File

@ -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');
});

84
aio/tools/examples/shared/boilerplate/universal/.angular-cli.json
View File

@ -1,84 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular.io-example"
},
"apps": [
{
"root": "src",
"outDir": "dist/browser",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"platform": "server",
"root": "src",
"outDir": "dist/server",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}

156
aio/tools/examples/shared/boilerplate/universal/angular.json Normal file
View File

@ -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"
}
}
}

75
aio/tools/examples/shared/boilerplate/universal/package.json
View File

@ -11,49 +11,52 @@
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",
"@nguniversal/express-engine": "^1.0.0-beta.3",
"@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"ts-loader": "^3.1.1",
"@angular/animations": "^6.0.0-rc.5",
"@angular/common": "^6.0.0-rc.5",
"@angular/compiler": "^6.0.0-rc.5",
"@angular/core": "^6.0.0-rc.5",
"@angular/forms": "^6.0.0-rc.5",
"@angular/http": "^6.0.0-rc.5",
"@angular/platform-browser": "^6.0.0-rc.5",
"@angular/platform-browser-dynamic": "^6.0.0-rc.5",
"@angular/router": "^6.0.0-rc.5",
"angular-in-memory-web-api": "^0.6.0",
"@nguniversal/common": "6.0.0-rc.2",
"@nguniversal/express-engine": "6.0.0-rc.2",
"@nguniversal/module-map-ngfactory-loader": "6.0.0-rc.2",
"core-js": "^2.5.4",
"rxjs": "6.0.0-uncanny-rc.7",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.14"
"zone.js": "^0.8.24"
},
"devDependencies": {
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.8.0",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"@angular/cli": "~6.0.0-rc.4",
"@angular/compiler-cli": "^6.0.0-rc.5",
"@angular/language-service": "^6.0.0-rc.5",
"@angular/platform-server": "^6.0.0-rc.5",
"@angular-devkit/build-angular": "~0.5.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "^0.3.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
"protractor": "~5.3.0",
"ts-loader": "^4.2.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2",
"webpack-cli": "^2.1.2"
}
}

13
aio/tools/examples/shared/package.json
View File

@ -21,30 +21,29 @@
"@angular/animations": "^6.0.0-rc.5",
"@angular/common": "^6.0.0-rc.5",
"@angular/compiler": "^6.0.0-rc.5",
"@angular/compiler-cli": "^6.0.0-rc.5",
"@angular/core": "^6.0.0-rc.5",
"@angular/forms": "^6.0.0-rc.5",
"@angular/http": "^6.0.0-rc.5",
"@angular/platform-browser": "^6.0.0-rc.5",
"@angular/platform-browser-dynamic": "^6.0.0-rc.5",
"@angular/platform-server": "^6.0.0-rc.5",
"@angular/router": "^6.0.0-rc.5",
"@angular/service-worker": "^6.0.0-rc.5",
"@angular/upgrade": "^6.0.0-rc.5",
"@nguniversal/express-engine": "^1.0.0-beta.3",
"@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
"@nguniversal/express-engine": "6.0.0-rc.2",
"@nguniversal/module-map-ngfactory-loader": "6.0.0-rc.2",
"angular-in-memory-web-api": "^0.6.0",
"core-js": "^2.5.4",
"express": "^4.14.1",
"rxjs": "6.0.0-uncanny-rc.7",
"systemjs": "0.19.39",
"ts-loader": "^3.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.24"
},
"devDependencies": {
"@angular/cli": "6.0.0-rc.4",
"@angular/compiler-cli": "^6.0.0-rc.5",
"@angular/language-service": "^6.0.0-rc.5",
"@angular/platform-server": "^6.0.0-rc.5",
"@angular-devkit/build-angular": "~0.5.0",
"@types/angular": "^1.5.16",
"@types/angular-animate": "^1.5.5",
@ -85,9 +84,11 @@
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"source-map-explorer": "^1.3.2",
"ts-loader": "^4.2.0",
"ts-node": "^5.0.1",
"tslint": "^5.9.1",
"typescript": "2.7.2"
"typescript": "2.7.2",
"webpack-cli": "^2.0.14"
},
"repository": {}
}

1858
aio/tools/examples/shared/yarn.lock
View File

File diff suppressed because it is too large Load Diff