Angular 4 延迟加载答案

【问题标题】：Angular 4 Lazy LoadingAngular 4 延迟加载
【发布时间】：2018-03-16 19:29:37
【问题描述】：

我正在努力理解这一点，如果有人可以向我解释一下，我将不胜感激。

我的理解是，如果没有 node.js，我们不能在 Angular 中进行延迟加载。真的吗？如果没有，您能否指出我可以了解如何在没有 node.js 的情况下进行操作的地方？

请，谢谢。

【问题讨论】：

你真的用谷歌搜索过吗？
namitamalik.github.io/Lazy-Loading-with-Angular2-Routing
这方面的文章有一百万篇，wtf
无需成为“聪明人”。我当然搜过了。我什至在某一时刻实现并运行了它，但仅在我的开发机器上。一旦我将它发布到我的托管站点（没有 node.js），该应用程序就停止了一起工作。我错过了什么吗？

【解决方案1】：

这不是真的。虽然都锚定在 Javascript 中，但 Angular 和 Node.js 是两种独立的技术，有两个不同的关注点。 Node.js 是一种用于处理和交付数据的后端架构，而 Angular 是一种前端技术，主要关注为用户提供一个网关，以便与通过 GUI 提供数据的服务进行交互。

在 Angular 中，延迟加载模块是通过路由器 as documented here 完成的。本质上，在激活到该模块的路由之前，您不会导入要延迟加载的模块，例如：

export const routes: Routes = [
    { path: '', redirectTo: 'contact', pathMatch: 'full'},
    { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
    { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

请小心，仔细阅读 Angular 文档，因为延迟加载有很多“陷阱”。我能想到的几个：

只需要在路由中加载模块即可。尝试将其导入您的父模块将否定模块的“懒惰”，并且在某些情况下会导致错误。
延迟加载的模块会导致依赖注入树被拆分。换句话说，如果您在父模块和子模块中调用相同的服务，它们将处于不同的上下文中，因此除非您将服务声明为forRoot(), more on that here.

不过，总体而言，这相当简单。只需按照文档操作即可。

【讨论】：

感谢您的回复。我都知道。在某一时刻，我实施了它并且效果很好。我认为没有 node.js 它将无法工作的原因是，它在我的开发机器上运行良好，但是一旦我将它发布到我的托管站点（没有 node.js），应用程序就停止了工作全部一起。当我发布应用程序时，我是否遗漏了一些我需要做的事情？

【解决方案2】：

在我看来，您需要使用 angular-cli 构建您的 Angular 应用程序：ng build --prod --env=prod 然后在src 文件夹中，angular-cli 会在此文件夹中生成dist 文件夹，您的应用程序已准备好上传到服务器。

【讨论】：