Angular 6 - 指定延迟加载块的路径答案

【问题标题】：Angular 6 - Specify path for lazy loaded chunksAngular 6 - 指定延迟加载块的路径
【发布时间】：2018-11-15 02:22:25
【问题描述】：

我有一个带有子模块的主模块，最初我想让这些模块快速加载，所以我做了什么：

第一次尝试 - 渴望加载

import {DashboardModule} from './module/dashboard/dashboard.module';
export const _dashboardModule = () => DashboardModule;
export const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'dashboard',
                loadChildren: _dashboardModule
            }
        ]
    }                
];

在我开始使用 aot 编译构建 prod build 之前，它对我来说工作得很好。在那一刻，我遇到了这里提到的问题：https://github.com/angular/angular-cli/issues/4192

第二次尝试 - 延迟加载

根据我上面链接的票证，我开始使用模块的字符串路径，例如

loadChildren: './path/to/module/dashboard.module#DashboardModule'

为每个模块生成单独的包。对于构建，我使用了 angular-cli 命令

ng build --output-path=../my/ouput/path --prod --aot --output-hashing none --vendor-chunk

因为我的应用程序是现有庞大应用程序的一部分，所以我无法使用生成的 index.html，但我使用了 .ftl 文件，我在其中指定了所有脚本的加载位置，如下所示：

<body>
    <my-app></my-app>

    <script src="<@versionedUri src="${base}/path/to/file/runtime.js"/>"></script>
    <script src="<@versionedUri src="${base}/path/to/file/polyfills.js"/>"></script>
    <script src="<@versionedUri src="${base}/path/to/file/styles.js"/>"></script>
    <script src="<@versionedUri src="${base}/path/to/file/vendor.js"/>"></script>
    <script src="<@versionedUri src="${base}/path/to/file/main.js"/>"></script>
</body>

如果您尝试延迟加载，这是一个问题，因为我构建的输出文件位于不同的文件夹中，然后我使用的 .ftl 文件而不是 index.html 问题是，当您在浏览器中打开应用程序时，它会尝试加载来自.ftl 所在文件夹的块，它们不存在。

我的问题是：

有没有办法指定块文件的路径？
或者是否有其他方法可以在不导入子路由的情况下立即加载模块并使用它们：children: dashboardRoutes

【问题讨论】：

当你使用延迟加载时，重要的是不要导入加载的模块，它更好地通过路径字符串加载子项

标签： angular angular-cli nrwl

【解决方案1】：

生成延迟加载的块（以及所有其他.js 脚本）的路径在 angular.json 文件中指定，@ (projects: projectName>:architect: options:)输出路径：你的输出路径> ...

我自己遇到了麻烦，让 Angular 应用程序在此位置查找块，它似乎在根 (baseUrl) 处查找它。

我的情况与 OP 类似，将 Angular 应用程序嵌入到 .NET MVC5 应用程序中，因此“服务”应用程序的文件不是使用 Angular 生成的 index.html，而是 MVC 主页/索引视图.我的 Index.cshtml 文件看起来与 OP 的 .ftl 文件非常相似......我的难题是如何告诉 Angular 应用程序在 outputPath 位置查找块？

【讨论】：

我也面临同样的问题。你找到解决办法了吗？
在 angular.json 文件中添加 deployUrl 解决了这个问题。

【解决方案2】：

我有类似的情况，将部署 url 添加到我的 angular.json 有帮助。 Hermant Jain 的评论有所帮助。我只是添加此答案以指定在 angular.json 中添加此设置的位置。

在 angular.json 中遵循这条路径：

Projects -> Your Project -> Architect -> Build -> Options-> deployUrl

不指定 this 的另一种方法是将 this 作为参数传递，如下所示：

    ng build --watch --deploy-url /dist/

这样，我的块是从 myWeb/dist/ 加载的

【讨论】：