如何使用 @angular/upgrade 在 Angular 1 应用程序中使用 Angular 2 组件

Question

这个问题可能是重复的，但我已经尝试了所有可能的选项。

我正在尝试使用 @angular/upgrade 在 Angular 1 应用程序中使用我的 Angular 2 组件。

angular2 文件：-

app/components/hello 中的简单 hello 组件。

hello.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.scss']
})
export class HelloComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
  }

}

hello.component.html

<p>
  hello works!
</p>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './components/hello/hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    UpgradeModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    HelloComponent
  ]
})
export class AppModule { 
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['usr']);
  }
}

platformBrowserDynamic().bootstrapModule(AppModule);

在我的 Angular 1 应用程序中：- app.ts（根文件）

import { HelloComponent } from '../angular/src/app/components/hello/hello.component';
import { downgradeComponent } from './node_modules/@angular/upgrade/static/static'

let moduleList = ['ngCookies', 'ngSanitize','$rootScope', '$locationProvider '];
angular.bootstrap(document.body, ['usr']);

let app: any = angular.module('usr', moduleList)
.directive(
    'appHello',
    downgradeComponent({ component: HelloComponent })
  );

Angular 1 的 index.html（我添加了 base href 和 root，这是 angular 的默认组件，app-root 组件在我的 angular 1 应用程序中正确呈现）

<base href="/">
<app-root></app-root>

header.html（我想在其中显示我的 angular 2 hello 组件的 angular 1 标头组件）

<app-hello></app-hello>

截图。

提前致谢。

Answer 1

https://angular.io/api/upgrade/static/downgradeModule 说

你不能在同一个混合中使用 downgradeModule() 和 UpgradeModule 应用。使用其中一种。

这意味着您只能在引导 NG1 时使用降级模块