Within my Angular application, I have the following setup:
export class MyComponent {
subcompPath = "path-to-subcomp#SubcompClassName";
@ViewChild("placeholder", { read: ViewComponentRef }) placeholderRef: ViewComponentRef;
/* Constructor where Compiler, ComponentFactoryResolver are injected */
loadSubcomponent() {
let [path, componentName] = this.subcompPath.split("#");
(<any>window).System.import(path)
.then((module: any) => module[componentName])
.then((type: any) => {
return this._compiler.compileComponentAsync(type)
})
.then((factory: any) => {
let componentRef = this.placeholderRef.createComponent(factory, 0);
});
}
}
My sub-component includes declarations for providers, directives, and pipes.
With the release of RC6, changes have been made that impact how components can declare directives and pipes. These must now be included in the module where the component is declared. Therefore, when loading with SystemJS, the emphasis should not be on loading the component itself but rather the module. Thus, the updated syntax using
return this._compiler.compileModuleAndAllComponentsAsync(type)placeholderRef.createComponent() method.
Despite efforts to explore the Angular 2 source code on GitHub, the task seems daunting due to its vast nature. Using tools like VS Code for enhanced intellisense could simplify this process, yet the lackluster documentation on angular.io poses another obstacle. The focus here is on lazy loading components and modules without relying on the router.
Any assistance or guidance on this matter would be greatly appreciated, as discovering the solution may prove simple to apply once found within official documentation.