2017-01-01 57 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