1

この質問は重複している可能性がありますが、可能なすべてのオプションを試しました。

@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 (Angular 1 アプリで app-root コンポーネントが適切にレンダリングされている、angular のデフォルト コンポーネントである base href と root を追加しました)

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

header.html (角度 2 の hello コンポーネントを表示したい角度 1 のヘッダー コンポーネント)

<app-hello></app-hello>

スクリーンショット。 Angular 1 アプリで適切にレンダリングされる Angular 2 ルート コンポーネント Angular 2 の hello コンポーネントが Angular 1 アプリで正しくレンダリングされない

前もって感謝します。

4

1 に答える 1