Angular2 - Cannot GET /

Question

I'm trying to add routes to my Angular2 application (I'm using Angular2 rc4). However I'm getting a problem loading in new page. In my app.comonent I can load all the routes fine with routerLink, but if I naviagte to the route via url it gives me Cannot GET / route. It also loads a home.component without errors as well. I tried adding HTTP_PROVIDERS, but no luck there. Any idea what is causing this issue ?

boot.ts

import {bootstrap} from '@angular/platform-browser-dynamic'
import {HTTP_PROVIDERS} from '@angular/http';
import {provideRouter} from '@angular/router';
// Componets
import {AppComponent} from './app/app.component'
import {APP_ROUTER_PROVIDERS} from './app/app.routes';

bootstrap(AppComponent, [
    provideRouter(APP_ROUTER_PROVIDERS),
    HTTP_PROVIDERS,
    APP_ROUTER_PROVIDERS
]).catch(err => console.error(err));

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router';
// Components 
import {HomeComponent} from './home/home.component';
import {StoreComponent} from './store/store.component';


export const routes: RouterConfig = [

    { path: '', component: HomeComponent },
    { path: 'store', component: StoreComponent },

];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

home.component.ts

import {Component} from '@angular/core';

//const template = require('./home.component.html'); 
const template = 'src/app/home/home.component.html'; 

@Component({
  selector: 'my-home',
  templateUrl: template
})

export class HomeComponent {

}

store.component.ts

import {Component} from '@angular/core';

const template = 'src/app/store/store.component.html'; 
const styles = '/store.component.css'; 

// Mock Models 
interface Product {
    id: number;
    logo: string;
    name: string;
    price: number;
}; 
let Categories:string[] = ['Convertible','Sports Car','Truck','Suv'] ;
let Products:Product[] = [
    { id: 0, logo: '/images/Logo.png', name: "Food ", price: 1000 },
    { id: 1, logo: '/images/Logo.png', name: "Shelter", price:2000 },
    { id: 2, logo: '/images/Logo.png', name: "Health", price:3000 },
    { id: 3, logo: '/images/Logo.png', name: "Advocacy", price: 4000},
    { id: 4, logo: '/images/Logo.png', name: "Funding", price: 5000 },
];

@Component({
    selector: 'my-store',
    templateUrl : template
})

export class StoreComponent {
    categories:string[] = Categories ; 
    products:Product[] = Products ; 

}

score 3 · Answer 1 · answered Aug 16 '16 at 13:43

3

Remove this line

APP_ROUTER_PROVIDERS

from bootstrap(...). This is already provided by provideRouter(...)

I think pathMatch: 'full' is required for this route

    { path: '', component: HomeComponent, pathMatch: 'full' },

but it seems to also work without for others.

answered Aug 16 '16 at 13:43

Günter Zöchbauer

623,577
216
2,003
1,567

If I do that i get EXCEPTION: Error in src/app/app.component.html:0:0vendor.bundle.js:44226:14 ORIGINAL EXCEPTION: Error: Invalid configuration of route 'undefined': component, redirectTo, children must be provided – AJ_ Aug 16 '16 at 13:55
pathMatch: 'full', also doesn't fix it. – AJ_ Aug 16 '16 at 13:56
Sounds like an issue with `HomeComponent` or `StoreComponent` or the imports of these. – Günter Zöchbauer Aug 16 '16 at 14:02
I dont think so. Like i said it loads the components just fine. Its only when i type in the address instead of using the router link. – AJ_ Aug 16 '16 at 14:05
In your question you wrote " Cannot GET / ". Is this the exact error message? When do you get this message and when do you get the one in your first comment above? – Günter Zöchbauer Aug 16 '16 at 14:07
When i type into the url "localhost:8080/store" i get Cannot GET /store . When i click on the link a [routerLink]="['/store']" . It works fine – AJ_ Aug 16 '16 at 14:10
I'm using webpack, if that means anything. – AJ_ Aug 16 '16 at 14:16
Thos sounds like your server doesn't support HTML5 pushState. You can try to switch to `HashLocationStrategy` which doesn't need server support. – Günter Zöchbauer Aug 16 '16 at 14:18
Okay, Can give me a snippet so i can get my error resolved and I will reward you 10 points. – AJ_ Aug 16 '16 at 14:22
`{provide: LocationStrategy, useClass: HashLocationStrategy}`. For imports see http://stackoverflow.com/questions/36861628/location-and-hashlocationstrategy-stopped-working-in-beta-16 – Günter Zöchbauer Aug 16 '16 at 14:25
1

for RC.5 `export const routing = RouterModule.forRoot(appRoutes, { useHash: true });` – Günter Zöchbauer Aug 16 '16 at 14:27
Sorry, out of ideas. – Günter Zöchbauer Aug 16 '16 at 15:28

Angular2 - Cannot GET /

1 Answers1