Cannot GET /page angular 2 routing error

Question

I've set up routing in angular that works perfectly correct within application, however if I navigate to my about page for example so http://localhost:9000/about and refresh the page I get error saying "Cannot GET /about", same happens if I open a new tab and paste url there and visit the page.

My boot.ts file containint routing logic

// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />



//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS,
  Router,
  RouteConfig,
} from 'angular2/router';



// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';



// -- Enable production module -------------------------------------------------
enableProdMode();



// -- Component ----------------------------------------------------------------
@Component({
    selector: 'main-app',
    directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
    template: `
      <app-navbar></app-navbar>
      <router-outlet></router-outlet>
    `
})



// -- Routing ------------------------------------------------------------------
@RouteConfig([
  { path: '/', name: 'root', redirectTo: ['/Home'] },
  { path: '/home', name: 'Home', component: HomePage }
])



// -- Class --------------------------------------------------------------------
export class MainApp {
  constructor(public router: Router) {}
}



// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
  ROUTER_PROVIDERS
]);

the index.html file

<!doctype html>
<html lang="en">
<head>
    <base href="/">

    <meta charset="UTF-8">
    <title>Angular2 starter</title>

    <!-- Application css -->
    <link href="dist/libraries/bundle.css" rel="stylesheet"></link>
    <link href="dist/styles/main.css" rel="stylesheet"></link>
</head>

<body>
    <main-app>Loading...</main-app>

    <!-- Application js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="dist/libraries/bundle.js"></script>
</body>

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
    //configure system loader
    System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('dist/app/boot').catch(console.log.bind(console));
</script>

</html>

and project structure

dist/
  app/
    components/
      navbar.component.js
    pages/
      home.page.js
    boot.js
  assets/
  typings/
src/
  ... original files that are compiled into dist here
index.html

See: http://stackoverflow.com/questions/34541532/is-angular-2s-router-broken-when-using-html5-routes — Langley, Jan 28 '16 at 17:49

score 3 · Accepted Answer · answered Jan 28 '16 at 17:45

3

In your boot.ts, put this:

import { bootstrap } from "angular2/platform/browser";
import { bind } from "angular2/core";
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  bind(LocationStrategy).toClass(HashLocationStrategy)
]);

Your URL's will be with #/home

answered Jan 28 '16 at 17:45

Vlado Tesanovic

6,369
2
20
31

what if i don't need this # sign in my URL ? is there any alternate ? – Pardeep Jain Jan 29 '16 at 04:46
Yes, of course, there is PathLocationStrategy in Angular2, but it require server side modifications too. – Vlado Tesanovic Jan 29 '16 at 07:07
exactly that's the problem i have in my code server side modification. thanks – Pardeep Jain Jan 29 '16 at 08:40
tried your code in webapi project. Not Working. `import {bootstrap} from 'angular2/platform/browser'; import { bind } from "angular2/core"; import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router"; import {AppComponent} from './app.component'; import 'rxjs/Rx'; bootstrap(AppComponent,[ ROUTER_PROVIDERS, bind(LocationStrategy).toClass(HashLocationStrategy) ]).then( success => console.log('app bootstrapped...'), error => console.log(error) );` – Dimple Mar 15 '16 at 10:54
For this to work you also need to add HTTP_PROVIDERS. So to add to the code above. Do an import: import {HTTP_PROVIDERS} from 'angular2/http'; and add HTTP_PROVIDERS after ROUTER_PROVIDERS in the bootstrap line. – Andrew Howard Jul 19 '16 at 11:30

score 2 · Answer 2 · edited May 23 '17 at 11:46

To complement what Vlado said, with the default strategy you need a server configuration to redirect all your paths to your HTML entry point file. With the hashbang approach it's not necessary...

You could have a look at these questions about this issue:

Hope it helps you, Thierry

Vivek V C · Answer 3 · 2017-06-28T11:42:51.190

1

enable hashes with your routes

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

edited Jun 28 '17 at 11:42

answered Jun 21 '17 at 11:11

Vivek V C

7
5

Cannot GET /page angular 2 routing error

3 Answers3