我已经尝试了一段时间,以使Prerender.io在示例Angular 6项目中工作而没有成功。
我已成功通过Express服务该应用程序,但是该页面未呈现。
这是重要的文件(我现在找不到我所缺少的文件):
package.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" } }
index.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 { }
server.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}`); });
任何帮助是极大的赞赏。