All geek questions in one place

Configure history.pushState for Angular 2

My Angular 2 application uses the HTML 5 history.pushState placement strategy . How to configure the server using history.pushState , so browser updates and browser URLs do not generate 404 s?

For example, the Tour of Heroes application has several different application routes, for example:

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

If you click update on one of these routes or enter one of the URLs, you will get 404 , since /detail/13 is the application route, not the server resource. I set up a 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 to configure the server to send all URLs to my application instead of generating 404 ?

Note : This question is in addition to Angular questions. Error 2: 404 when updating through a browser and Angular 2.0 the router does not work on restarting the browser , asking how to solve this problem. For Firebase, this is: When I upgrade my site, I get 404. This is with Angular2 and firebase , and for Apache it is: htaccess redirection for Angular routes .

+5
source share
2 answers

Nginx

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

Use pushstate-server :

 pushstate-server /home/jan/tour-of-heroes
  • supports history.pushState
  • Production http server

to 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

Use http-server :

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

live server

Use live-server :

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

ng serve

Use ng serve :

 ng serve -prod

or with compilation in front mode :

 ng serve -prod -aot
  • supports history.pushState
  • creating a production application
  • Development server http
+7
source

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

Use the LocationStrategy and HashLocationStrategy classes in app.module.ts , as shown in the code example below. It will solve your update problem on any specific route when deploying the application to any HTTP server such as (nginx).

After adding these classes to the providers section, run ng serve , and the root of your application will look like http://localhost:4200/#/ in the 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 update, it restarts in the right place.

Also check out the Angular 2.0 router that doesn't work when you restart your browser to find out more.

Hope this helps!

+3
source

Source: https://habr.com/ru/post/1258497/

More articles:


All Articles