要实现“Angular通用水合”,可以按照以下步骤进行操作:
创建一个Angular项目:
ng new my-app
安装Angular通用模块:
npm install @angular/platform-server --save
创建一个新的Angular组件:
ng generate component my-component
在my-component.component.ts
文件中,导入Angular的PlatformServer
模块,并实现通用水合逻辑:
import { Component, OnInit } from '@angular/core';
import { PlatformServer } from '@angular/platform-server';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private platform: PlatformServer) { }
ngOnInit(): void {
if (this.platform.isBrowser) {
// 在浏览器中执行的逻辑
} else {
// 在服务器中执行的逻辑
}
}
}
在my-component.component.html
模板文件中,根据需要添加HTML内容。
在应用的根模块中,导入ServerModule
并将其添加到imports
数组中,以启用Angular通用功能:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [
AppComponent,
MyComponentComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'my-app' }),
ServerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
构建Angular项目:
ng build --prod
使用Node.js创建一个服务器脚本(例如server.js
),在其中引入Angular的renderModuleFactory
函数,并创建一个Express服务器来处理请求:
const express = require('express');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/my-app-server/main');
const server = express();
server.get('*', (req, res) => {
renderModuleFactory(AppServerModuleNgFactory, {
url: req.url,
document: ' '
}).then(html => {
res.send(html);
});
});
server.listen(4000, () => {
console.log('Angular Universal server is running on port 4000');
});
启动服务器:
node server.js
现在,你的Angular应用程序就具备了通用水合的功能。当浏览器访问服务器时,服务器将首先执行你在ngOnInit
方法中定义的服务器逻辑,并将生成的HTML发送给浏览器进行渲染。这样可以提高应用程序的性能和SEO友好性。