Question

我已经使用Angular 1编写了一个大型应用程序，并且需要使用AMD与MySQL进行延迟加载和结构化。应用程序不使用路由，但HTML，css和Javascript（角度模块）等应用程序的部分是延迟加载的。

现在我想更改为Angular 2，我正在寻找HTML，css和JS（角度）内容的最佳延迟加载技术，这些技术不依赖于路由，并且不依赖于数千个不同的javascript框架。

所以延迟加载路由组件似乎很简单： http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

但如果没有路线，你将如何实现这种情况？你会推荐像webpack这样的东西，还是应该保留requireJS？角度2有OClazyload吗？或者它甚至在没有任何框架的情况下以某种方式使用Angular 2？

我是＆＃34的朋友;保持简单＆＃34;我真的希望尽可能小而简单。

谢谢！

Answer 1

Angular 2基于Web组件。最简单的方法（＆＃34;保持简单＆＃34;如你所说）使用路线和组件。您还可以通过在html中使用指令来加载组件。例如：

@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}



@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

如果您修改模板以动态包含<my-component>，则会动态加载组件。这不是最佳做法。

角度为2的dynamic component loader，但这并不像使用路线或指令那么简单。它将创建一个Component实例并将其附加到位于另一个Component实例的Component View内部的View Container。

用它你可以使用：

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

结果DOM：

<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

还有另一个选项（请参阅上面的angular2链接），您可以选择提供提供程序来配置为此组件实例配置的Injector。

希望这有帮助。

Answer 2

使用angular 2最新版本，我们可以使用loadchildren属性来执行延迟加载。例如： { 路径：'客户'， loadChildren：'。/ customer.module#Customer2Module？chunkName = Customer“ }，

在上面的示例中，我使用webpack Bundling（angular 2路由器加载程序）+ Anguar 2 Routing来延迟加载模块。

Answer 3

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

让我们假设我们的应用程序中有两个页面，“home”和“about”。有些人可能永远无法访问about页面，因此仅向实际需要它的人提供about页面的负载是有意义的。这是我们将使用延迟加载的地方。

Angular 2延迟加载技术

3 个答案: