我正在Angular6的帮助下构建应用程序并面临路由问题.当我点击特定标签时,所有路线都正常工作,但每当我刷新当前页面时,都会抛出404错误.我已经看到很多关于Stack溢出这个问题的帖子,但未能克服这个问题.
下面是我的app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppComponent} from './app.component';
import {FetchApiComponent} from './fetch-api/fetch-api.component';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {UserServiceLatest} from './fetch-latest/app.service';
import {UserServiceTop} from './fetch-top/app.service';
import {YoutubePlayerModule} from 'ngx-youtube-player';
import {SidebarComponent} from './sidebar/sidebar.component';
import {FetchLatestComponent} from './fetch-latest/fetch-latest.component';
import { FetchTopComponent } from './fetch-top/fetch-top.component'
import {UserService} from './fetch-api/app.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from …我开发了一个小型Angular2测试应用程序,除其他功能外,还利用了路由.
只要用户首次访问主页,它就可以正常工作,然后导航到子页面.
如果用户尝试直接访问子页面,如果我没有配置Web服务器,则会得到404.这是完全正常的,因为没有对应于路线的"真实页面".
我尝试在apache 2.2中添加以下配置来处理HTML5 Push State:
<Directory /var/www/html/angular2-sens>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /angular2-sens
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /angular2-sens/index.html [L]
</Directory>
它使事情变得更好,因为我不再拥有404.但是,我"仅"被重定向到应用程序的主页并且不执行路由.
我该怎么做才能纠正这个问题？
我的index.html页面是:
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="simplegrid.css" type="text/css">
<link rel="stylesheet" href="sen.css" type="text/css">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/router.js"></script>
<!-- dev
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
-->
<!-- 2. Configure SystemJS -->
<script>
System.config({
map: {
rxjs: 'node_modules/rxjs' //or …这整条新路线的结构听起来很不错,现在我觉得它确实存在.我放弃了尝试使其工作,在这里我注意到甚至Angular 2页面中的主要示例都不起作用.如果您打开实例并且尝试它只是单击它很酷并且您可以看到网址中的路径被更改,但它只是更改字符串路径不存在,如果您复制您的网址并发送它对某人他们会收到以下错误:
{
"statusCode": 404,
"error": "Not Found"
}
即使你只是刷新页面,你也会得到同样的错误.
如果要重现该问题,请打开以下URL:
https://angular.io/resources/live-examples/tutorial/ts/plnkr.html
单击实时预览右上角的"在单独的窗口中启动预览"按钮,等待它加载页面,当您看到URL更改为:
http://run.plnkr.co/KMzM8hkaCyhlnf3b/dashboard
做一个F5刷新页面,你会得到错误.
这是一个错误,它应该工作的方式,或者他们甚至没有尝试过的东西？他们是否已经开始使用糟糕的路由器实现了,或者我只是完全迷失了我是如何让它工作的？请指教 !
我猜我最好使用hashtag实现.
使用带有更新的@angular/router 的 Angular 2 RC 4，我使用此问题中的答案在浏览器中显示了路由 URL
但是，当我刷新或直接请求使用非默认路由的页面时，它会将我带到默认页面（就像我请求 index.html 一样）而不是我想要的路由页面。如何使用 Apache 2.4 在页面刷新时使 Angular 2 路由正常工作？
路由和引导程序：
const routes: RouterConfig = [
{ path: '', redirectTo: 'dashboardTab', terminal: true },
{ path: 'dashboardTab', component: DashboardComponent },
{ path: 'missionTab', component: MissionComponent, children: childRoutes }];
bootstrap(NavbarComponent, [disableDeprecatedForms(), provideForms(), provideRouter(routes), {provide: Window, useValue: window}, HTTP_PROVIDERS, ResponsiveState, {provide: PLATFORM_DIRECTIVES, useValue: RESPONSIVE_DIRECTIVES, multi: true}]).catch((err: any) => console.error(err));
index.html 中的基本 href：
<base href="/">