Angular Hybrid(Angular1和Angular2)App $ injector是未定义的

时间:2017-03-07 16:13:18

标签: angularjs angular angular2-upgrade

我一直在努力解决这个问题已有一段时间了。也许有人可以给我一些提示或答案。

我正在尝试按照角度升级指南设置和ng1-ng2混合应用程序

https://angular.io/docs/ts/latest/guide/upgrade.html

如果我这样引导:

// app.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(...)
    BrowserModule,
    UpgradeModule
  ],
  entryComponent: [ AppComponent ]
})
export class AppModule {
  ngDoBootstrap() {}
}

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['app'], {strictDi: true});
});

angular2路由器确实无法正确设置(永远不会调用shouldProcessUrl)

如果我使用angular2组件进行引导,我会遇到$ injector未定义的问题。

我创建了这个plnkr来重新创建问题: (编辑:新plnkr)

https://plnkr.co/edit/mUvt7miMrOEyTyEk8ooX?p=preview

TypeError: Cannot read property 'get' of undefined
    at useFactory (https://run.plnkr.co/lohIgMlIbiNzGEHg/src/app.ts!transpiled:65:45)
    at AppModuleInjector.get (/AppModule/module.ngfactory.js:140:73)
    at AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:192:50)
    at AppModuleInjector.NgModuleInjector.get (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:8918:48)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:12319:49)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:12699:53)
    at CompiledTemplate.proxyViewClass.View_RootComponent_Host0.createInternal (/AppModule/RootComponent/host.ngfactory.js:15:65)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:12275:25)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:12683:56)
    at ComponentFactory.create (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:7710:29)
    at ApplicationRef_.bootstrap (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:8677:61)
    at eval (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:8506:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:8506:46)
    at eval (https://npmcdn.com/@angular/core@2.4.1/bundles/core.umd.js:8458:31)

总结一下:

如果我使用angular1组件作为root并标记angular2" rootComponent"作为entyComponent,angular2路由器不会被初始化。(https://angular.io/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-applications

如果我使用和angular2组件作为root,我只能获得$ injector问题(如plnkr所示),如果"初始路由(/ login)"是一条有角度的路线。如果我从angular1路由器开始,然后更改为angular2路由(/ login)一切正常。 (https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs

我会非常感谢任何建议。

非常感谢您提前 罗宾

0 个答案:

没有答案