Я следовал инструкциям по понижению версии Angular модуля до AngularJS, поскольку я хочу интегрировать приложение Angular в приложение AngularJS.
Приложение My Angular содержит компонент с HTML-шаблоном, содержащим простой текст:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
В моем app.module.ts у меня есть следующее:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [],
entryComponents: [
AppComponent],
})
export class AppModule {
public static ModuleName = 'app';
constructor() {}
ngDoBootstrap() {}
}
Мой main.ts содержит следующее:
import { enableProdMode, StaticProvider } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
declare var angular: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowserDynamic(extraProviders);
return platformRef.bootstrapModule(AppModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.module('ui-components', [
downgradedModule
]);
В моей части AngularJS у меня есть простой html, в который я вставляю имя моего компонента Angular:
<div ng-controller="toastController as ctrl">
<p>Hello world!</p>
</div>
<app-root></app-root>
Я не понимаю, как передать этот модуль в мое приложение AngularJS, написанное на JavaScript. Просто добавление downgradedModule к зависимостям моего модуля AngularJS не работает и приводит к ошибке.
Может ли кто-нибудь помочь мне в этом и объяснить, пожалуйста?