Использование downgradeModule для создания гибридного приложения Angular - PullRequest
Новая
       9

Использование downgradeModule для создания гибридного приложения Angular

0 голосов
/ 26 апреля 2019

Я хочу обновить приложение Angular JS для использования Angular (2+), и для этого я хочу использовать downgradedModule:

app.module.js (модуль Angular JS) 

import angular from 'angular';
import { environment } from '../environment'

import { downgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

const bootstrapFn = (extraProviders) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AppModule);
};

const downgradedModule = downgradeModule(bootstrapFn);

(function() {
  'use strict';

  angular
    .module('app', [
      /* my other Angular JS modules */
      downgradedModule
    ])
..........

app.module.ts (угловой модуль) 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule, setAngularLib } from '@angular/upgrade/static';
import { AppRoutingModule } from './app-routing.module';

import angular from 'angular';
import { MyComponent} from './example-components/my-component.component';

setAngularLib(angular);

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    AppRoutingModule
  ],
  declarations: [
    MyComponent
  ],
  entryComponents: [
    MyComponent
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }

  ngDoBootstrap() {}
}

Когда я запускаю npm start, он говорит, что angular is not defined и указывает на строку angular.module('app',... из app.moduleфайл .jsЕсли я перехожу на единственную страницу, содержащую Angular JS, а также компоненты Angular, я не получаю никакой ошибки, но на странице ничего не отображается.

Если я пытаюсь использовать UpgradeModule в приложении.Файл module.ts выглядит так: 

ngDoBootstrap() {
    this.upgrade.bootstrap(document.documentElement, ['app'], {
      strictDi: false
    });
  }

Приложение работает, но я получаю сообщение об ошибке в консоли браузера: Error: [$rootScope:inprog] $digest already in progress.Я понимаю, что этого можно избежать, если я использую downgradedModule, который, как я уже объяснил, пока не работает.

Нужно ли что-то делать для начальной загрузки приложения или в чем проблема?Спасибо!

...