Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular NgUpgrade将AngularJS服务注入Angular服务;获取:未处理的Promise拒绝:无法读取未定义的属性’get’;区:大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在这里看到了很多类似的问题,但还没有找到一个有效的解决方案.我认为正在发生的是,因为我们的Ng2App首先被引导,它还没有引用$injector,所以当我尝试在我的提供者声明(deps:[‘$injector’])中使用它时,它没有’存在.

什么是INSANELY奇怪的是我可以在Angular COMPONENT中使用此服务但由于某种原因无法在Angular serviCE中使用它.

app.js

import Userservice from './user.service';
angular.module('app',[])
  .service('Userservice',UserservicE)
  .config(/* config */)
  .run(/* run */);

 import './ng2app.module';

ng2app.module.ts:

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 <--------------
  }
}

有谁知道为什么会这样,以及如何解决它?

This question is almost exactly the same thing but for some reason it didnt work

AngularJS版本:1.5.8
角/核心等版本:4.2.4

Here’s a link to the Github issue I opened in the Angular repo

堆栈跟踪:

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$1 (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$1 (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

解决方法

这似乎是调整@NgModule({providers:[]})和upgrade.bootstrap解决方案的问题.

在这里你需要$injector,但它在被请求时没有被注入.

docs中它说你应该使用NgDoBootstrap钩子.

export function userserviceFactory(i: any) {
  return i.get('Userservice');
}

export const userserviceProvider = {
  provide: 'Userservice',useFactory: userserviceFactory,deps: ['$injector']
};

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,providers: [
     userserviceProvider
  ]
}) 


export default class Ng2AppModule {

   constructor(private upgrade: UpgradeModulE) { }

   ngDoBootstrap() {
     thiS.Upgrade.bootstrap(document.body,{ StrictDi: true });
   }
}

platformBrowserDynamic().bootstrapModule(Ng2AppModulE);

由安德鲁·卢林编辑为后代
不幸的是,即使这正是在角度文档中写的正是如此.这里的原始答案是:

import { forWARDRef } from '@angular/core';

useFactory: (forWARDRef(() => '$injector')i: any) => i.get('Userservice')

而这似乎比这更接近答案.这也不起作用 – 但这似乎是因为TypeScript不认为语法是正确的.

更新:

我们对useFactory如此着迷,以至于我们没有看到修复只是将forWARDRef添加到服务中.

@Injectable()
export class AnAngularservice{
  constructor(@Inject(forWARDRef(() => 'Userservice')) private userservice: Userservice
  ){}
}

大佬总结

以上是大佬教程为你收集整理的Angular NgUpgrade将AngularJS服务注入Angular服务;获取:未处理的Promise拒绝:无法读取未定义的属性’get’;区:全部内容,希望文章能够帮你解决Angular NgUpgrade将AngularJS服务注入Angular服务;获取:未处理的Promise拒绝:无法读取未定义的属性’get’;区:所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。