angular - Angular 中未使用预渲染
问题描述
我一直在尝试让 Prerender.io 在示例 Angular 6 项目中工作但没有成功。
我成功地通过 Express 为应用程序提供服务,但是页面没有被预呈现。
以下是重要文件(我现在找不到我丢失的文件):
包.json
{
"name": "angular-prerender-sample",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build && node server.ts",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
"express": "^4.16.3",
"prerender-node": "^3.2.1",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularPrerenderSample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>winsun - intelligente energielösungen - Steg, Chur, Baar, Vaduz, Schaffhausen, Eischoll</title>
<meta name="description" content="winsun - intelligente energielösungen in Steg, Chur, Baar, Vaduz, Schaffhausen, Eischoll">
<meta name="keywords" content="winsun, solar, intelligente energielösungen, energie, sonne, wallis, schweiz, steg, chur, baar, vaduz, schaffhausen, eischoll">
<base href="/">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@winsun_AG">
<meta name="twitter:title" content="winsun AG">
<meta name="twitter:description" content="winsun - intelligente energielösungen in Steg, Chur, Baar, Vaduz, Schaffhausen, Eischoll">
<meta name="twitter:image" content="https://winsun.ch/assets/img/logo.jpg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="winsun AG">
<meta property="og:title" content="winsun AG">
<meta property="og:description" content="winsun - intelligente energielösungen in Steg, Chur, Baar, Vaduz, Schaffhausen, Eischoll">
<meta property="og:image" content="https://winsun.ch/assets/img/logo.jpg">
<meta property="og:url" content="https://winsun.ch">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({
appId: 'angular-prerender-sample'
}),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
服务器.ts
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 8000;
const project_name = 'angular-prerender-sample';
/* Prerender.io */
const prerender = require('prerender-node').set('prerenderToken', process.env.PRERENDER_TOKEN);
prerender.crawlerUserAgents.push('googlebot');
prerender.crawlerUserAgents.push('bingbot');
prerender.crawlerUserAgents.push('yandex');
app.use(prerender);
/* Serve the static files generated by the CLI (index.html, CSS? JS, assets...) */
app.use(express.static(`${__dirname}/dist/${project_name}`));
app.listen(port, () => {
console.log(`Starting the server at port ${port}`);
});
任何帮助是极大的赞赏。
解决方案
看起来您使用的是 prerender-node 的 3.2.1 版本,因此您可以删除这些行:
prerender.crawlerUserAgents.push('googlebot');
prerender.crawlerUserAgents.push('bingbot');
prerender.crawlerUserAgents.push('yandex');
这些用户代理默认包含在 v3.2.1 中。
当您运行 server.ts 文件,然后使用 Googlebot 用户代理访问 URL 时,您是否看到返回的预呈现页面?如果您在开发环境中进行测试,则需要运行我们的开源 Prerender 服务器并导出PRERENDER_SERVICE_URL
到http://localhost:3000/以便它在本地运行。
你可以在这里找到更多信息:https ://github.com/prerender/prerender
如果您没有看到返回的预呈现页面,那么该 server.ts 文件是否实际上在为每个请求提供 index.html 文件,或者您是否也为您的 API 运行了另一台服务器?
请随时通过 support@prerender.io 给我们发送电子邮件,我们很乐意为您提供帮助!
推荐阅读
- android - 是否需要在通知生效之前将 APK 上传到 Google Play?
- angular - 试图让 Angular 2 在渲染之前等待数据加载
- verilog - Verilog 中的 10:1024 位解码器
- sql - 自定义范围增量 SQL 列
- ms-access - 在设计视图中打开查询,编辑,然后提取结果
- clojure - 如何在 Clojure 中计算数组中的映射?
- python - 将数据框转出到单行,其中列标有前缀
- java - 在这种方法中递归是如何工作的?
- git - 如何使用 Bitbucket REST API 删除分支
- .net - 什么是 .NET Core 等效的 Windows 服务