Angular 有 2 个参数的路由不工作

Question

我有这个路由文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomepageComponent } from './app/homepage/homepage.component';
import { SearchpageComponent } from './app/searchpage/searchpage.component';
import { EventPageComponent } from './app/eventpage/eventpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomepageComponent
  },
  {
    path: 'search',
    component: SearchpageComponent
  },
  {
    path: 'event/:name/:id',
    component: EventPageComponent
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

每当我尝试导航到 URL（如 http://localhost:4200/event/asa/123）时，它不会加载 EventPageComponent（空白页）并且 Chrome 会给我以下错误在控制台中：

Failed to load resource: the server responded with a status of 404 (Not Found) (http://localhost:4200/event/asa/inline.bundle.js)

它对每个捆绑包都这样做。

我是不是漏掉了什么？

Answer 1

您在 index.html 中的脚本引用似乎不正确。当它应该指向 /inline.bundle.js（绝对）时，它似乎指向 inline.bundle.js（相对于当前路径）。鉴于您的问题，这是我最好的猜测，我认为 Angular 代码没有任何问题（Angular 中的任何内容也不会产生此错误）。

如果您使用 webpack 之类的东西进行捆绑，他们无疑有解决方案。

Angular 有 2 个参数的路由不工作

Angular route with 2 parameters not working

javascript

angular2-routing

angular