javascript - 有 2 个参数的 Angular 路线不起作用

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

每当我尝试导航到像 http://localhost:4200/event/asa/123 这样的 URL 时，它都不会加载 EventPageComponent (空白页面) )并且 Chrome 在控制台中给出以下错误:

无法加载资源:服务器响应状态为 404(未找到)(http://localhost:4200/event/asa/inline.bundle.js)

它对每个 bundle 都执行此操作。

我错过了什么吗？

Answer 1

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

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