我正在为我的应用程序使用Angular 4 + universal,如果找到一些未知的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"}
]
}
它会重定向到localhost:4200/404以查找任何未知的URL,但如果我转到URL localhost:4200,那么它也会将我重定向到404。
任何线索肯定会有很大的帮助。
由于
答案 0 :(得分:2)
由于到目前为止答案中缺少最重要的部分:您不仅应该进行重定向,还要设置正确的状态代码。为此,您需要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通用快速引擎,您可以将请求和响应传递给依赖注入,如下所示:
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/
答案 1 :(得分:0)
将您的代码更改为: -
{
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"}