标签: angular-universal

我想为搜索引擎优化我的网站.我用两种方式搜索了这个.

1路

使用angular 2 universal在服务器端渲染站点.我想这有点困难,我还没有学到这一点.

2种方法

使用https://prerender.io/.我想这很简单.

所以我的问题.什么用于搜索引擎优化它会更友好的搜索引擎和简单？有没有理由使用角度通用或https://prerender.io/就足够了？

对于不正确的问题可能感到抱歉,但我是新手,我想选择更好的方式.

我正在尝试编译这里基于示例项目创建的Angular 4 + ASP.NET Universal应用程序，使用此提示https://github.com/angular/universal#universal-gotchas 以及当我使用webpack构建项目时，然后运行它如果检查了块，则封装在其中的代码将引发错误

isPlatformBrowser

已在服务器端呈现。如何在不进行预渲染的情况下在客户端有效地强制执行此代码，而其他与服务器端预渲染正常工作的代码却要在服务器端进行预渲染？

这是我的组件，其传单代码封装在条件块中，用于检查平台是否为浏览器。

import {Component, OnInit, Inject} from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import * as L from 'leaflet';


@Component({
    selector: 'leaflet-map',
    templateUrl: 'leaflet-map.component.html',
    styleUrls: ['leaflet-map.component.css', '../../../..//node_modules/leaflet/dist/leaflet.css'],
})
export class LeafletMapComponent implements OnInit { 

    constructor(@Inject(PLATFORM_ID) private _platformId: Object) {  }

    ngAfterViewInit() { 


    }

