2016-08-16 6 views
1

Я пытаюсь добавить маршруты в свое приложение Angular2 (я использую Angular2 rc4). Однако на новой странице возникает проблема загрузки. В моем app.comonent Я могу загрузить все маршруты штрафа с помощью routerLink, но если я навигаюсь по маршруту по URL-адресу, он дает мне Невозможно GET/. Он также загружает home.component без ошибок. Я попытался добавить HTTP_PROVIDERS, но не повезло. Любая идея, что вызывает эту проблему?Angular2 - Can not GET/

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 ; 

} 

ответ

3

Удалить эту линию

APP_ROUTER_PROVIDERS 

из bootstrap(...). Это уже предусмотрено provideRouter(...)

Я думаю pathMatch: 'full' требуется для этого маршрута

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

, но, кажется, также работает без других.

+0

Если я что я получаю исключение: Ошибка в SRC/приложение/app.component.html: 0: 0vendor.bundle.js: 44226: 14 ORIGINAL ИСКЛЮЧЕНИЯ: Ошибка: недопустимая конфигурация маршрута 'неопределенный': компонент , redirectTo, должны быть предоставлены дети – John

+0

pathMatch: «полный», также не исправляет. – John

+0

Звучит как проблема с 'HomeComponent' или' StoreComponent' или их импорт. –

Смежные вопросы