如果发现任何无效的 URL，Angular 4 + 通用重定向到 404 页面答案

【问题标题】：Angular 4 + Universal Redirect to 404 page if found any invalid Url如果发现任何无效的 URL，Angular 4 + 通用重定向到 404 页面
【发布时间】：2017-09-25 08:38:38
【问题描述】：

我正在为我的应用程序使用 Angular 4 + 通用版本，如果发现某些未知 URL，则使用以下代码重定向到 404 页面。

  {
path: '',
component: FullLayoutComponent,
data: {
  title: 'Home'
},
children: [
  {
    path: '',
    loadChildren: 'app/core/components/static/static.module#StaticModule'
  },
  {
    path: 'move',
    loadChildren: 'app/core/components/move/move.module#MoveModule'
  },
  {
    path: 'account',
    loadChildren: 'app/core/components/account/account.module#AccountModule'
  },
  { path: "**",redirectTo:"404"}
]

}

对于任何未知的 URL，它都会重定向到 localhost:4200/404，但是如果我转到 URL localhost:4200，它也会将我重定向到 404。

任何线索肯定会有很大帮助。

谢谢

【问题讨论】：

标签： angular typescript angular-universal angular4-forms

【解决方案1】：

由于到目前为止的答案中缺少最重要的部分：您不仅应该进行重定向，还应该设置正确的状态代码。为此，您需要 Angular 代码中的请求对象。然后，您可以访问通常附加到请求的响应对象 - 至少在 express 中。

export class NotFoundComponent implements OnInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              @Optional() @Inject(RESPONSE) private response: Response) {
  }


  ngOnInit() {
    if (!isPlatformBrowser(this.platformId)) {
      this.response.status(404);
    }
  }

}

如果您使用的是 express 和 ng 通用 express 引擎，您可以像这样将请求和响应传递给依赖注入：

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    extraProviders: [
      // make req and response accessible when angular app runs on server
      <ValueProvider>{
        provide: REQUEST,
        useValue: options.req
      },
      <ValueProvider>{
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ]
  }).then(html => {
    callback(null, html);
  });
})

由于我自己只是偶然发现了这个问题，所以我在博客文章中记录了我的过程。如果您需要更多指导，请查看：

https://blog.thecodecampus.de/angular-universal-handle-404-set-status-codes/

【讨论】：

嗨 Can K，我添加了指定的代码，但我仍然收到状态 200 或状态 304。我意识到 inject.preload.js 有一个 GET 错误，但我不知道如何解决这个
我面临同样的问题，我有点困惑为什么这仅适用于服务器端而不适用于客户端。为什么在发送 404 之前检查它是否不是浏览器？我们不应该也从客户端发送 404 吗？
您不能在客户端发送 404 并且响应是可选的，if 检查也可以在响应中。如果我没记错的话，如果代码在客户端运行，响应将是未定义的。

【解决方案2】：

把你的代码改成如下-:

  {
path: '',
component: FullLayoutComponent,
data: {
 title: 'Home'
},
children: [
  {
   path: '',
   loadChildren:'app/core/components/static/static.module#StaticModule'
},
{
 path: 'move',
 loadChildren: 'app/core/components/move/move.module#MoveModule'
},
{
 path: 'account',
 loadChildren: 'app/core/components/account/account.module#AccountModule'
}

 ]
},

{ path: "**",redirectTo:"404"}

【讨论】：