Angular NgUpgrade inject AngularJS service в Angular service; получение: необработанное отклонение обещания: не удается прочитать свойство " get " неопределенного; зона:
Я вижу много подобных проблем, но пока не нашел решение, которое работает. Я думаю, что происходит то, что, поскольку наш Ng2App сначала загружается, у него еще нет ссылки на $injector, поэтому, когда я пытаюсь использовать его в объявлении поставщика (deps: ['$injector']), он не существует.
что безумно странно, так это то, что я могу использовать эту услугу в угловом компоненте, но по какой-то причине не могу использовать ее в угловом УСЛУГА.
app.js
import UserService from './user.service';
angular.module('app', [])
.service('UserService', UserService)
.config(/* config */)
.run(/* run */);
import './ng2app.module';
ng2app.модуль.ТС:
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
imports: [
BrowserModule,
UpgradeModule,
],
declarations: [],
entryComponents: [],
providers: [
// angularJS service:
{
provide: 'UserService',
useFactory: (i: any) => i.get('UserService'), // <---- this is the line all the errors point to.
deps: ['$injector']
},
]
})
export default class Ng2AppModule {
constructor(){}
}
platformBrowserDynamic()
.bootstrapModule(Ng2AppModule)
.then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['app'], {strictDi: true});
});
позже... в сервисе (сбой):
import {Injectable, Inject} from "@angular/core";
import UserService from 'app/login/user.service';
@Injectable()
export class AnAngularService{
constructor(
// causes the error if I uncomment it wtf: <--------------
// @Inject('UserService') private userService: UserService
){}
}
позже... в компоненте (работает правильно):
import { Component } from '@angular/core';
import {Inject} from "@angular/core";
import UserService from 'app/login/user.service';
import template from 'tmpl.html';
@Component({
selector: 'an-angular-component',
template,
})
export class AnAngularComponent{
constructor(
@Inject('UserService') private userService: UserService
){
console.log(userService) // works just fine. wtf <--------------
}
}
кто-нибудь знает, почему это происходит и как это исправить?
этот вопрос-это почти то же самое, но по какой-то причине он не работает
AngularJS версия: 1.5.8
Угловая / версия etc сердечника: 4.2.4
вот ссылка на проблему Github, которую я открыл в угловом РЕПО
StackTrace:
zone.js:522 Unhandled Promise rejection: Cannot read property 'get' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'get' of undefined
at useFactory (ng2app.module.ts:114)
at _callFactory (core.es5.js:9604)
at _createProviderInstance (core.es5.js:9547)
at initNgModule (core.es5.js:9498)
at new NgModuleRef_ (core.es5.js:10606)
at createNgModuleRef (core.es5.js:10590)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12874)
at NgModuleFactory_.create (core.es5.js:13869)
at core.es5.js:4556
at ZoneDelegate.invoke (zone.js:334)
at Object.onInvoke (core.es5.js:3933)
at ZoneDelegate.invoke (zone.js:333)
at Zone.run (zone.js:126)
at NgZone.run (core.es5.js:3801)
at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4554)
at core.es5.js:4596
at ZoneDelegate.invoke (zone.js:334)
at Zone.run (zone.js:126)
at zone.js:713
at ZoneDelegate.invokeTask (zone.js:367)
at Zone.runTask (zone.js:166)
at drainMicroTaskQueue (zone.js:546)
at <anonymous> TypeError: Cannot read property 'get' of undefined
at useFactory (http://localhost:9000/app.bundle.js:4404:52)
at _callFactory (http://localhost:9000/vendor.bundle.js:10600:26)
at _createProviderInstance (http://localhost:9000/vendor.bundle.js:10543:26)
at initNgModule (http://localhost:9000/vendor.bundle.js:10494:13)
at new NgModuleRef_ (http://localhost:9000/vendor.bundle.js:11602:9)
at createNgModuleRef (http://localhost:9000/vendor.bundle.js:11586:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (http://localhost:9000/vendor.bundle.js:13870:12)
at NgModuleFactory_.create (http://localhost:9000/vendor.bundle.js:14865:25)
at http://localhost:9000/vendor.bundle.js:5552:61
at ZoneDelegate.invoke (http://localhost:9000/vendor.bundle.js:289131:26)
at Object.onInvoke (http://localhost:9000/vendor.bundle.js:4929:37)
at ZoneDelegate.invoke (http://localhost:9000/vendor.bundle.js:289130:32)
at Zone.run (http://localhost:9000/vendor.bundle.js:288923:43)
at NgZone.run (http://localhost:9000/vendor.bundle.js:4797:62)
at PlatformRef_._bootstrapModuleFactoryWithZone (http://localhost:9000/vendor.bundle.js:5550:23)
at http://localhost:9000/vendor.bundle.js:5592:59
at ZoneDelegate.invoke (http://localhost:9000/vendor.bundle.js:289131:26)
at Zone.run (http://localhost:9000/vendor.bundle.js:288923:43)
at http://localhost:9000/vendor.bundle.js:289510:57
at ZoneDelegate.invokeTask (http://localhost:9000/vendor.bundle.js:289164:31)
at Zone.runTask (http://localhost:9000/vendor.bundle.js:288963:47)
at drainMicroTaskQueue (http://localhost:9000/vendor.bundle.js:289343:35)
at <anonymous>
consoleError @ zone.js:522
handleUnhandledRejection @ zone.js:527
_loop_1 @ zone.js:562
drainMicroTaskQueue @ zone.js:566
Promise resolved (async)
scheduleQueueDrain @ zone.js:505
scheduleMicroTask @ zone.js:513
ZoneDelegate.scheduleTask @ zone.js:356
Zone.scheduleTask @ zone.js:196
Zone.scheduleMicroTask @ zone.js:207
scheduleResolveOrReject @ zone.js:711
ZoneAwarePromise.then @ zone.js:800
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4596
PlatformRef_.bootstrapModule @ core.es5.js:4581
(anonymous) @ ng2app.module.ts:140
__webpack_require__ @ bootstrap 2f644bad14cb0bb324ab:691
fn @ bootstrap 2f644bad14cb0bb324ab:110
(anonymous) @ app.js:116
__webpack_require__ @ bootstrap 2f644bad14cb0bb324ab:691
fn @ bootstrap 2f644bad14cb0bb324ab:110
(anonymous) @ util (ignored):1
__webpack_require__ @ bootstrap 2f644bad14cb0bb324ab:691
webpackJsonpCallback @ bootstrap 2f644bad14cb0bb324ab:23
(anonymous) @ app.bundle.js:1
3 ответов
хорошо, поэтому я придумал хак, чтобы заставить его работать. это ужасно, но это работает. должно быть лучшее решение, поэтому я не отмечаю это как решение, и тот, кто придумает лучшее решение, все равно получит награду.
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
imports: [
BrowserModule,
UpgradeModule,
],
declarations: [],
entryComponents: [],
providers: [
// angularJS service:
{
provide: 'UserService',
useFactory: () => {
return new Promise((resolve) => {
setTimeout(function(){
resolve(angular.element(document)
.injector().get('UserService'))
},1);
})
},
deps: []
},
]
})
export default class Ng2AppModule {
constructor(){}
}
^ верните обещание и используйте setTimeout, чтобы дождаться следующего тика перед разрешением инжектора angularJS.
в номере:
import {Injectable, Inject} from "@angular/core";
import UserService from 'app/login/user.service';
@Injectable()
export class AnAngularService{
constructor(
@Inject('UserService') private userService: any,
){
userService.then(function(_userService){
_userService.doAThing();
});
}
}
в компоненте:
import { Component } from '@angular/core';
import {Inject} from "@angular/core";
import UserService from 'app/login/user.service';
import template from 'tmpl.html';
@Component({
selector: 'an-angular-component',
template,
})
export class AnAngularComponent{
constructor(
@Inject('UserService') private userService: any,
){
userService.then((us)=>{ console.log(us); })
}
}
Да. Эта работа. Но это мотыга. Так что это возможно. Как я могу сделать это менее хакерским способом?
я смог обойти эту проблему, используя Угловое ядро Injector class, чтобы получить обновленную службу AngularJs, когда это необходимо, вместо того, чтобы вводить ее в конструктор.
import { Injector } from '@angular/core';
@Injectable()
class MyAngularService {
constructor(private injector: Injector) {
//
}
myMethodUsingUpgradedService() {
const myAngularJsUpgradedService = this.injector('MyAngularJsUpgradedService');
// myAngularJsUpgradedService is now available
}
}