我已经设置了一个“404 - 页面未找到”页面,当用户输入一个与我的网络应用程序中的任何路径都不匹配的 url 时:
export const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
component: ProfilePageComponent,
path: "profile",
},
{
component: NotFoundPageComponent,
path: "**",
},
];
然而,当我输入我的应用程序地址然后输入不正确的路径(例如 http://localhost:3000/prcds
)时,它只会显示:
Cannot GET /prcds
在控制台出错的空白网页中:
Failed to load resource: the server responded with a status of 404 (Not Found)
我已将 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 { }
应用程序模块.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: "**",
},
];
最佳答案
用以下代码替换您的 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);
关于javascript - Angular 2 - 404页面不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41419813/