{"id":1390,"date":"2018-02-07T11:07:55","date_gmt":"2018-02-07T10:07:55","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1390"},"modified":"2025-04-22T10:39:06","modified_gmt":"2025-04-22T08:39:06","slug":"angular-universal-handle-404-set-status-codes","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/","title":{"rendered":"Angular Universal Handle 404 and Set Status Codes"},"content":{"rendered":"<p>When working with Angular Universal we can implement a full-fledged server. Of course, this does not only include for example to display a 404 page for incorrect urls but also setting the correct status code. So that for example search engines and crawlers in general can process the result correctly.<\/p>\n<p>Angular itself allows us to easily create a 404 page via the router package. However, this is to be regarded as a soft 404. Because although a page is output, the HTTP status code is still 200.<\/p>\n<p>In the first step we start with the trivial issue of displaying the Not-Found-Component. Afterwards we dedicate ourselves to setting the correct status code on the response object that we consume via <strong>Express<\/strong>. The example code assumes that you are using lazy load but you can change that.<\/p>\n<p>&nbsp;<\/p>\n<p>Create a new module for our Not-Found-Component.<\/p>\n<pre class=\"lang:default decode:true\" title=\"use the Angular CLI\">ng generate module not-found --routing\r\nng generate component not-found<\/pre>\n<p>&nbsp;<\/p>\n<p>Add the component to the\u00a0<code>not-found-routing.module.ts<\/code> file<\/p>\n<pre class=\"lang:default decode:true\">import {NgModule} from '@angular\/core';\r\nimport {RouterModule, Routes} from '@angular\/router';\r\nimport {NotFoundComponent} from '.\/not-found.component';\r\n\r\nconst routes: Routes = [{\r\n  path: '',\r\n  component: NotFoundComponent\r\n}];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forChild(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class NotFoundRoutingModule {\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Add some content to the not-found.component.html file<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"text-center\"&gt;\r\n  &lt;span class=\"error-code\"&gt;404&lt;\/span&gt;\r\n  &lt;h1&gt;This page doesn't exist&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\" style=\"display: inline-block;\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_big.png\" media=\"(min-width: 1024px)\"><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_medium.png\" media=\"(min-width: 600px)\"><img decoding=\"async\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png\" alt=\"Angular Schulungen\" class=\"alignnone size-full wp-image-38\">\n<\/picture>\n<\/a><\/p>\n<p>Now only the module remains to be integrated into the routing by editing our app.routes.ts file. Add the following two entries to the end of your routes array. Watch out: redirectTo has to be last!<\/p>\n<pre class=\"lang:default decode:true\">import {NgModule} from '@angular\/core';\r\nimport {RouterModule, Routes} from '@angular\/router';\r\n\r\nconst routes: Routes = [\r\n  \/\/ .. routes \r\n  {\r\n    path: 'not-found',\r\n    loadChildren: '.\/routes\/not-found\/not-found.module#NotFoundModule'\r\n  },\r\n  {\r\n    path: '**',\r\n    redirectTo: 'not-found'\r\n  }\r\n];\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes, {\r\n    initialNavigation: 'enabled',\r\n  }),\r\n  ],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>So far so good. We now have a working 404 component that will be displayed when an invalid URL is accessed.<\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2018\/02\/404.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1392\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2018\/02\/404.png\" alt=\"\" width=\"632\" height=\"339\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2018\/02\/404.png 632w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2018\/02\/404-300x161.png 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h1>Setting the Status Code<\/h1>\n<p>The end users experience is covered. So lets set the correct status code. This tutorial assumes that you have followed the official <a href=\"https:\/\/angular.io\/guide\/universal\" target=\"_blank\" rel=\"noopener\">Angular Universal Guide<\/a> but should work for all setups using express. In our express server we have access to the request and response objects. Those are needed in the 404 component in order to set the status code each time the component is loaded. In order to do so we use the dependency injection provided by Angular.<\/p>\n<p>Find the place where renderModuleFactory is used. Usually this is in the server.ts file in your projects root. It might look like this:<\/p>\n<pre class=\"lang:default decode:true \">app.engine('html', (_, options, callback) =&gt; {\r\n  renderModuleFactory(AppServerModuleNgFactory, {\r\n    \/\/ Our index.html\r\n    document: template,\r\n    url: options.req.url,\r\n  }).then(html =&gt; {\r\n    callback(null, html);\r\n  });\r\n});<\/pre>\n<p>We are going to add some <code>extraProviders<\/code> in order to inject response and request into our Angular application. Modify your code like this:<\/p>\n<pre class=\"lang:default decode:true \">import {REQUEST, RESPONSE} from '@nguniversal\/express-engine\/tokens';\r\nimport {ValueProvider} from '@angular\/core';\r\n\r\n\r\napp.engine('html', (_, options, callback) =&gt; {\r\n  renderModuleFactory(AppServerModuleNgFactory, {\r\n    \/\/ Our index.html\r\n    document: template,\r\n    url: options.req.url,\r\n    extraProviders: [\r\n      \/\/ make req and response accessible when angular app runs on server\r\n      &lt;ValueProvider&gt;{\r\n        provide: REQUEST,\r\n        useValue: options.req\r\n      },\r\n      &lt;ValueProvider&gt;{\r\n        provide: RESPONSE,\r\n        useValue: options.req.res,\r\n      },\r\n    ]\r\n  }).then(html =&gt; {\r\n    callback(null, html);\r\n  });\r\n});<\/pre>\n<p>If you are not using\u00a0@nguniversal\/express-engine then simply use strings as injection tokens. When your application is now running on the server you have access to the request and response obejcts. If the application is running in the browser they are empty.<\/p>\n<p>Now we can extend our Not-Found-Component in order to set the correct status code.<\/p>\n<pre class=\"lang:default decode:true\">import {Component, Inject, OnInit, Optional, PLATFORM_ID} from '@angular\/core';\r\nimport {isPlatformBrowser} from '@angular\/common';\r\nimport {RESPONSE} from '@nguniversal\/express-engine\/tokens';\r\nimport {Response} from 'express';\r\n\r\n@Component({\r\n  selector: 'app-not-found',\r\n  templateUrl: '.\/not-found.component.html',\r\n  styleUrls: ['.\/not-found.component.scss']\r\n})\r\nexport class NotFoundComponent implements OnInit {\r\n\r\n  constructor(@Inject(PLATFORM_ID) private platformId: Object,\r\n              @Optional() @Inject(RESPONSE) private response: Response) {\r\n  }\r\n\r\n\r\n  ngOnInit() {\r\n    if (!isPlatformBrowser(this.platformId)) {\r\n      this.response.status(404);\r\n    }\r\n  }\r\n\r\n}\r\n<\/pre>\n<p>Thats it. A hard page reload that leads to your Not-Found-Component will now result in the correct 404 error code. Feel free to leave a comment on how you liked the approach and if it worked for you!<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2018\/02\/404-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1394\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2018\/02\/404-1.png\" alt=\"\" width=\"745\" height=\"301\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2018\/02\/404-1.png 745w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2018\/02\/404-1-300x121.png 300w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with Angular Universal we can implement a full-fledged server. Of course, this does not only include for example to display a 404 page for incorrect urls but also setting the correct status code. So that for example search engines and crawlers in general can process the result correctly. Angular itself allows us to [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,2,60],"tags":[],"class_list":["post-1390","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript","category-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Universal Handle 404 and Set Status Codes - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Universal Handle 404 and Set Status Codes - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-07T10:07:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:39:06+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Angular Universal Handle 404 and Set Status Codes\",\"datePublished\":\"2018-02-07T10:07:55+00:00\",\"dateModified\":\"2025-04-22T08:39:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/\"},\"wordCount\":448,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"articleSection\":[\"Angular\",\"JavaScript\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/\",\"name\":\"Angular Universal Handle 404 and Set Status Codes - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"datePublished\":\"2018-02-07T10:07:55+00:00\",\"dateModified\":\"2025-04-22T08:39:06+00:00\",\"description\":\"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_anne_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-universal-handle-404-set-status-codes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Universal Handle 404 and Set Status Codes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Universal Handle 404 and Set Status Codes - Web Development Blog","description":"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/","og_locale":"en_US","og_type":"article","og_title":"Angular Universal Handle 404 and Set Status Codes - Web Development Blog","og_description":"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2018-02-07T10:07:55+00:00","article_modified_time":"2025-04-22T08:39:06+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Angular Universal Handle 404 and Set Status Codes","datePublished":"2018-02-07T10:07:55+00:00","dateModified":"2025-04-22T08:39:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/"},"wordCount":448,"commentCount":18,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","articleSection":["Angular","JavaScript","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/","name":"Angular Universal Handle 404 and Set Status Codes - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","datePublished":"2018-02-07T10:07:55+00:00","dateModified":"2025-04-22T08:39:06+00:00","description":"Elevate Angular Universal! Handle 404 errors, set status codes effortlessly. Optimize SEO, enhance user experience. Master server-side rendering now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_anne_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-universal-handle-404-set-status-codes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Universal Handle 404 and Set Status Codes"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1390"}],"version-history":[{"count":14,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1390\/revisions"}],"predecessor-version":[{"id":3444,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1390\/revisions\/3444"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}