Angular Universal là gì

This Angular Universal chỉ dành cho Angular 2. Nếu bạn muốn bắt đầu lại từ đầu, bạn có thể sử dụng Angular 4 Universal Seed có tất cả các tính năng như:

• Góc 4
• Gói web
• chế độ dev/prod
• Biên dịch SCSS
• i18n, SEO và TSLint/codelyzer
• lười tải, cấu hình, cache

Hoặc nếu bạn đã có Angular 4 dự án đang chạy, bạn có thể Tích hợp Universal bằng cách thực hiện các cài đặt sau trong mã của mình:

Cài đặt các gói này:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest [emailprotected] --save

npm install express @types/express --save-dev

Thêm phần này vào tệp app.module.ts của bạn

import { BrowserModule } from '@angular/platform-browser'; BrowserModule.withServerTransition[{ appId: 'my-app-id' // withServerTransition is available only in Angular 4 }],

Tạo các tệp sau

src/uni/app.server.ts

import { NgModule } from '@angular/core'; import { APP_BASE_HREF } from '@angular/common'; import { ServerModule } from '@angular/platform-server'; import { AppComponent } from '../app/app'; import { AppModule } from '../app/app.module'; import 'reflect-metadata'; import 'zone.js'; @NgModule[{ imports: [ ServerModule, AppModule ], bootstrap: [ AppComponent ], providers: [ {provide: APP_BASE_HREF, useValue: '/'} ] }] export class AppServerModule { }

src/uni/server-uni.ts

import 'zone.js/dist/zone-node'; import 'zone.js'; import 'reflect-metadata'; import { enableProdMode } from '@angular/core'; import { AppServerModuleNgFactory } from '../../aot/src/uni/app.server.ngfactory'; import * as express from 'express'; import { ngUniversalEngine } from './universal-engine'; enableProdMode[]; const server = express[]; // set our angular engine as the handler for html files, so it will be used to render them. server.engine['html', ngUniversalEngine[{ bootstrap: [AppServerModuleNgFactory] }]]; // set default view directory server.set['views', 'src']; // handle requests for routes in the app. ngExpressEngine does the rendering. server.get[['/', '/dashboard', '/heroes', '/detail/:id'], [req:any, res:any] => { res.render['index.html', {req}]; }]; // handle requests for static files server.get[['/*.js', '/*.css'], [req:any, res:any, next:any] => { let fileName: string = req.originalUrl; console.log[fileName]; let root = fileName.startsWith['/node_modules/'] ? '.' : 'src'; res.sendFile[fileName, { root: root }, function [err:any] { if [err] { next[err]; } }]; }]; // start the server server.listen[3200, [] => { console.log['listening on port 3200...']; }];

src/uni/Universal-engine.ts

import * as fs from 'fs'; import { renderModuleFactory } from '@angular/platform-server'; const templateCache = {}; // cache for page templates const outputCache = {}; // cache for rendered pages export function ngUniversalEngine[setupOptions: any] { return function [filePath: string, options: { req: Request }, callback: [err: Error, html: string] => void] { let url: string = options.req.url; let html: string = outputCache[url]; if [html] { // return already-built page for this url console.log['from cache: ' + url]; callback[null, html]; return; } console.log['building: ' + url]; if [!templateCache[filePath]] { let file = fs.readFileSync[filePath]; templateCache[filePath] = file.toString[]; } // render the page via angular platform-server let appModuleFactory = setupOptions.bootstrap[0]; renderModuleFactory[appModuleFactory, { document: templateCache[filePath], url: url }].then[str => { outputCache[url] = str; callback[null, str]; }]; }; }

Thêm cấu hình bên dưới trong tệp tsconfig.ts mà tôi giả sử nằm trong thư mục gốc

{ "compilerOptions": { "baseUrl": "", "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es2016", "dom"], "moduleResolution": "node", "outDir": "./dist/out-tsc", "sourceMap": true, "target": "es5", "module": "commonjs", "types": ["node"], "typeRoots": [ "node_modules/@types" ] }, "files": [ "src/uni/app.server.ts", "src/uni/server-uni.ts" ], "angularCompilerOptions": { "genDir": "aot", "entryModule": "./src/app/app.module#AppModule", "skipMetadataEmit": true }, "exclude": [ "test.ts", "**/*.spec.ts" ] }

Atlast webpack.config.uni.js trong thư mục gốc

const ngtools = require['@ngtools/webpack']; const webpack = require['webpack']; const path = require['path']; const ExtractTextWebpackPlugin = require["extract-text-webpack-plugin"]; module.exports = { devtool: 'source-map', entry: { main: ['./src/uni/app.server.ts', './src/uni/server-uni.ts'] }, resolve: { extensions: ['.ts', '.js'] }, target: 'node', output: { path: path.join[__dirname, "dist"], filename: 'server.js' }, plugins: [ new ngtools.AotPlugin[{ tsConfigPath: './tsconfig.json' }] ], module: { rules: [ { test: /\.[scss|html|png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico]$/, use: 'raw-loader' }, { test: /\.ts$/, loader: require.resolve['@ngtools/webpack'] }, { test: /\.[png|jpg|woff|woff2|eot|ttf|svg][\?v=[0-9]\.[0-9]\.[0-9]]?$/, loader: 'url?limit=512&&name=[path][name].[ext]?[hash]' }, { test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] } ] } }

Thêm tập lệnh bên dưới vào tệp package.json:

"ngc-build": "ngc -p ./tsconfig.json", // To generate ngFactory file "build:uni": "webpack --config webpack.config.uni.js", "serve:uni": "node dist/server.js",

Có một số điều mà chúng ta nên ghi nhớ:

• window, document, navigator và các loại trình duyệt khác - không tồn tại trên máy chủ - vì vậy sử dụng chúng hoặc bất kỳ thư viện nào sử dụng chúng [ví dụ jQuery] sẽ không hoạt động. Bạn có một số tùy chọn được đưa ra trong liên kết này nếu bạn thực sự cần một số chức năng này.