如何正确配置此虚拟Angular项目

Question

I have this very basic project:

https://stackblitz.com/edit/angular-rktmgc-ktjk3n?file=index.html

This is the code on: /index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
    <br />
    <a href="https://material.angular.io/components/slide-toggle/api">API reference for Angular Material slide-toggle</a><br /><br />
    <select-reset-example>loading</select-reset-example>
    <div style="margin-top:30px;">
    <div style="color:#f00;margin-bottom:20px;">
          Below is what I need to get it work like above (but it doesn't):
    </div>
        <mat-slide-toggle>Slide me!</mat-slide-toggle>
    </div>
</div>

This is the code on: /app/select-reset-example.html

<mat-slide-toggle>Slide me!</mat-slide-toggle>

When loading the component: mat-slide-toggle through: select-reset-example it works, but when loading it directly on the index.html it doesn't.

My question is, how to configure the following /main.ts file in order to render the mat-slide-toggle directly on the index.html ?

In case the scope be a problem, maybe is it possible to create a custom component which inherits from that mat-slide-toggle or MatSlideToggleModule class?

If possible, could you fork the project on stackblitz.com and give me the link with a proper configuration?

import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material';
import { SelectResetExample } from './app/select-reset-example';
import { HttpModule } from '@angular/http';
import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
  exports: [
    MatSlideToggleModule,
  ]
})
export class DemoMaterialModule { }

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    DemoMaterialModule,
    ReactiveFormsModule,
  ],
  entryComponents: [SelectResetExample],
  declarations: [SelectResetExample],
  bootstrap: [SelectResetExample],
  providers: []
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

This is the structure of the project:

Thanks!

Answer 1

Indeed there are several options which could be applied here.

Attempt 1

At first glance we can easily solve your problem by simply importing MatSlideToggle component and adding it to the bootstrap array:

import { MatSlideToggle } from '@angular/material';

@NgModule({
  ...
  bootstrap: [SelectResetExample, MatSlideToggle ]
                                  ^^^^^^^^^^^^^^
                               cool, it was very easy!!!
})
export class AppModule { }

https://stackblitz.com/edit/angular-rktmgc-7h51hh?file=main.ts

Hmm, seems we've broken everything:).

Why?

Angular bootstraps SelectResetExample component. During this process it creates mat-slide-toggle that is part of select-reset-example.html template.

So now our html has two mat-slide-toggle tags.

And then angular bootstraps second component ( MatSlideToggle ) that will be applied to the first mat-slide-toggle . This way we can see that the first working slider lost text Slide me! .

Attempt 2

Let's change order of our bootstrapping components:

@NgModule({
  ...
  bootstrap: [ MatSlideToggle, SelectResetExample ]
})
export class AppModule { }

https://stackblitz.com/edit/angular-rktmgc-mkm7ry?file=main.ts

The second slider works now but wait... We again lost the text.

The main reason of this is that angular can't process projectable nodes on bootstrapping component.

Attempt 3

Angular gives the opportunity to override bootstrapping process by writing code within ngDoBootstrap method of @NgModule . Let's try...

import { ApplicationRef, ComponentFactoryResolver, Injector, NgModuleRef } from '@angular/core';

@NgModule({
  // we replaced bootstrap option with entryComponents
  entryComponents: [SelectResetExample, MatSlideToggle],
})
export class AppModule { 
  constructor(
    private resolver: ComponentFactoryResolver,
    private ngModule: NgModuleRef<any>) {}

  ngDoBootstrap(appRef: ApplicationRef) {

    const factory = this.resolver.resolveComponentFactory(MatSlideToggle);
    const target = document.querySelector('mat-slide-toggle');
    const compRef = factory.create(
       Injector.NULL,
       [Array.from(target.childNodes)], // passing projectable nodes
       target, 
       this.ngModule);

    appRef.attachView(compRef.hostView);


    appRef.bootstrap(SelectResetExample);
  }
}

https://stackblitz.com/edit/angular-rktmgc-ncyebq?file=index.html

Here i am bootstrapping our components throught custom method ngDoBootstrap . And it works but...

What is this? Do I really need to know this?

I don't think so. There must be some other way out.

Attempt 4

in order not to complicate our live we should follow the design of angular framework. For that it would be better to have one root component. Let's create it:

app.component.ts

@Component({
  selector: '.mat-app-background.basic-container',
  templateUrl: './app.component.html',
})
export class AppComponent {
}

app.component.html

<br />
<a href="https://material.angular.io/components/slide-toggle/api">API reference for Angular Material slide-toggle</a><br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
  <div style="color:#f00;margin-bottom:20px;">
    Below is what I need to get it work like above (but it doesn't):
  </div>
  <mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>

module

declarations: [SelectResetExample, AppComponent],
bootstrap: [AppComponent],

index.html

<div class="mat-app-background basic-container"></div>

i moved styles to external resouces

Stackblitz Example