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

标签 javascript angular typescript angular2-routing

下午好

我是一名初级开发人员,刚接触 Angular,当路径包含参数时我遇到了一些路由问题。我目前正在使用 Angular 7。

我有一个组件,用户可以在其中选择 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 }
        ]
    },
];

提前致谢。

最佳答案

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

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

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

关于javascript - 带参数的 Angular 'lazy' 路由在本地有效,但在生产中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58859633/

相关文章:

javascript - li 的点击功能在 jQuery 中不起作用

javascript - 在纯 JavaScript 中构建选项卡组件

javascript - 如何自定义一个javascript文件

javascript - 如何在 jquery/javascript 中删除给定 url 的所有 <div> 图像?

CSS,如何在 Angular 2 的叠加层内垂直居中文本

http - Angular2 http 获取请求结果为 404

javascript - 根据 Angular 5 中的不同参数过滤并映射对象数组的属性

javascript - 在 Angular 中使用单击事件处理多个组件

angular - 从 Angular 中的 .subscribe 获取订阅数据

javascript - 你如何获得裁判的姓名?