Question

我有下面的代码在启动应用程序时在所有浏览器中都能正常工作，除非在刷新页面时，我立即得到HTTP 404-Not Found问题。在角度上，不知道确切的原因和解决方案。

以下是我的应用程序中的组件：

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './main.html',
})
export class AppComponent { }

main.html中

<div>
<nav>
    <ul class=" nav nav-pills">
        <li routerLinkActive="active"> <a 
 routerLink="/checkifc">checkifc</a></li>
        <li routerLinkActive="active"><a 
 routerLink="checkmaterial">checkmaterial</a>
        <li routerLinkActive="active"><a 
 routerLink="checkcosts">checkcosts</a>
    </ul>

    <router-outlet></router-outlet>

 </nav>
</div>

app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CheckifcComponent } from './checkifc/checkifc.component';
import { CheckmaterialComponent } from 
'./checkmaterial/checkmaterial.component';
import { CheckcostsComponent } from './checkcosts/checkcosts.component';

export const routes: Routes = [
{ path: 'checkifc', component: CheckifcComponent },
{ path: 'checkmaterial', component: CheckmaterialComponent },
{ path: 'checkcosts', component: CheckcostsComponent },
//{ path: '', redirectTo: '/checkifc', pathMatch: 'full' }];

export const routing = RouterModule.forRoot(routes);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http, Response } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { CheckifcComponent } from './checkifc/checkifc.component';
import { CheckmaterialComponent} from 
 './checkmaterial/checkmaterial.component';
 import { CheckcostsComponent } from './checkcosts/checkcosts.component';
 import{ ifcobjecttypeComponent} from './ifcobjectType.component'

 @NgModule({
imports: [BrowserModule, routing , FormsModule, HttpModule,],
declarations: [AppComponent, CheckifcComponent, CheckmaterialComponent, 
 CheckcostsComponent, ifcobjecttypeComponent ],
bootstrap: [AppComponent]})
 export class AppModule { }

以下是为

实施路由的组件

checkifc.component.ts

import { Component, OnInit} from '@angular/core';
import { Ifc } from './ifc';
import { BimService } from './bimifc.service';

@Component({
selector: 'checkifc',
templateUrl: './checkifc.html',
providers: [BimService]})

//implementing the class OnInit
export class CheckifcComponent implements OnInit {
ifcprops: Ifc[];}

checkifc.html

checkcosts.component.ts

import { Component, OnInit } from '@angular/core';
import { Costs } from './costs';
import { BimService } from './bimcosts.service';

@Component({
selector: 'checkcosts',
templateUrl: './checkcosts.html',
providers: [BimService]})

 export class CheckcostsComponent implements OnInit {
checkCost: Costs[];}

checkmaterial.component.ts

import { Component, OnInit } from '@angular/core';
import { Material } from './material';
import { BimService } from './bim.service';

 @Component({
selector: 'checkmaterial',
templateUrl: './checkmaterial.html',
providers: [BimService]})

export class CheckmaterialComponent implements OnInit {
AmtofMaterial: Material[];}

我成功地能够调试应用程序并通过加载相应的组件和组件在组件之间导航。我正在刷新页面或URL时显示HTML页面但是HTTP错误404.0 - 未找到。

在Visualstudio 2017中实现angular2。

此外，从博客中，我发现了一些解决方案，例如在web.config文件中添加重写规则。即使添加了重写规则，也没有解决我的问题。

您的投入最值得赞赏!!提前谢谢。

Angular 2 Routing - Visual Studio 2017，获取HTTP错误404.0 - 在浏览器中刷新URL时找不到

0 个答案: