5

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

第一次尝试 - 渴望加载

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
4

2 回答 2

5

生成延迟加载的块（和所有其他.js脚本）的路径在 angular.json 文件中指定，@ (projects: < projectName >:architect: options:) outputPath: < your-output-path > ...

我自己遇到了麻烦，让 Angular 应用程序在这个位置寻找块，它似乎在根（baseUrl）寻找它。

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

于 2018-08-31T17:30:13.497 回答
4

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

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

项目 -> 你的项目 -> 架构师 -> 构建 -> 选项 -> deployUrl

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

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

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

于 2019-04-24T08:45:48.957 回答