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ư:
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 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/Universal-engine.ts 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ớ:
|