Prerender не используется в Angular - PullRequest
Новая
       9

Prerender не используется в Angular

0 голосов
/ 19 сентября 2018

Я уже некоторое время пытаюсь заставить 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}`);
});

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 20 сентября 2018

Похоже, что вы находитесь на версии 3.2.1 prerender-node, поэтому вы можете удалить эти строки: 

prerender.crawlerUserAgents.push('googlebot');
prerender.crawlerUserAgents.push('bingbot');
prerender.crawlerUserAgents.push('yandex');

Эти пользовательские агенты включены по умолчанию в v3.2.1.

Когда вы запускаете свой файл server.ts, затем обращаетесь к URL с помощью пользовательского агента Googlebot. Вы видите возвращаемую предварительно обработанную страницу?Если вы тестируете в своей среде разработки, вам нужно запустить наш сервер Prerender с открытым исходным кодом и экспортировать PRERENDER_SERVICE_URL в http://localhost:3000/, чтобы все это работало локально.

Вы можете найти больше информациина этом здесь: https://github.com/prerender/prerender

Если вы не видите возвращенную предварительно обработанную страницу, является ли этот файл server.ts фактически обслуживающим файл index.html при каждом запросе, или у вас работает другой сервер для вашегоAPI тоже?

Не стесняйтесь, напишите нам на support@prerender.io, и мы будем рады помочь!

...