2017-01-01 72 views
1

我已經設置了一個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

我的代碼:

找不到網頁文件結構:

enter image description here

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: "**", 
    }, 
]; 
+1

替換'和'ProfilePageComponent' NotFoundPageComponent',如果你鍵入一個不正確的路徑檢查,將您重定向到的個人資料頁即可。 –

+0

@ K.Daniek它不會重定向到配置文件頁面。仍然只是說不能得到 – BeniaminoBaggins

+0

給我所有的進口等路由文件的代碼 –

回答

4

與下面的代碼替換您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);

+0

如果它仍然不起作用,你應該考慮使用'angular-cli'。 –

+0

你的代碼有很多錯誤,所以即時修復它們,但相當有點改變代碼 – BeniaminoBaggins

+0

錯誤?你是說最後一行?它來自'angular-cli'。如果它不適合你的代碼,只要刪除它並用'export const routerConfig:Routes = ...'替換'const routerConfig:Routes = ...'就像之前一樣。但它有點奇怪,它路由到'寄存器'而不是'404'。 –

0

你需要給pathMatch:「全',如下所示:

 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] 
+0

我補充說,它仍然無法正常工作。 – BeniaminoBaggins