要通过Angular Universal实现SEO,可以按照以下步骤进行:
ng add @nguniversal/express-engine
安装完毕后,会在项目的根目录下生成一个名为server.ts
的文件。打开该文件并确保已经配置了正确的路由。
在app.module.ts
文件中导入ServerModule
和ModuleMapLoaderModule
:
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
@NgModule({
imports: [
// ...
ServerModule,
ModuleMapLoaderModule,
],
// ...
})
export class AppServerModule { }
main.ts
文件中使用platformBrowserDynamic().bootstrapModule(AppModule)
替换为platformBrowserDynamic().bootstrapModule(AppServerModule)
:import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppServerModule)
.catch(err => console.error(err));
});
tsconfig.server.json
文件中,确保已经正确配置了编译选项:{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "./out-tsc/app-server",
"baseUrl": "./",
"module": "commonjs",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
"angularCompilerOptions": {
"entryModule": "./src/app/app.server.module#AppServerModule"
}
}
server
的文件夹,并在该文件夹中创建一个名为main.ts
的文件。该文件将用于启动服务器:import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
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');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
LAZY_MODULE_MAP
]
}));
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
app.use(express.static(DIST_FOLDER, {
index: false,
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req, res });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
package.json
文件中添加以下命令:"scripts": {
// ...
"build:ssr": "npm run build && npm run build:server",
"build:server": "ng run [your-project-name]:server",
"serve:ssr": "node dist/server/main.js",
// ...
}
然后使用以下命令构建和启动服务器:
npm run build:ssr
npm run serve:ssr
这样就可以通过Angular Universal实现SEO了。
请注意,以上代码示例是基于Angular 9和Angular Universal的。如果您使用的是其他版本,请根据实际情况进行相应的调整。