我已经设置了一个404页当我在我的应用程序的地址类型,然后一个不正确的路径(例如http://localhost:3000/prcds
),它只是显示:角2不显示
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: "**",
},
];
替换'和'ProfilePageComponent' NotFoundPageComponent',如果你键入一个不正确的路径检查,将您重定向到的个人资料页即可。 –
@ K.Daniek它不会重定向到配置文件页面。仍然只是说不能得到 – BeniaminoBaggins
给我所有的进口等路由文件的代码 –