Question

我想升级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并指向app.module.js文件中的angular.module('app',...行。如果我转到包含Angular JS和Angular组件的唯一页面，则不会出现任何错误，但是该页面未显示任何内容。

如果我尝试使用UpgradeModule到app.module.ts文件中，如下所示：

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

该应用程序正在运行，但在浏览器的控制台中出现错误： Error: [$rootScope:inprog] $digest already in progress。我了解，如果我使用downgradedModule可以避免这种情况，因为我已经解释过，shared暂时不起作用。

我是否还需要做其他事情来引导应用程序，或者出了什么问题？谢谢！

使用downgradeModule创建Angular混合应用

0 个答案: