Question

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

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

因此，以下是我无法实现的实现。

main.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文件中的任意位置引导角度模块了。就像我从我的.js文件中这样引导。根据您的要求，引导程序可能有所不同，但步骤1至3应该相同。

window.platform.bootstrapModule(window.UserModule);

在Angular 4中引导多个根组件

1 个答案: