feat(ComponentResolver): Add a SystemJS resolver for compiled apps (#9145)

modules/@angular/core/src/linker.ts

@@ -5,7 +5,7 @@ export {DynamicComponentLoader} from './linker/dynamic_component_loader';
 export {ElementRef} from './linker/element_ref';
 export {ExpressionChangedAfterItHasBeenCheckedException} from './linker/exceptions';
 export {QueryList} from './linker/query_list';
-export {SystemJsComponentResolver} from './linker/systemjs_component_resolver';
+export {SystemJsCmpFactoryResolver, SystemJsComponentResolver} from './linker/systemjs_component_resolver';
 export {TemplateRef} from './linker/template_ref';
 export {ViewContainerRef} from './linker/view_container_ref';
 export {EmbeddedViewRef, ViewRef} from './linker/view_ref';

modules/@angular/core/src/linker/component_resolver.ts

@@ -14,7 +14,7 @@ import {ComponentFactory} from './component_factory';
  */
 export abstract class ComponentResolver {
   abstract resolveComponent(component: Type|string): Promise<ComponentFactory<any>>;
-  abstract clearCache(): any /** TODO #9100 */;
+  abstract clearCache(): void;
 }
 
 function _isComponentFactory(type: any): boolean {
@@ -37,5 +37,6 @@ export class ReflectorComponentResolver extends ComponentResolver {
     }
     return PromiseWrapper.resolve(componentFactory);
   }
+
   clearCache() {}
 }

modules/@angular/core/src/linker/systemjs_component_resolver.ts

@@ -3,6 +3,7 @@ import {Type, global, isString} from '../facade/lang';
 import {ComponentFactory} from './component_factory';
 import {ComponentResolver} from './component_resolver';
 
+const _SEPARATOR = '#';
 
 /**
  * Component resolver that can load components lazily
@@ -13,13 +14,42 @@ export class SystemJsComponentResolver implements ComponentResolver {
 
   resolveComponent(componentType: string|Type): Promise<ComponentFactory<any>> {
     if (isString(componentType)) {
+      let [module, component] = componentType.split(_SEPARATOR);
+
+      if (component === void(0)) {
+        // Use the default export when no component is specified
+        component = 'default';
+      }
+
       return (<any>global)
-          .System.import(componentType)
-          .then((module: any /** TODO #9100 */) => this._resolver.resolveComponent(module.default));
-    } else {
-      return this._resolver.resolveComponent(<Type>componentType);
+          .System.import(module)
+          .then((module: any) => this._resolver.resolveComponent(module[component]));
     }
+
+    return this._resolver.resolveComponent(componentType);
   }
 
-  clearCache() {}
+  clearCache(): void {}
+}
+
+const FACTORY_MODULE_SUFFIX = '.ngfactory';
+const FACTORY_CLASS_SUFFIX = 'NgFactory';
+
+/**
+ * Component resolver that can load component factories lazily
+ * @experimental
+ */
+export class SystemJsCmpFactoryResolver implements ComponentResolver {
+  resolveComponent(componentType: string|Type): Promise<ComponentFactory<any>> {
+    if (isString(componentType)) {
+      let [module, factory] = componentType.split(_SEPARATOR);
+      return (<any>global)
+          .System.import(module + FACTORY_MODULE_SUFFIX)
+          .then((module: any) => module[factory + FACTORY_CLASS_SUFFIX]);
+    }
+
+    return Promise.resolve(null);
+  }
+
+  clearCache(): void {}
 }