在 Angular 4 中引导多个根组件

Question

我们有一个 JQuery 应用程序，我们需要在 Angular 4 中实现一些模块。为此，我们手动引导一个 Angular 应用程序。但是现在的情况是我们创建了多个角度组件，现在它们都在我们引导 AppComponent 时加载，这使得应用程序加载缓慢。

所以我想引导多个根组件（即 AppComponent、App1Component），以便根据它相应地使用子组件。

所以下面是我的实现，它不起作用。

ma​​in.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule,App1Module } from './app.module';
import { enableProdMode } from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(App1Module)

app.module.ts

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { AppugComponent }   from './appug.component';

import { AppChild1Component }   from './profile/appchild1.component';
import { AppChild2Component }   from './profile/appchild2.component';
import { AppChild3Component }   from './profile/appchild3.component';
import { AppChild4Component }   from './profile/appchild4.component';

import { UgChild1Component }   from './ug/ugchild1.component';
import { UgChild2Component }   from './ug/ugchild2.component';
import { UgChild3Component }   from './ug/ugchild3.component';
import { UgChild4Component }   from './ug/ugchild4.component';

@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [ 
                    AppComponent,
                    AppChild1Component, 
                    AppChild2Component,
                    AppChild3Component,
                    AppChild4Component,
                ],  
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [
                  AppugComponent,
                  UgChild1Component, 
                  UgChild2Component,
                  UgChild3Component,
                  UgChild4Component,
                ],
  bootstrap:    [ AppugComponent ]
})
export class App1Module { }

app.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app,
  template:`<h1>app</h1>`,  
})
export class AppComponent implements OnInit {}

appug.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-appug,
  template:`<h1>appug</h1>`,    
})
export class AppugComponent implements OnInit {}

以下是我在控制台上遇到的错误：

Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "my-app" did not match any elements

也尝试过引用 this 但不起作用

任何帮助将不胜感激。

Answer 1

我通过在main.ts 和tsconfig.json 中进行一些配置解决了自己的问题

第 1 步：创建您的模块并声明您在引导该模块时要加载的根组件。

例如。在这里我创建了user.module.ts

import { NgModule }      from '@angular/core';

// root component of usermodule
import { UserAppComponent }   from './userapp.component';

@NgModule({
  imports:[FormsModule,HttpModule],
  declarations:[UserAppComponent],
  providers:[],
  bootstrap:[UserAppComponent]
})
export class UserModule { }

第 2 步：转到main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';

window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;

第 3 步：转到 tsconfig.json 并将新创建的模块和组件插入到 "files" 数组中

"files":[
    //....your other components ...//
    "myapp/user.module.ts",  
    "myapp/userapp.component.ts",           
  ]

第 4 步：现在您可以从 .js 文件中的任意位置引导 Angular 模块。就像我从我的 .js 文件中这样引导。引导可能会根据您的要求而有所不同，但步骤 1 到 3 应该相同。

window.platform.bootstrapModule(window.UserModule);