Angular 2路由并直接访问特定路由:如何配置Apache?
发布时间:2020-12-17 07:41:43 所属栏目:安全 来源:网络整理
导读:我开发了一个小的Angular2测试应用程序,其中包括利用路由功能. 只要用户首先访问主页,它就可以正常工作,然后导航到子页面. 如果用户尝试直接访问子页面,如果我没有配置Web服务器,我有一个404.这是完全正常的,因为没有对应于路线的“真实页面”. 我尝试在apac
我开发了一个小的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 wherever you have it installed },packages: { app: { format: 'register',defaultExtension: 'js' },rxjs: { defaultExtension: 'js' } } }); System.import('app/boot') .then(null,console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <app>Chargement...</app> </body> <script>document.write('<base href="' + document.location + '" />');</script> </html> 我的app / boot.ts是: import {bootstrap} from 'angular2/platform/browser'; import {HTTP_PROVIDERS} from 'angular2/http'; import {AppComponent} from './app.component'; import {ROUTER_PROVIDERS} from 'angular2/router'; import { enableProdMode } from 'angular2/core'; enableProdMode(); bootstrap(AppComponent,[HTTP_PROVIDERS,ROUTER_PROVIDERS]); 最后,我的应用程序组件是: import {bootstrap} from 'angular2/platform/browser'; import {HTTP_PROVIDERS} from 'angular2/http'; import {AppComponent} from './app.component'; import {ROUTER_PROVIDERS} from 'angular2/router'; import { enableProdMode } from 'angular2/core'; enableProdMode(); bootstrap(AppComponent,ROUTER_PROVIDERS]); 配置路由的应用程序组件是: import {Component} from 'angular2/core'; import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; import {SensComponent} from './sens.component'; import {GroupesPolitiquesComponent} from './groupes-politiques.component'; import {SenVignetteComponent} from './sen-vignette.component'; @Component({ selector: 'app',template: ` <h1>Application Angular 2 Relative aux Sénateurs (AA2RSen)</h1> <nav> <a [routerLink]="['Senateurs']">Tous les Sénateurs en cours de mandat</a> <a [routerLink]="['GroupesPolitiques']">Groupes politiques</a> </nav> <router-outlet></router-outlet> `,directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ {path:'/senateurs',name: 'Senateurs',component: SensComponent},{path:'/groupes',name: 'GroupesPolitiques',component: GroupesPolitiquesComponent},{path:'/senateur/:matricule',name: 'VignetteSenateur',component: SenVignetteComponent} ]) export class AppComponent { }
好的,所以一切都很好,除了动态生成的基础href是错误的事实.
感谢@günter-z?chbauer指出Angular 2.0 router not working on reloading the browser 在我的原始代码中,它是从document.location生成的: <script>document.write('<base href="' + document.location + '" />');</script> 如果我切换到一个静态元素: <base href="/angular2-sens/"/> 有用.当然,我宁愿进一步分析一个“真实的”应用程序中的document.location. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |