Configure history.pushState for Angular 2

回眸只為那壹抹淺笑 提交于 2019-12-05 01:46:22

问题


My Angular 2 application uses the default HTML 5 history.pushState location strategy. How do I configure a server with history.pushState so browser refreshes and browser URLs do not generate 404s?

For example, the Tour of Heroes application has a few different application routes like:

http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13

If you hit refresh on one of these routes, or type one of the URLs, you'll get 404 since /detail/13 is an application route, not a server resource. I've configured the location strategy at the top of the head in my index.html:

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Tour of Heroes</title>

but how should a server be configured so it sends all URLs to my application instead of generating a 404?

Note: This question is the complement to the questions Angular 2 : 404 error occur when i refresh through Browser and Angular 2.0 router not working on reloading the browser asking how to address this problem. For Firebase, there's this: When I refresh my website I get a 404. This is with Angular2 and firebase and for Apache there's this: htaccess redirect for Angular routes.


回答1:


nginx

To use nginx:

/etc/nginx/ngin.conf

location / {
    root   /home/jan/tour-of-heroes/;
    index  index.html index.htm;
}

error_page 404 =200 /index.html;
  • supports history.pushState
  • production HTTP server

pushstate-server

To use pushstate-server:

pushstate-server /home/jan/tour-of-heroes
  • supports history.pushState
  • production HTTP server

express

To use express:

node express.js

where express.js:

var express = require('express'),
    path = require('path'),
    port = process.env.PORT || 8083,
    app = express();

app.use(express.static(__dirname ));

app.get('*', function(request, response){
  response.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(port);
  • supports history.pushState
  • production HTTP server

http-server

To use http-server:

node http-server/bin/http-server /home/jan/tour-of-heroes
  • no history.pushState
  • production HTTP server

live-server

To use live-server:

live-server --entry-file=index.html /home/jan/tour-of-heroes
  • supports history.pushState
  • development HTTP server

ng serve

To use ng serve:

ng serve -prod

or with ahead-of-time compilation:

ng serve -prod -aot
  • supports history.pushState
  • production application build
  • development HTTP server



回答2:


Create your project using latest angular-cli version, they changed the build system between beta.10 and beta.14, from SystemJS to Webpack.

Use LocationStrategy and HashLocationStrategy class in your app.module.ts as shown in below code sample. It will solve your refresh issue on any particular route when you deploy your application to any http server like (nginx).

After adding these classes to providers section, run ng serve and your application root will look like http://localhost:4200/#/ in browser.

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    HttpModule,
    RouterModule,
    ...
  ],
  providers: [ 
    ...,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

When you refresh, it will reload at it's proper place.

Also check Angular 2.0 router not working on reloading the browser for more info.

Hope that helps!



来源:https://stackoverflow.com/questions/40142130/configure-history-pushstate-for-angular-2

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!