angular ssr 访问不存在的地址时响应 404 状态码

angular 启用 ssr 之后,访问一个不存在的地址时响应中的状态码也是 200,这可能会导致搜索引擎收录 404 页面,不利于 SEO。

解决这个问题要从 SSR 的原理开始,

node(express 服务) > angular 路由 > angular 对应的模块 > 有可能请求后端服务获取数据 > 渲染页面 -> 生成响应返回

那么解决办法其实很简单,就是当 angular 路由解析到这是一个 404 页面时,在生成响应的那步设置 response status code 为 404 即可。

  1. server.ts 中传递requestresponse对象
app.get('*', (req, res) => {
  res.render('index', { req, res }); /* 注入 (req,res)并传递给后面的管道 */
});
  1. 添加一个用于 404 的 componentng g c PageNotFound
    在 angular 路由中设置页面所有未匹配到的地址到这个component
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'release', component: ReleaseComponent },
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent } /* 用统配符 **  */
];
  1. 接下来在page-not-found.component.ts中设置Response的状态码即可
import { Component, OnInit } from '@angular/core';
import { ServerResponseService } from '../services/server-response';

@Component({
  selector: 'app-page-not-found',
  templateUrl: './page-not-found.component.html',
  styleUrls: ['./page-not-found.component.css'],
})
export class PageNotFoundComponent implements OnInit {

  constructor(private svc: ServerResponseService) {

  }

  ngOnInit() {
    this.svc.setNotFound(); /* 这里 ServerResponseService 是咱们手动封装的服务
  }

}

ServiceResponseService.ts

import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Inject, Injectable, Optional } from '@angular/core';

@Injectable()

export class ServerResponseService {
    constructor(
        @Optional() @Inject(RESPONSE) private response: any /* 通过注入拿到前面第一步传进来的 Response */
    ) {
    }

    public setNotFound(message: string = 'not found') {
        if (this.response) {
            this.response.statusCode = 404;
            this.response.statusMessage = message;
        }
    }
}

验证结果如下

posted @ 2019-08-24 07:04  蝌蝌  阅读(296)  评论(0编辑  收藏  举报