Question

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

第一次尝试 - 急切加载

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

在我开始用编译建立prod构建之前，它对我来说很好。在那一刻，我遇到了问题：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所在的同一文件夹中加载块，并且它们不存在。

我的问题是：

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

Answer 1

在angular.json文件@（项目：<< em> projectName >：architect：options）中指定了生成延迟加载的块（以及所有其他.js脚本）的路径。 :) outputPath：<< em>您的输出路径> ...

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

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

Answer 2

我也遇到类似的情况，这有助于在我的angular.json中添加部署网址。 Hermant Jain的评论有所帮助。我只是添加此答案以指定在angular.json中将此设置添加到何处。

在angular.json中遵循此路径：

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

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

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

这样，我的块就从myWeb / dist /

中加载了

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

2 个答案: