Javascript 角度2延迟加载技术

我已经用Angular 1和requireJS编写了一个大型应用程序，用于延迟加载和结构化。应用程序不使用路由，但应用程序的某些部分，如HTML、css和Javascript（角度模块）是延迟加载的

现在我想切换到Angular 2，我正在寻找HTML、css和JS（Angular）内容的最佳延迟加载技术，它不依赖于路由，也不依赖于数千种不同的javascript框架

因此，延迟加载路由组件似乎非常简单：

但是，如果没有路线，您将如何实现该场景？ 你会推荐像webpack这样的东西，还是我应该保留requireJS？对于angular 2有类似OClazyload的东西吗？或者，即使没有任何框架，它也能在Angular 2上工作吗

我是“保持简单”的朋友，我真的很想让它尽可能小和简单

---

谢谢

Angular 2基于web组件。最简单的方法（如你所说的“保持简单”）是使用路由和组件。 您还可以通过在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 {}

@组件({
选择器：'我的组件'，//指令名
templateUrl:“./app/my.component.html”，
指令：[]
})
导出类MyComponent{}
@组成部分({
选择器：'根组件'，//指令名称
指令：[MyComponent]，
模板：“”，
})
导出类myComponent{}

如果修改模板以动态包含

，它将动态加载组件。这不是最佳做法

对于angular 2有一个简单的方法，但这并不像使用路由或指令那么简单。它将创建一个组件实例，并将其附加到位于另一个组件实例的组件视图内部的视图容器中

有了它，您可以使用：

@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);

@组件({
选择器：'子组件'，
模板：“孩子”
})
类子组件{
}
@组成部分({
选择器：“我的应用程序”，
模板：'Parent（）'
})
类MyApp{
构造函数（dcl:DynamicComponentLoader，注入器：注入器）{
dcl.loadAsRoot（子组件，#子组件，注入器）；
}
}
bootstrap（MyApp）；

生成的DOM：

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

母公司(
小孩
)

还有另一个选项（查看上面的angular2链接），您可以选择提供提供程序来配置为此组件实例配置的注入器

希望这有帮助。

---

假设我们的应用程序中有两个页面，“主页”和“关于”。有些人可能永远无法访问about页面，因此只向真正需要它的人提供about页面是有意义的。这就是我们将使用延迟加载的地方。

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

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