我已經設置了一個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
給我所有的進口等路由文件的代碼 –