Angular 2 lazy loading techniques

Angular 2 is based on web components. The easiest way ("keep it simple" as you said) is using routes and components. You can also load components simply by using directives in your html. for example:

@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 {}

if you modify your template to include <my-component> dynamically it will load the component dynamically. This is not a best practice.

there is a dynamic component loader for angular 2, but that is not as simple as using routes or directives. it will create an instance of a Component and attache it to a View Container located inside of the Component View of another Component instance.

with it you can use:

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

The resulting DOM:

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

There is another option (look at angular2 link above) in which you can optionally provide providers to configure the Injector provisioned for this Component Instance.

Hope this helps.