    ngOnInit() {  
        if (isPlatformBrowser(this._platformId)) {
             L.map('leafletMap').setView([50.08, 19.93], 13);
        }
        if (isPlatformServer(this._platformId)) {
            // Server only code.
            // https://github.com/angular/universal#universal-gotchas
        }
    } …

我正在使用该示例使用nodejs和expressjs设置Angular 4 Universal:https: //github.com/FrozenPandaz/ng-universal-demo

我一直在尝试将数据从第一个完整页面加载传递到Angular 4 final应用程序.

用例是传输从标题中检测到的语言,以便从Angular 4服务器渲染器中吸收它,以便它可以使用正确的语言来翻译事物.

到目前为止,我发现的唯一方法是使用来自"/"路由的expressjs的HTTP头进行语言检测,并使用HTTP 302重定向到"/ fr",例如,如果用户语言是法语.

main.server.ts

app.param('language', function(req: any, res, next, language) {
  if(language.length == 2) 
  {
    req.language = language;
    next();
  } else {
    next(new Error('Invalid language found'));
  }
});

// Redirect incoming trafic without language in url (302 used so the browser do not seal that redirection if the user decides to change language and reload)
app.get('/', function(req, res) {   
  res.set('location', baseUrl + '/' + getLanguage(req);
  res.status(302).send();
}); …

我使用angular-cli创建了一个角度应用程序,并通过遵循此处给出的步骤在其中进行通用渲染.但有人提到,如果我正在进行通用渲染,我不能在我的应用程序中使用全局变量,如窗口和文档,如何在前端设置cookie以维护用户会话.以前我使用JWT,但为此我需要在浏览器中设置cookie.

我在nodejs app上集成了newrelic,用angular universal制作.我正在使用webpack进行捆绑

main.server.aot.ts中的第一行

const newrelic = require('newrelic');

并在根目录中添加了newrelic.js.

正在运行的构建弹出以下错误: -

ERROR in ./node_modules/@newrelic/native-metrics/lib/pre-build.js
Module not found: Error: Can't resolve '../package' in 'D:\repos\ib-mobile\node_modules\@newrelic\native-metrics\lib'
 @ ./node_modules/@newrelic/native-metrics/lib/pre-build.js 40:12-33
 @ ./node_modules/@newrelic/native-metrics/index.js
 @ ./node_modules/newrelic/lib/sampler.js
 @ ./node_modules/newrelic/lib/agent.js
 @ ./node_modules/newrelic/index.js
 @ ./src/main.server.aot.ts

ERROR in ./node_modules/node-gyp/lib/node-gyp.js
Module not found: Error: Can't resolve '../package' in 'D:\repos\ib-mobile\node_modules\node-gyp\lib'
 @ ./node_modules/node-gyp/lib/node-gyp.js 67:16-37
 @ ./node_modules/@newrelic/native-metrics/lib/pre-build.js
 @ ./node_modules/@newrelic/native-metrics/index.js
 @ ./node_modules/newrelic/lib/sampler.js
 @ ./node_modules/newrelic/lib/agent.js
 @ ./node_modules/newrelic/index.js
 @ ./src/main.server.aot.ts

ERROR in ./node_modules/newrelic/index.js
Module not found: Error: Can't resolve './package' in 'D:\repos\ib-mobile\node_modules\newrelic'
 @ ./node_modules/newrelic/index.js …

Run Code Online (Sandbox Code Playgroud)

我的角度通用项目中有多个组件。当我从home组件路由到其他组件时，我只会在页面源中获取home组件的内容。路由组件未更新它。

我已经通过服务器端的console.log检查了是否每个组件都在服务器端呈现，但是它只是加载主页，其他组件没有在服务器端呈现。

我使用npm run build：ssr进行构建，使用npm run serve：ssr进行服务器端服务。

在cmd或浏览器控制台中运行上述命令时，也没有错误。

有人可以帮忙吗？我在这个问题上停留了大约一个星期。

如果您需要有关该项目的其他信息，请告诉我。

Package.json

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.8",
    "@angular/router": "^5.2.0",
    "@ngu/carousel": "^1.4.8",
    "@nguniversal/express-engine": "^5.0.0-beta.6",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.6",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-nouislider": "^1.7.7",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "nouislider": "^11.0.3",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "ts-loader": "^3.5.0",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60", …

我打算将Angular Universal用于服务器端渲染（SSR），但这仅应用于来自选定搜索引擎的爬虫和漫游器。

我想要的是以下架构：

来源：https : //dingyuliang.me/use-prerender-improve-angularjs-seo/

按照官方指示设置SSR之后，我现在可以验证Googlebot（最终）是否“看到”了我的网站并且应该能够对其进行索引。

但是，目前所有请求都在服务器上呈现。有没有一种方法可以确定传入的请求是否来自搜索引擎，并仅为它们预渲染网站？

我正在尝试将angular 7网站部署到无服务器的AWS上。刚开始时，我遵循了本教程：https : //coursetro.com/posts/code/165/Deploying-your-Angular-App-to-a-Serverless-Environment-

部署后，我的url附加了一个额外的“ production / ”，我认为这是由于我的base-href设置所致。

这会导致不必要的重定向到404。有人知道如何避免这种情况吗？ 导航菜单效果很好

输入的网址：

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production

加载后：

https://7z48go76gd.execute-api.ap-southeast-1.amazonaws.com/production/production

我尝试过环境.prod.ts，environment.serverless.ts以及具有不同变体但没有运气的package.json文件。

environment.serverless.ts / environment.prod.ts：

export const environment = {
  production: true,
  BASE_URL: 'https://tj2rdz0qn1.execute-api.ap-southeast-1.amazonaws.com/production',
  // when you deploy your app to your own server you should replace the BASE_URL with the target domain for example:
  // BASE_URL: 'https://site-preview.angular-templates.io',
  baseHref: '/'
};

package.json：

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint crc-web",
    "build:client-and-server-bundles": "ng build --prod && ng run crc-web:server:production",
    "build:ssr": "npm …

我的服务人员没有缓存我的静态资产。

在线使用Chrome DevTools时，ServiceWorker似乎正在运行。我看到styles.xxx.css，runtime.xxx.js，polyfills.xxx.js和main.xxx.js的行，其大小列为“来自Service Worker”。然后，在以后的行中，这些相同的文件以“来自磁盘缓存”的大小列出。

在“ Chrome DevTools应用程序”选项卡的“缓存存储”部分下，我具有以下行：

ngsw：db：control- http ://127.0.0.1: 8080

ngsw：xxx：资产：app：缓存-http://127.0.0.1: 8080

ngsw：xxx：assets：app：meta- http : //127.0.0.1 : 8080

单击最后两行不会在DevTools的“路径”部分中显示任何内容。

ngws-worker.js的状态为“已激活，正在运行”。它是“ Received 12/31/1969”，很奇怪。

然后，当我离线时，没有显示服务人员。缓存存储为空。最后一个网络行显示ngsw.json？ngsw-cache-bust = xxx状态（失败）键入fetch Initiator ngsw-worker.js：2662。

我的package.json脚本是（我从AngularFirebasePro复制的）

"webpack:prerender": "webpack --config webpack.prerender.config.js",
"build:prerender": "node dist/abogado/prerender.js",
"serve:prerender": "http-server dist/abogado -o",
"build:all": "ng build --prod && ng run abogado:server && npm run 
webpack:prerender && npm run build:prerender"

在angular.json我有

"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/abogado-server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": …