<p dir="auto">We have a requirement to destroy Angular2 Application when user is navigated to other page (Note: It is an application where we are using angular2 for one page only). So when the user navigates away from this page (using normal anchor), we have to unload/destroy the ng2 app.</p>
<p dir="auto">we are taking applicationRef as follows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="platformBrowserDynamic([
    {provide: 'ConfigService', useValue: {} }
]).bootstrapModule(AppModule).then((appModule:NgModuleRef&lt;AppModule&gt;)=&gt;{
    const appRef = appModule.injector.get(ApplicationRef);

    if(!!callback)
        callback(appRef);
});"><pre class="notranslate"><code class="notranslate">platformBrowserDynamic([
    {provide: 'ConfigService', useValue: {} }
]).bootstrapModule(AppModule).then((appModule:NgModuleRef&lt;AppModule&gt;)=&gt;{
    const appRef = appModule.injector.get(ApplicationRef);

    if(!!callback)
        callback(appRef);
});
</code></pre></div>
<p dir="auto">we have a hook when user going out from this page, we are calling<br>
<code class="notranslate">_ref.components[0].hostView.destroy(); </code><br>
where _ref is the application reference passed in the callback above.</p>
<p dir="auto">This entire flow calls the ngOnDestroy of each component inside the application however, when we navigate to non angular page, we can see that the components are still there in the memory and causing performance issue when I open the same page again.<br>
<a href="url">https://ibb.co/nsjekk</a><br>
You can see from the screenshot that the component are still present and consuming memory, even if we have destroyed the app as mentioned above.</p>
<p dir="auto">What is the issue here. Is destroying application not enough to clear the memory? Or we are doing something wrong?<br>
we are using Angular 2.1.2.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; 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 =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; 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 =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
See the following: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="176950677" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11606" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11606/hovercard?comment_id=269139892&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/11606#issuecomment-269139892">#11606 (comment)</a></p>
<p dir="auto"><strong>Expected behavior</strong><br>
The property template of component ComponentTemplateBase should get merged with<br>
its child if the child is not specifying a template.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="176950677" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11606" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11606/hovercard?comment_id=269139892&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/11606#issuecomment-269139892">#11606 (comment)</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Not having to duplicate settings across components when it is not needed.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
nodejs 6.6.0 package.js described here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="176950677" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11606" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11606/hovercard?comment_id=269139892&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/11606#issuecomment-269139892">#11606 (comment)</a></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [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 ]<br>
all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
all</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =  6.6.0</p>
</li>
</ul>
<p dir="auto">Copied comments from other issue to bellow:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    template: `&lt;template [ngTemplateOutlet]=&quot;getTemplate()&quot; [ngOutletContext]=&quot;{ $implicit: this }&quot;&gt;&lt;/template&gt;`
})
export abstract class ComponentTemplateBase implements ITemplateBase&lt;DefaultViewState&gt; {
    @ContentChild(TemplateRef) defaultTemplate: TemplateRef&lt;any&gt;;
    viewState: DefaultViewState = DefaultViewState.DefaultTemplate;

    getTemplate(): TemplateRef&lt;any&gt; {
        switch (this.viewState) {
            case DefaultViewState.DefaultTemplate:
                return this.defaultTemplate;
            default:
                return null;
        }
    }
}"><pre class="notranslate"><code class="notranslate">@Component({
    template: `&lt;template [ngTemplateOutlet]="getTemplate()" [ngOutletContext]="{ $implicit: this }"&gt;&lt;/template&gt;`
})
export abstract class ComponentTemplateBase implements ITemplateBase&lt;DefaultViewState&gt; {
    @ContentChild(TemplateRef) defaultTemplate: TemplateRef&lt;any&gt;;
    viewState: DefaultViewState = DefaultViewState.DefaultTemplate;

