ブラウザの最新表示で問題が発生しました。

ブラウザをリフレッシュする際に問題が発生しました。404エラーが見つかりませんでした。ブラウザの最新表示で問題が発生しました。

私は
をindex.htmlに追加しようとしましたが、使用していません。と LocationStrategy、HashLocationStrategy しかし、うまくいかないようです。

私は、4.5の.NET Framework

でVS2015を使用していますこれは私のapp.routes.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { JobBookingComponent } from './component/jobbooking'; 
import { JobDetailsComponent } from './component/jobbookingdetailscomponent'; 
import { JPTemplateComponent } from './component/jptemplate.component'; 


const routes: Routes = [ 
{ path: '', redirectTo: '/templatejp', pathMatch: 'full' }, 

{ path: 'template', component: JobBookingComponent }, 
{ path: 'templatejp', component: JPTemplateComponent }, 
{ path: 'detail/:templateid', component: JobDetailsComponent } 

]; 

@NgModule({ 
imports: [RouterModule.forRoot(routes)], 
exports: [RouterModule] 
}) 
export class AppRoutingModule { }

index.htmlを

<html> 
<head> 
<script>document.write('<base href="/" />');</script> 
<title>Demo</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/theme.css" /> 
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" /> 
<!--<link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />--> 
<!--<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>--> 

<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
<!-- 1. Load libraries --> 
<!-- Polyfill for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<link rel="stylesheet" 
     href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

app.tsある

import './rxjs-operator'; 
import { Component, ViewContainerRef } from '@angular/core'; 

@Component({ 
selector: 'my-app', 
template: ` 
<nav> 
<a routerLink="/template" routerLinkActive= "active" > Template </a> 
    <a routerLink="/templatejp" routerLinkActive= "active" > Templatejp </a> 
    </nav> 
<router-outlet></router-outlet>` 
}) 

export class AppComponent { 

    }

issを解決するのを手伝ってくださいue ありがとうございました。

出典

2016-11-23 user3510028

問題は何からそれを動的に追加する：ここでは、ルーティングの輸出のためのサンプルコードはありますか？ –

リフレッシュ中に404エラーが表示されています – user3510028

[OK]を問題は、私はPathLocationStrategyがHashLocationStrategyをインポートし、locationstrategyとプロバイダに追加することでHashLocationStrategy 更新（app.module.ts）を使用する必要がインポートされたということでした。

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; 

@NgModule({ 
declarations: [AppComponent], 
imports: [BrowserModule], 
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], 
bootstrap: [AppComponent], 
}) 
export class AppModule {}

出典

2016-11-23 12:06:20 user3510028

したがって、404エラーは、Webサーバー（この場合は、アプリケーションを構築するときに実行している開発サーバー）がページを見つけることができないことを意味します。あなたのアプリケーションは間違いなく構築されますか？コンソールを実行しているときに、要求されているページのログと、それらが見つかったかどうかのログが表示されます（httpステータス200）。

出典

2016-11-23 12:00:19

ルート「は角度/コア@」から使用インポート{ModuleWithProviders}、見つけることができないので、問題が起こっています。

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { JobBookingComponent } from './component/jobbooking'; 
import { JobDetailsComponent } from './component/jobbookingdetailscomponent'; 
import { JPTemplateComponent } from './component/jptemplate.component'; 


const routes: Routes = [ 
{ path: '', redirectTo: 'templatejp', pathMatch: 'full' }, 

{ path: 'template', component: JobBookingComponent }, 
{ path: 'templatejp', component: JPTemplateComponent }, 
{ path: 'detail/:templateid', component: JobDetailsComponent } 

]; 

@NgModule({ 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true }); 
}) 
export class AppRoutingModule { }

出典

2016-11-23 12:36:49

あなたのインデックスページに<base href="/" />を追加代わりにスクリプト

出典

2016-11-23 12:40:49

ブラウザの最新表示で問題が発生しました。

答えて

関連する問題