Angular 'lazy' 带参数的路由在本地有效但在生产中无效

Question

下午好，

我是一名初级开发人员，对 Angular 还很陌生，当路径包含参数时，我遇到了一些路由问题。我目前正在使用 Angular 7.

我有一个组件，用户可以在其中 select 和 ID 以及两个日期，然后根据这些显示数据。如果有的话，我还需要这个组件通过从参数中获取选项来显示数据。我设法毫无问题地完成了它并且它在本地工作但是一旦应用程序部署在服务器中它就无法工作。

我使用的路径是

myUrl.com/myAPPname/diary/2/2018-12-20/2018-12-20

添加参数时，浏览器会尝试从以下位置获取脚本：

myUrl.com/myAPPname/diary/2/2018-12-20/main.js

myUrl.com/myAPPname/diary/2/2018-12-20/polyfill.js

而不是：

myUrl.com/myAPPname/main.js

myUrl.com/myAPPname/polyfill.js

此组件是从主模块延迟加载的模块的一部分。这是模块的路由。正如我所说，它在本地工作，但当应用程序部署在服务器中时它会失败。

const routes: Routes = [
    {
        path: '', component: LayoutComponent,
        children: [
            { path: 'diary', component: DiaryComponent },
            { path: 'diary/:id/:dateFrom/:dateTo', component: DiaryComponent }
        ]
    },
];

提前致谢。

Answer 1

我对 Angular 不是很有经验，但看起来你用三个参数 :/id/:dateFrom/:dateTo 定义了路径，但你的 URL 只有 2 个。即 myUrl.com/myAPPname/diary/2018-12-20/2018-12-20

您可能还需要通过 :id 部分。无论如何，routing guide regarding parameters 可能会有用。

干杯，祝你好运 :)

Answer 2

您在项目根目录 index.html 中的基本 href 应该是这样的：

<head>
    <base href="/myAPPname/">
</head>

它告诉 Angular 检索已编译脚本和资源的根路径。

Angular 'lazy' 带参数的路由在本地有效但在生产中无效

Angular 'lazy' routing with parameters works in local but not in production

javascript

angular

typescript

angular2-routing