Cannot GET /page angular 2 routing error

javascript angularjs routing angular

13,036

Solution 1

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

Solution 2

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

Solution 3

enable hashes with your routes

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

13,036

Author by

Ilja

That dev at the local ☕️ shop sipping on late.

Updated on June 24, 2022

Comments

Ilja almost 2 years

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