    getTemplate(): TemplateRef&lt;any&gt; {
        switch (this.viewState) {
            case DefaultViewState.DefaultTemplate:
                return this.defaultTemplate;
            default:
                return null;
        }
    }
}
</code></pre></div>
<p dir="auto">and</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;simple-login-form&quot;
})
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: [&quot;&quot;, Validators.required],
            password: [&quot;&quot;, Validators.required],
            remember: [&quot;1&quot;]
        });
    }
}"><pre class="notranslate"><code class="notranslate">@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"]
        });
    }
}
</code></pre></div>
<p dir="auto">however angular cant find the "template" it is not inherited is this not supposed to work ?<br>
im using latest version of angular as follows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;dependencies&quot;: {
    &quot;@angular/common&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/compiler&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/core&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/forms&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/http&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/platform-browser&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;^2.4.1&quot;,
    &quot;@angular/router&quot;: &quot;^3.4.1&quot;,
    &quot;angular-calendar&quot;: &quot;^0.6.0&quot;,
    &quot;angular2-cookie&quot;: &quot;^1.2.6&quot;,
    &quot;babel-runtime&quot;: &quot;^6.20.0&quot;,
    &quot;core-js&quot;: &quot;^2.4.1&quot;,
    &quot;date-fns&quot;: &quot;^1.21.1&quot;,
    &quot;jquery&quot;: &quot;^3.1.1&quot;,
    &quot;reflect-metadata&quot;: &quot;^0.1.9&quot;,
    &quot;rxjs&quot;: &quot;^5.0.2&quot;,
    &quot;scriptjs&quot;: &quot;^2.5.8&quot;,
    &quot;zone.js&quot;: &quot;^0.7.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@angularclass/hmr&quot;: &quot;^1.2.2&quot;,
    &quot;@angularclass/hmr-loader&quot;: &quot;^3.0.2&quot;,
    &quot;@types/bootstrap&quot;: &quot;3.3.32&quot;,
    &quot;@types/core-js&quot;: &quot;^0.9.35&quot;,
    &quot;@types/jasmine&quot;: &quot;^2.5.38&quot;,
    &quot;@types/jquery&quot;: &quot;^2.0.34&quot;,
    &quot;@types/node&quot;: &quot;^6.0.53&quot;,
    &quot;@types/scriptjs&quot;: &quot;^0.0.2&quot;,
    &quot;@types/selenium-webdriver&quot;: &quot;^2.53.38&quot;,
    &quot;angular2-template-loader&quot;: &quot;^0.6.0&quot;,
    &quot;autoprefixer&quot;: &quot;^6.6.0&quot;,
    &quot;awesome-typescript-loader&quot;: &quot;^3.0.0-beta.17&quot;,
    &quot;babel-core&quot;: &quot;^6.21.0&quot;,
    &quot;babel-loader&quot;: &quot;^6.2.10&quot;,
    &quot;babel-plugin-transform-runtime&quot;: &quot;^6.15.0&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.18.0&quot;,
    &quot;bootstrap-loader&quot;: &quot;^1.3.3&quot;,
    &quot;bootstrap-sass&quot;: &quot;^3.3.7&quot;,
    &quot;browser-sync&quot;: &quot;^2.18.5&quot;,
    &quot;browser-sync-webpack-plugin&quot;: &quot;^1.1.3&quot;,
    &quot;bs-fullscreen-message&quot;: &quot;^1.1.0&quot;,
    &quot;codelyzer&quot;: &quot;^2.0.0-beta.4&quot;,
    &quot;compass-options&quot;: &quot;^0.1.1&quot;,
    &quot;copy-webpack-plugin&quot;: &quot;^4.0.1&quot;,
    &quot;css-loader&quot;: &quot;^0.26.1&quot;,
    &quot;deep-extend&quot;: &quot;^0.4.1&quot;,
    &quot;del&quot;: &quot;^2.2.2&quot;,
    &quot;extract-text-webpack-plugin&quot;: &quot;^1.0.1&quot;,
    &quot;file-loader&quot;: &quot;^0.9.0&quot;,
    &quot;gulp&quot;: &quot;^3.9.1&quot;,
    &quot;gulp-clean-css&quot;: &quot;^2.0.13&quot;,
    &quot;gulp-compass&quot;: &quot;^2.1.0&quot;,
    &quot;gulp-env&quot;: &quot;^0.4.0&quot;,
    &quot;gulp-load-plugins&quot;: &quot;^1.4.0&quot;,
    &quot;gulp-sequence&quot;: &quot;^0.4.6&quot;,
    &quot;gulp-typescript&quot;: &quot;^3.0.2&quot;,
    &quot;gulp-util&quot;: &quot;^3.0.7&quot;,
    &quot;img-loader&quot;: &quot;^1.3.1&quot;,
    &quot;imports-loader&quot;: &quot;^0.7.0&quot;,
    &quot;lazy-object&quot;: &quot;^1.0.1&quot;,
    &quot;load-gulp-tasks&quot;: &quot;^0.1.0&quot;,
    &quot;ng2-bootstrap&quot;: &quot;^1.1.16-9&quot;,
    &quot;ng2-facebook-sdk&quot;: &quot;^1.1.0&quot;,
    &quot;node-sass&quot;: &quot;^4.1.1&quot;,
    &quot;postcss-loader&quot;: &quot;^1.2.1&quot;,
    &quot;progress-bar-webpack-plugin&quot;: &quot;^1.9.1&quot;,
    &quot;raw-loader&quot;: &quot;0.5.1&quot;,
    &quot;resolve-url-loader&quot;: &quot;^1.6.1&quot;,
    &quot;sass-loader&quot;: &quot;^4.1.1&quot;,
    &quot;source-map-loader&quot;: &quot;^0.1.5&quot;,
    &quot;strip-ansi&quot;: &quot;^3.0.1&quot;,
    &quot;style-loader&quot;: &quot;^0.13.1&quot;,
    &quot;tslint&quot;: &quot;^4.2.0&quot;,
    &quot;tslint-loader&quot;: &quot;^3.3.0&quot;,
    &quot;typescript&quot;: &quot;^2.1.4&quot;,
    &quot;url-loader&quot;: &quot;^0.5.7&quot;,
    &quot;vinyl-named&quot;: &quot;^1.1.0&quot;,
    &quot;webpack&quot;: &quot;^2.2.0-rc.2&quot;,
    &quot;webpack-bundle-analyzer&quot;: &quot;^2.1.1&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^1.9.0&quot;,
    &quot;webpack-dev-server&quot;: &quot;^2.2.0-rc.0&quot;,
    &quot;webpack-hot-middleware&quot;: &quot;^2.14.0&quot;,
    &quot;webpack-merge&quot;: &quot;^2.0.0&quot;,
    &quot;webpack-node-externals&quot;: &quot;^1.5.4&quot;,
    &quot;webpack-stream&quot;: &quot;3.2.0&quot;
  }
}"><pre class="notranslate"><code class="notranslate">{
  "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"
  }
}
</code></pre></div>