Angular 2 - 404 页面未显示答案

【问题标题】：Angular 2 - 404 page not displayingAngular 2 - 404 页面未显示
【发布时间】：2017-05-16 03:30:54
【问题描述】：

当用户输入与我的网络应用程序中的任何路径都不匹配的 URL 时，我设置了一个“404 - 找不到页面”页面：

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      component: NotFoundPageComponent,
      path: "**",
   },
];

但是，当我输入我的应用地址和错误的路径（例如http://localhost:3000/prcds）时，它只会显示：

Cannot GET /prcds

在控制台出现错误的空白网页中：

加载资源失败：服务器响应状态为 404 （未找到）

我已将 NotFoundPageModule 添加到 app.module 导入中。

我使用了https://angular.io/docs/ts/latest/guide/router.html 中的“配置”部分，并将他们的做法复制到我的项目中，以设置 404 未找到页面。

如何让它停止显示该错误并显示我为 404 错误创建的实际页面？

它显示与我的另一个问题相同的页面，因此它与this issue 相关的可能性很小：

我的代码：

未找到页面文件结构：

notfoundpage.component.ts

import { Component } from "@angular/core";
import { Title } from "@angular/platform-browser";

@Component({
   selector: "not-found-page",
   styleUrls: ["dist/app/components/not-found-page/not-found-page.component.css"],
   templateUrl: "dist/app/components/not-found-page/not-found-page.component.html",
})
export class NotFoundPageComponent {
   constructor(private titleService: Title) {
      this.titleService.setTitle("Not Found");
   }
}

notfoundpage.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import * as NotFoundPage from "./index";

@NgModule({
   declarations: [
      NotFoundPage.NotFoundPageComponent,
   ],
   exports: [NotFoundPage.NotFoundPageComponent],
   imports: [CommonModule, FormsModule],
})
export class NotFoundPageModule { }

app.module.ts

// tslint:disable-next-line:no-reference
/// <reference path="../../../node_modules/moment/moment.d.ts" />

// Angular 2 modules
import { Component, NgModule } from "@angular/core";
import {
   ControlValueAccessor,
   FormBuilder,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
   Validators,
} from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { AgmCoreModule } from "angular2-google-maps/core";
import { routerConfig } from "../app.routes";

// Plugin modules
import { Ng2Bs3ModalModule } from "ng2-bs3-modal/ng2-bs3-modal";

// App modules
import { AboutPageModule } from "../components/about-page/about-page.module";
import { AddPageModule } from "../components/add-page/add-page.module";
import { FindPageModule } from "../components/find-page/find-page.module";
import { LandingPageModule } from "../components/landing-page/landing-page.module";
import { NotFoundPageModule } from "../components/not-found-page/not-found-page.module";
import { ProfilePageModule } from "../components/profile-page/profile-page.module";
import { RegisterPageModule } from "../components/register-page/register-page.module";
import { SharedModule } from "../components/shared/shared.module";
import { AppComponent } from "./app.component";

@NgModule({
   bootstrap: [AppComponent],
   declarations: [
      AppComponent,
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot(routerConfig),
      FormsModule,
      Ng2Bs3ModalModule,
      AgmCoreModule,
      ReactiveFormsModule,
      LandingPageModule,
      FindPageModule,
      AddPageModule,
      AboutPageModule,
      RegisterPageModule,
      ProfilePageModule,
      NotFoundPageModule,
      SharedModule,
   ],
   providers: [
      FormBuilder,
   ],
})
export class AppModule { }

整个 app.routes.ts：

import { Routes } from "@angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      path: "",
      pathMatch: "full",
      redirectTo: "",
   },
   {
      component: FindPageComponent,
      path: "find",
   },
   {
      component: AddPageComponent,
      path: "add",
   },
   {
      component: RegisterPageComponent,
      path: "register",
   },
   {
      component: AboutPageComponent,
      path: "about",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      path: "**",
      pathMatch: "full",
      redirectTo: "NotFoundPageComponent",
   },
   {
      component: ProfilePageComponent,
      path: "**",
   },
];

【问题讨论】：

将NotFoundPageComponent 替换为ProfilePageComponent 并检查您是否输入了错误的路径，然后它会将您重定向到个人资料页面。
@K.Daniek 它不会重定向到个人资料页面。还是说不能得到
给我你的路由文件中的全部代码，包括所有的导入等等。
@K.Daniek 刚刚将它添加到我的问题中。干杯
你能不能把templateUrl: "dist/app/components/not-found-page/not-found-page.component.html",改成templateUrl: "./not-found-page.component.html",，我不明白为什么是dist而不是src？

标签： javascript angular typescript routing angular2-routing

【解决方案1】：

用以下代码替换您的app.routes.ts 文件：

import { Routes, RouterModule } from "@angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";

const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: FindPageComponent,
      path: "find",
   },
   {
      component: AddPageComponent,
      path: "add",
   },
   {
      component: RegisterPageComponent,
      path: "register",
   },
   {
      component: AboutPageComponent,
      path: "about",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      component: NotFoundPageComponent,
      path: "404",
   },
   {
      path: "**",
      redirectTo: '404' 
   }
];

export const routerConfig = RouterModule.forRoot(routerConfig);

【讨论】：

如果还是不行，请考虑使用angular-cli。
您的代码有很多错误，所以我正在修复它们，但更改了很多代码
错误？你是说最后一行？它来自angular-cli。如果它不适合您的代码，只需将其删除并像以前一样将const routerConfig: Routes = ... 替换为export const routerConfig: Routes = ...。但它路由到register 而不是404 有点奇怪。

【解决方案2】：

您需要给出 pathMatch: 'full'，如下所示：

        export const routerConfig: Routes = [
           {
              component: LandingPageComponent,
              path: "",
           },
           {
              component: ProfilePageComponent,
              path: "profile",
           },
            { path: '', redirectTo: 'NotFoundPageComponent', pathMatch: 'full' },
           {
              component: NotFoundPageComponent,
              path: "**",
           },
        ];

在您的“notfoundpage.module.ts”中，尝试以下操作：

替换这个：

       import * as NotFoundPage from "./index";

有了这个：

        import {NotFoundPageComponent } from './not-found-page.component';

然后替换这个：

     declarations: [
          NotFoundPage.NotFoundPageComponent,
       ],
       exports: [NotFoundPage.NotFoundPageComponent]

有了这个：

         declarations: [
              NotFoundPageComponent,
           ],
           exports: [NotFoundPageComponent]

【讨论】：