angular: Inheritance for Angular decorators not merging properties if not set in child.

[x] bug report => search github for a similar issue or PR before submitting
[] feature request on second thouth this is not a feature its definitive a bug
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior See the following: https://github.com/angular/angular/issues/11606#issuecomment-269139892

Expected behavior The property template of component ComponentTemplateBase should get merged with its child if the child is not specifying a template.

Minimal reproduction of the problem with instructions See https://github.com/angular/angular/issues/11606#issuecomment-269139892

What is the motivation / use case for changing the behavior? Not having to duplicate settings across components when it is not needed.

Please tell us about your environment: nodejs 6.6.0 package.js described here https://github.com/angular/angular/issues/11606#issuecomment-269139892

• Angular version: 2.0.X 2.4.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] all

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

• Node (for AoT issues): node --version = 6.6.0

Copied comments from other issue to bellow:

@Component({
    template: `<template [ngTemplateOutlet]="getTemplate()" [ngOutletContext]="{ $implicit: this }"></template>`
})
export abstract class ComponentTemplateBase implements ITemplateBase<DefaultViewState> {
    @ContentChild(TemplateRef) defaultTemplate: TemplateRef<any>;
    viewState: DefaultViewState = DefaultViewState.DefaultTemplate;

    getTemplate(): TemplateRef<any> {
        switch (this.viewState) {
            case DefaultViewState.DefaultTemplate:
                return this.defaultTemplate;
            default:
                return null;
        }
    }
}

and

@Component({
    selector: "simple-login-form"
})
export class SimpleLoginFormComponent extends ComponentTemplateBase implements OnInit {
    loginForm: FormGroup;
    user: any;
    memberStatus = MemberStatus;
    status: MemberStatus;
    payload: MemberPayload;

    constructor(
        @Inject(FormBuilder) private formBuilder: FormBuilder
    )
    {
        super();
    }

    simpleLogin($event: Event) {
        $event.preventDefault();
    }

    ngOnInit(): void {
        this.loginForm = this.formBuilder.group({
            username: ["", Validators.required],
            password: ["", Validators.required],
            remember: ["1"]
        });
    }
}

however angular cant find the “template” it is not inherited is this not supposed to work ? im using latest version of angular as follows:

{
  "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/forms": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "@angular/router": "^3.4.1",
    "angular-calendar": "^0.6.0",
    "angular2-cookie": "^1.2.6",
    "babel-runtime": "^6.20.0",
    "core-js": "^2.4.1",
    "date-fns": "^1.21.1",
    "jquery": "^3.1.1",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "scriptjs": "^2.5.8",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.2.2",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/bootstrap": "3.3.32",
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.38",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.53",
    "@types/scriptjs": "^0.0.2",
    "@types/selenium-webdriver": "^2.53.38",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^6.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "bootstrap-loader": "^1.3.3",
    "bootstrap-sass": "^3.3.7",
    "browser-sync": "^2.18.5",
    "browser-sync-webpack-plugin": "^1.1.3",
    "bs-fullscreen-message": "^1.1.0",
    "codelyzer": "^2.0.0-beta.4",
    "compass-options": "^0.1.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "deep-extend": "^0.4.1",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-compass": "^2.1.0",
    "gulp-env": "^0.4.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-sequence": "^0.4.6",
    "gulp-typescript": "^3.0.2",
    "gulp-util": "^3.0.7",
    "img-loader": "^1.3.1",
    "imports-loader": "^0.7.0",
    "lazy-object": "^1.0.1",
    "load-gulp-tasks": "^0.1.0",
    "ng2-bootstrap": "^1.1.16-9",
    "ng2-facebook-sdk": "^1.1.0",
    "node-sass": "^4.1.1",
    "postcss-loader": "^1.2.1",
    "progress-bar-webpack-plugin": "^1.9.1",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "^1.6.1",
    "sass-loader": "^4.1.1",
    "source-map-loader": "^0.1.5",
    "strip-ansi": "^3.0.1",
    "style-loader": "^0.13.1",
    "tslint": "^4.2.0",
    "tslint-loader": "^3.3.0",
    "typescript": "^2.1.4",
    "url-loader": "^0.5.7",
    "vinyl-named": "^1.1.0",
    "webpack": "^2.2.0-rc.2",
    "webpack-bundle-analyzer": "^2.1.1",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-dev-server": "^2.2.0-rc.0",
    "webpack-hot-middleware": "^2.14.0",
    "webpack-merge": "^2.0.0",
    "webpack-node-externals": "^1.5.4",
    "webpack-stream": "3.2.0"
  }
}