PathLocationStrategy仅在本地工作 [英] PathLocationStrategy works only locally
问题描述
在构建哈希表时,在工作项目上,在测试项目上,哈希都存在问题.我已经在Google中阅读了以下问题: URL中没有哈希的Angular2 https://forum.ionicframework.com/t/url-routing-without -hash/81140 但我没有找到答案. 当我添加
{provide: LocationStrategy, useClass: HashLocationStrategy}
所有功能均正常运行,但带有哈希值.当我添加
{provide: LocationStrategy, useClass: PathLocationStrategy}
它仅适用于本地版本.但是工作版本不起作用 http://joxi.ru/n2YLOaMijK7Pam 如何删除此哈希 http://joxi.ru/RmzBzxDTWbjeQm 在我的构建项目中将如何工作?/p>
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MaterialModule} from '../shared/mat.module';
import {UserModule} from './user/user.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {ToolbarComponent} from './toolbar/toolbar.component';
import {HashLocationStrategy, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { TestingRComponent } from './testing-r/testing-r.component';
@NgModule({
declarations: [
AppComponent,
ToolbarComponent,
TestingRComponent
],
imports: [
BrowserModule,
MaterialModule,
UserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule {
}
app-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {UserComponent} from './user/user.component';
import {TestingRComponent} from './testing-r/testing-r.component';
const routes: Route[] = [
{path: '', redirectTo: '', pathMatch: 'full'},
{
path: 'auth',
component: UserComponent
},
{
path: 'testing',
component: TestingRComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
user-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {RegistrationComponent} from './registration/registration.component';
import {UserComponent} from './user.component';
import {LoginComponent} from './login/login.component';
import {TestingComponent} from './dynamic-fields/testing/testing.component';
const routes: Route[] = [
{
path: 'auth', component: UserComponent,
children: [
{
path: 'registration',
component: RegistrationComponent
},
{
path: 'login',
component: LoginComponent
},
{
path: 'testing',
component: TestingComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class UserRoutingModule {
}
PathLocationStrategy
使用HTML5 pushState
,该HTML5 pushState
取决于<base>
HTML标记.您需要告诉浏览器,所请求路径的前缀是什么.请记住将其添加到您的应用中:
<base href="/" />
在这里您可以阅读有关在Angular中路由
的更多信息.另一件事是将每个Angular路由(在服务器端)路由到index.html
中指定的基本路径.例如,这是在nodeJS
中完成的方式:
app.get('/*', (req, res) => {
res.render('index', {req, res});
});
或Apache
:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
否则,当您的客户到达例如www.example.com/path/someThing
时,您的服务器将在/var/www/example.com/path/someThing/
中而不是/var/www/example.com/
index.html
文件.I have problem with hash, on my working project when I build it, on test project all work correctly. I already read this questions in google: Angular2 without hash in the url https://forum.ionicframework.com/t/url-routing-without-hash/81140 but I didn't find answer. When I add
{provide: LocationStrategy, useClass: HashLocationStrategy}
All work correctly, but with hash. When I add
{provide: LocationStrategy, useClass: PathLocationStrategy}
It work only on local version. But working version don't work http://joxi.ru/n2YLOaMijK7Pam How can I remove this hash http://joxi.ru/RmzBzxDTWbjeQm what would it work on my build project ?
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MaterialModule} from '../shared/mat.module';
import {UserModule} from './user/user.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {ToolbarComponent} from './toolbar/toolbar.component';
import {HashLocationStrategy, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { TestingRComponent } from './testing-r/testing-r.component';
@NgModule({
declarations: [
AppComponent,
ToolbarComponent,
TestingRComponent
],
imports: [
BrowserModule,
MaterialModule,
UserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule {
}
app-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {UserComponent} from './user/user.component';
import {TestingRComponent} from './testing-r/testing-r.component';
const routes: Route[] = [
{path: '', redirectTo: '', pathMatch: 'full'},
{
path: 'auth',
component: UserComponent
},
{
path: 'testing',
component: TestingRComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
user-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {RegistrationComponent} from './registration/registration.component';
import {UserComponent} from './user.component';
import {LoginComponent} from './login/login.component';
import {TestingComponent} from './dynamic-fields/testing/testing.component';
const routes: Route[] = [
{
path: 'auth', component: UserComponent,
children: [
{
path: 'registration',
component: RegistrationComponent
},
{
path: 'login',
component: LoginComponent
},
{
path: 'testing',
component: TestingComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class UserRoutingModule {
}
PathLocationStrategy
uses HTML5 pushState
which depends on the <base>
HTML tag. You need to tell the browser what will be prefixed to the requested path. Remember to add it in your app:
<base href="/" />
Here You can read more about routing in Angular
One more important thing is to route (on the server side) every Angular route to base path specified in index.html
. For example, this is how it is done in nodeJS
:
app.get('/*', (req, res) => {
res.render('index', {req, res});
});
or Apache
:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Otherwise, when your customer will reach for example www.example.com/path/someThing
your server will be looking for index.html
file in the /var/www/example.com/path/someThing/
instead of /var/www/example.com/
这篇关于PathLocationStrategy仅在本地工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!