刷新浏览器angular2的问题答案

【问题标题】：Issue in refresh of browser angular2刷新浏览器angular2的问题
【发布时间】：2016-11-23 11:47:19
【问题描述】：

我在刷新浏览器时遇到问题，它显示 404 not found 错误。

我已尝试添加
在 index.html 中，但它没有用。并且 LocationStrategy, HashLocationStrategy 但这似乎不起作用。

我正在使用 VS2015 和 4.5 .net 框架

这是我的 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/bootstrap@3.3.7/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 {

  }

请帮助解决问题谢谢。

【问题讨论】：

有什么问题？
刷新时显示404错误

标签： angular

【解决方案1】：

好的，问题是我正在导入 PathLocationStrategy 需要使用 HashLocationStrategy 更新（app.module.ts）通过导入 HashLocationStrategy 和 locationsstrategy 并添加提供程序。

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 {}

【讨论】：

【解决方案2】：

在您的索引页上添加<base href="/" />，而不是从脚本中动态添加

【讨论】：

【解决方案3】：

因此，404 错误意味着您的网络服务器（在这种情况下是您在构建应用程序时运行的开发服务器）找不到该页面。您的应用程序是否构建没有任何错误？当它运行时，控制台应该显示被请求页面的日志以及它们是否被找到（http 状态 200）。

【讨论】：

【解决方案4】：

问题正在发生，因为找不到路由，请使用 import { ModuleWithProviders } from '@angular/core';这是路由导出的示例代码：

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 { }

【讨论】：