Angular2 - Cannot GET /

Angular2 - Cannot GET /

本文关键字:GET Cannot Angular2      更新时间:2023-09-26

我正在尝试添加路由到我的Angular2应用程序(我使用Angular2 rc4)。然而,我得到了一个问题在新页面加载。在我的app. component 中,我可以用routerLink加载所有路由,但如果我通过url导航到路由,它会给我Cannot GET/路由。它也会加载home.component而不会出现错误。我试着添加HTTP_PROVIDERS,但没有运气。你知道是什么导致这个问题吗?

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 ; 
}

删除这一行

APP_ROUTER_PROVIDERS

from bootstrap(...)。这已经由provideRouter(...)

提供了

我认为这条路线需要pathMatch: 'full'

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