javascript - Angular 2 stand alone components

Question

Welcome To Ask or Share your Answers For Others

javascript - Angular 2 stand alone components

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Angular 2 stand alone components

Just moved over to Angular 2 recently and i am just trying to get my head around pretty much all of it.

I need to build and that just uses stand-alone components, I want to be able to utilise my components as follows.

<body>
   <component-one></component-one>
   <component-two></component-two>
</body>

I have got as far as getting these components to render out on the page the problem is when one of these component selectors are not present on the current page i get the following console error...

core.umd.js:2838 EXCEPTION: Error in :0:0 caused by: The selector "component-one" did not match any elements

Is there a way to only bootstrap only the relevant components?

Also, the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." console message comes in multiples times depending on how many components i have on the page, which makes me feel like i am missing something.

Module config

// Modules
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Components
import { ComponentOne }  from './components/componentOne';
import { ComponentTwo }  from './components/componentTwo';


@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ ComponentOne, ComponentTwo ],
  bootstrap:    [ ComponentOne, ComponentTwo],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { 
   constructor() {

}

}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:31:55+0000

You can omit the bootstrap option and implementing ngDoBootstrap() yourself. And to conditionally bootstrap components, just do a querySelector before calling appRef.bootstrap(SomeComponent); to check whether the component is already on the page.

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ ComponentOne, ComponentTwo ],
  entryComponents: [ ComponentOne, ComponentTwo ]
})
export class AppModule { 
  ngDoBootstrap(appRef: ApplicationRef) {
    if(document.querySelector('component-one')) {
      appRef.bootstrap(ComponentOne);
    }
    if(document.querySelector('component-two')) {
      appRef.bootstrap(ComponentTwo);
    }
  }
}

Note: entryComponents option is required

Finally in your index.html you can omit second tag and angular won't raise error:

<body>
  <component-one></component-one>
</body>

Plunker Example

If you don't want to see message Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. you can just enable prod mode or use the following (Since 2.3.0) which is similar as above (i recommend to use the first solution):

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ ComponentOne, ComponentTwo ],
  entryComponents: [ComponentOne, ComponentTwo]
})
export class AppModule { 
  constructor(private resolver: ComponentFactoryResolver, private inj: Injector) {}

  ngDoBootstrap(appRef: ApplicationRef) {   
    if(document.querySelector('component-one')) {
      const compFactory = this.resolver.resolveComponentFactory(ComponentOne);
      let compOneRef = compFactory.create(this.inj, [], 'component-one');
      appRef.attachView(compOneRef.hostView);
      compOneRef.onDestroy(() => {
        appRef.detachView(compOneRef.hostView);
      });
    }
    if(document.querySelector('component-two')) {
      const compFactory = this.resolver.resolveComponentFactory(ComponentTwo);
      let compTwoRef = compFactory.create(this.inj, [], 'component-one');
      appRef.attachView(compTwoRef.hostView);
      compTwoRef.onDestroy(() => {
        appRef.detachView(compTwoRef.hostView);
      });
    }

    appRef.tick();
  }
}

It's just the same that angular does internally when bootstraping component

Plunker Example

Categories

javascript - Angular 2 stand alone components

javascript - Angular 2 stand alone components

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags