Handle 404 server code response #19
Comments
|
The simple way to achieve that:
Gotcha: the request injection should be optional because it will be underfined in browser bundle/side. I will write an example soon to illustrate this usecase. |
|
I would like an example indeed, since i can't make it work either with RESPONSE or REQUEST token, as you describe above. I've seen output errors in my console about dependencies which seems to be only for server purpose (like express), maybe angular-cli related ? It seems to be similar to this issue. |
|
@maxgranier About the issue that you linked: do you think that you encountered that issue? |
|
Hi, This is what i tried so far : import { Component, OnInit, Optional, PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';
@Component({
selector: 'app-not-found',
templateUrl: './not-found.component.html',
styleUrls: ['./not-found.component.less']
})
export class NotFoundComponent implements OnInit {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string,
@Optional() @Inject(RESPONSE) private response: Response
) { }
ngOnInit() {
if (!isPlatformBrowser(this.platformId)) {
this.response.status(404);
}
}
}And i got this output errors from the console : It seems to happen when i try to inject Response from express. |
|
@maxgranier Below some information which can help to fix your issue. In the commit, we use NotFoundComponent when browser hit special route The most important part on the server side is to provide RenderOptions api.get('*', (req, res) => res.render('index', { req, res }));The second important part is to design your angular project in an universal way. The import { Component, OnInit, Optional, PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
interface PartialResponse {
status(code: number): this;
}
@Component({
selector: 'app-not-found',
template: '<h1>Page Not Found</h1>',
})
export class NotFoundComponent implements OnInit {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string,
@Optional() @Inject(RESPONSE) private response: PartialResponse,
) { }
ngOnInit() {
if (isPlatformServer(this.platformId) && this.response) {
this.response.status(404);
}
}
}Of course, in real application, setting response status must be accomplish with a service. @Injectable()
export class HttpContextService {
constructor(
@Optional() @Inject(REQUEST) readonly request: PartialRequest,
@Optional() @Inject(RESPONSE) readonly response: PartialResponse,
) { }
setStatusCode(code: number) {
if (this.response) {
this.response.status(code);
}
}
} |
|
Really helpful, thanks a lot, also for the explanation ! |
|
@maxgranier You're welcome. Can we close your issue? |
|
Sure no problem |
Hi there,
Thank you @enten for this very useful starter kit !
I'm currently trying to set my app to be able to send a 404 server code response when a visited route is not available. I've found a few tutorials for Angular Universal (here, this one or even here) but each time the server file script is quite different from this project, i've been trying to make it work for a couple hours without success.
Can you describe how implement this functionnality into this starter kit ?
Thanks
The text was updated successfully, but these errors were encountered: