Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

angular - PathLocationStrategy works only locally

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 {
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...