这个问题可能是重复的，但我已经尝试了所有可能的选项。
我正在尝试使用 @angular/upgrade 在 Angular 1 应用程序中使用我的 Angular 2 组件。
angular2 文件：-
app/components/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() {
}
}
你好.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 （我添加了基本 href 和 root，这是 angular 的默认组件，app-root 组件在我的 angular 1 应用程序中正确呈现）
<base href="/">
<app-root></app-root>
header.html（我想在其中显示我的 angular 2 hello 组件的 angular 1 header 组件）
<app-hello></app-hello>
截图。
提前致谢。