在 Angular 9 中实现通用和 SEO 可以使用以下步骤:
创建一个 Angular 9 项目:
ng new angular-universal-seo
进入项目目录:
cd angular-universal-seo
安装 Angular Universal:
ng add @nguniversal/express-engine
生成一个通用组件:
ng generate component universal
在 src/app/universal/universal.component.ts
中添加以下代码示例:
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-universal',
templateUrl: './universal.component.html',
styleUrls: ['./universal.component.css']
})
export class UniversalComponent implements OnInit {
constructor(private title: Title, private meta: Meta) { }
ngOnInit() {
this.title.setTitle('Angular Universal SEO');
this.meta.addTags([
{ name: 'description', content: 'Angular 9 Universal and SEO' },
{ name: 'keywords', content: 'Angular, Universal, SEO' }
]);
}
}
在 src/app/universal/universal.component.html
中添加以下代码示例:
Angular Universal SEO
This is an example of Angular 9 Universal and SEO.
在 src/app/app.module.ts
中导入和声明 UniversalComponent
:
import { BrowserModule, Meta, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UniversalComponent } from './universal/universal.component';
@NgModule({
declarations: [
AppComponent,
UniversalComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
Meta,
Title
],
bootstrap: [AppComponent]
})
export class AppModule { }
在 src/app/app.component.html
中添加
:
在 src/main.server.ts
中添加以下代码示例:
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
enableProdMode();
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
构建 Angular 9 项目:
ng build --prod
构建 Angular 9 Universal 项目:
npm run build:ssr
运行 Angular 9 Universal 项目:
npm run serve:ssr
现在,你的 Angular 9 项目将具有通用和 SEO 功能。当你访问 http://localhost:4000 时,将显示包含标题和 meta 标签的页面。这将有助于搜索引擎优化和社交媒体分享。