Angular + Typescript Demo Plunk

<!-- Run application specs in a browser -->
<!DOCTYPE html>
<html>
<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <title>1st Specs</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css">
</head>
<body>
  <!-- Polyfills -->
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

  <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

  <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/proxy.js?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/sync-test.js?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/jasmine-patch.js?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/async-test.js?main=browser"></script>
  <script src="https://unpkg.com/zone.js/dist/fake-async-test.js?main=browser"></script>

  <script>
    var __spec_files__ = [
      'app/app.component.spec',
      'app/container.component.spec'
    ];
  </script>
  <script src="browser-test-shim.js"></script>
  <my-app></my-app>
</body>
</html>

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["es2015", "dom"],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs@5.0.1',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
      'typescript':                'npm:typescript@2.3.2/lib/typescript.js',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts',
        meta: {
          './*.ts': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });

})(this);

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var url = document.createElement('a');
  url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  if (!baseHref.startsWith('/base/')) { // it is not karma
    basePath = basePath.replace(baseHref, '');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

// BROWSER TESTING SHIM
// Keep it in-sync with what karma-test-shim does
/*global jasmine, __karma__, window*/
(function () {

Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.

// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //

jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;

var baseURL = document.baseURI;
baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';

System.config({
  baseURL: baseURL,
  // Extend usual application package list with test folder
  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },

  // Assume npm: is set in `paths` in systemjs.config
  // Map the angular testing umd bundles
  map: {
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  },
});

System.import('systemjs.config.js')
  .then(importSystemJsExtras)
  .then(initTestBed)
  .then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
  return System.import('systemjs.config.extras.js')
  .catch(function(reason) {
    console.log(
      'Note: System.import could not load "systemjs.config.extras.js" where you might have added more configuration. It is an optional file so we will continue without it.'
    );
    console.log(reason);
  });
}

function initTestBed(){
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ])

  .then(function (providers) {
    var coreTesting    = providers[0];
    var browserTesting = providers[1];

    coreTesting.TestBed.initTestEnvironment(
      browserTesting.BrowserDynamicTestingModule,
      browserTesting.platformBrowserDynamicTesting());
  })
}

// Import all spec files defined in the html (__spec_files__)
// and start Jasmine testrunner
function initTesting () {
  console.log('loading spec files: '+__spec_files__.join(', '));
  return Promise.all(
    __spec_files__.map(function(spec) {
      return System.import(spec);
    })
  )
  //  After all imports load,  re-execute `window.onload` which
  //  triggers the Jasmine test-runner start or explain what went wrong
  .then(success, console.error.bind(console));

  function success () {
    console.log('Spec files loaded; starting Jasmine testrunner');
    window.onload();
  }
}

})();


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {BrowserModule} from '@angular/platform-browser'
import {NgModule} from '@angular/core'
import {AppComponent} from './app.component'
import {ContainerComponent} from './container.component'
import {MenuDirective} from './menu.directive'
import {MenuComponent} from './menu.component'

@NgModule({
	declarations: [
		AppComponent,
		ContainerComponent,
		MenuDirective,
		MenuComponent,
	],
	imports: [
		BrowserModule,
	],
	providers: [],
	bootstrap: [AppComponent],
	entryComponents: [MenuComponent]
})
export class AppModule {
}

import { Component } from '@angular/core';
import {MenuComponent} from './menu.component'

@Component({
  selector: 'my-app',
  template: `<vg-container [menu]="menu"></vg-container>`
})
export class AppComponent {
  name = 'Angular';
  menu: typeof MenuComponent = MenuComponent;
}

import { AppComponent } from './app.component';

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {Component, Input, Type} from '@angular/core'

@Component({
	selector: `vg-container`,
	template: ``
})
class ContainerTestComponent {
	@Input() menu: Type<MenuComponent>
}

describe('AppComponent', function () {
  let de: DebugElement;
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent, ContainerTestComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('h1'));
  });

  it('should create component', () => expect(comp).toBeDefined() );

});


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, Input, Type, ViewChild, ViewContainerRef} from '@angular/core'
import {MenuDirective} from './menu.directive'
import {MenuComponent} from './menu.component'

@Component({
	selector: 'vg-container',
	template: `<ng-template vgMenu></ng-template>`,
})
export class ContainerComponent implements AfterViewInit {
	@ViewChild(MenuDirective) vgMenu: MenuDirective
	@Input('menu') menuComponent: Type<MenuComponent>

	constructor(private componentFactoryResolver: ComponentFactoryResolver) {}


    // This function should load a menucomponent at the place of ng-template
	public setupComponent(
			component: Type<MenuComponent>,
			viewChild: MenuDirective
	) {
		const componentFactory: ComponentFactory<MenuComponent> =
				this.componentFactoryResolver.resolveComponentFactory(component)

		const viewContainerRef: ViewContainerRef = viewChild.viewContainerRef
		viewContainerRef.clear()

		const componentRef: ComponentRef<MenuComponent> =
				viewContainerRef.createComponent(componentFactory)
	}

	ngAfterViewInit() {
		this.setupComponent(this.menuComponent, this.vgMenu)
	}

}

import {async, ComponentFixture, TestBed} from '@angular/core/testing'

import {ContainerComponent} from './container.component'
import {Component, DebugElement, NgModule} from '@angular/core'
import {MenuDirective} from './menu.directive'
import {By} from '@angular/platform-browser'

@Component({
	selector: 'vg-menu',
	template: `Menu works`
})
class MenuComponent {
}

@NgModule({
	declarations: [
		MenuComponent,
		MenuDirective,
	],
	entryComponents: [MenuComponent]
})
class FakeEntryComponents {
}


describe('ContainerComponent', () => {
	let component: ContainerComponent
	let fixture: ComponentFixture<ContainerComponent>
	let menuElement: DebugElement

	beforeEach(async(() => {
		TestBed.configureTestingModule({
			imports: [FakeEntryComponents],
			declarations: [ContainerComponent]
		})
				.compileComponents()
	}))

	beforeEach(() => {
		fixture = TestBed.createComponent(ContainerComponent)
		component = fixture.componentInstance
		component.menuComponent = MenuComponent
		fixture.detectChanges() // This seems to break
		menuElement = fixture.debugElement.query(By.directive(MenuDirective))
	})

	it('should be created', () => {
		expect(component).toBeTruthy()
	})

	it('should have a menu', () => {
		expect(menuElement).toBeTruthy()
	})
})

import {Component} from '@angular/core'

@Component({
	selector: 'vg-menu',
	template: `I am a menu`,
})
export class MenuComponent {}

import {Directive, ViewContainerRef} from '@angular/core'

@Directive({
	selector: '[vgMenu]'
})
export class MenuDirective {
	constructor(public viewContainerRef: ViewContainerRef) {}
}