标签: angular-providers

我有一个AngularJS代码:

service.doSomething()
  .then(function(result) {
      //do something with the result
  });

在AngularJS 1.5.9中,当我在该.then()部分中有错误时:

service.doSomething()
  .then(function(result) {
      var x = null;
      var y = x.y;
      //do something with the result
  });

我收到明确的错误消息:

TypeError:无法读取null的属性"y"

但是在版本1.6中使用相同的代码我得到了一个不同的错误:

可能是未处理的拒绝:{}未定义

我知道这与此更改有关,通过添加.catch()块,单个解决方案非常简单:

service.doSomething()
  .then(function(result) {
      var x = null;
      var y = x.y;
      //do something with the result
  })
  .catch(console.error);

现在我再次拥有我想要的东西:

TypeError:无法读取null的属性"y"

但是如何在不在.catch()每个地方添加块的情况下为整个应用程序获得相同的结果(更详细的错误)？

我测试了建议的解决方案,通过添加:

$qProvider.errorOnUnhandledRejections(false);

但有了这种情况甚至更糟 - 我在控制台中没有任何东西!错误被某处吞没,根本没有记录.我不确定AngularJS 1.6或我的配置是否有问题.

您是否有任何想法如何从1.5.9版"恢复"日志记录行为？

编辑:

添加定制错误处理程序

.factory('$exceptionHandler', function($log) {
  return function(exception, cause) {
    $log.warn(exception, …

我正在尝试测试使用的模块angular-google-maps.它失败了,因为angular.mock.inject找不到uiGmapGoogleMapApiProvider:

Error: [$injector:unpr] Unknown provider: uiGmapGoogleMapApiProviderProvider <- uiGmapGoogleMapApiProvider

我无法弄清楚出了什么问题.这是简化的测试用例:

'use strict';

describe('this spec', function() {
    beforeEach(module('uiGmapgoogle-maps'));

    it('tries to configure uiGmapGoogleMapApiProvider', inject(function(uiGmapGoogleMapApiProvider) {
        expect(uiGmapGoogleMapApiProvider.configure).toBeDefined();
    }));
});

整个过程可以作为GitHub中可立即运行的Angular项目提供.如果您发现问题,请在此处回答Stack Overflow.如果您还向GitHub存储库提交拉取请求,则可获得奖励积分.

我想建立一个异步工作的工厂来返回服务,然后将该工厂提供给工厂提供商,以便在加载时为组件提供该服务.

然而,当供应商将注入TestService到TestComponent,在运行时类型ZoneAwarePromise.我需要一种方法让提供程序在将服务注入组件之前自动"等待"promise.

服务

export class TestService {
 public test() {
   return 123;
 }
}

提供者和工厂

export function testFactory(auth: any, temp: any) {
  return new Promise((res, rej) => {
    res(new TestService());
  });
}

export let testProvider =
{
  provide: TestService,
  useFactory: testFactory,
  deps: []
};

应用模块

providers: [
    testProvider
]

TestComponent

import { Component, OnInit } from '@angular/core';
import { TestService } from './Test';

@Component({
    selector: 'app-test'
})
export class TestComponent implements OnInit {
    constructor(private …

我HTTP_INTERCEPTORS在angular4中使用.为此,我创建HttpServiceInterceptor了实现HttpInterceptor接口的类并为intercept方法提供了定义.然后注册提供商HTTP_INTERCEPTORS这样

providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: HttpServiceInterceptor,
    multi: true
}],

这工作正常.但我仍然不明白multi:true这里的意思是什么？我读过这个答案.

如果我删除multi:true选项,则浏览器端出现错误

Uncaught Error: Provider parse errors:
Mixing multi and non multi provider is not possible for token InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.487.NgModuleProviderAnalyzer.parse (vendor.js:36335)
    at NgModuleCompiler.webpackJsonp.487.NgModuleCompiler.compile (vendor.js:43184)
    at JitCompiler.webpackJsonp.487.JitCompiler._compileModule (vendor.js:51527)
    at vendor.js:51472
    at Object.then (vendor.js:26354)
    at JitCompiler.webpackJsonp.487.JitCompiler._compileModuleAndComponents (vendor.js:51470)
    at JitCompiler.webpackJsonp.487.JitCompiler.compileModuleAsync (vendor.js:51399)
    at PlatformRef_.webpackJsonp.0.PlatformRef_._bootstrapModuleWithZone (vendor.js:4746)
    at PlatformRef_.webpackJsonp.0.PlatformRef_.bootstrapModule (vendor.js:4732)
    at Object.<anonymous> …

在我的 Angular 应用程序中，我试图在我的模块中使用工厂提供程序：

export function getMyFactory(): () => Window {
  return () => window;
}

@NgModule({
  providers: [
    { provide: WindowRef, useFactory: getMyFactory() },
  ],
})
export class MyModule {}

但这失败了：

在为导出的符号“MyModule”生成的元数据中遇到错误：

收集的元数据包含运行时会报错：Lambda not supported

现在,使用Angular v5,同时使用延迟加载,我加载app.module.ts我认为不是最佳策略的所有提供者,因为这不会加快我的应用程序启动时间,特别是因为我有50个自定义的东西提供者(不要评判我;)).

因此,我问我自己是否应该为我的所有应用程序加载所有这些应用程序,或者我是否应该只在我只使用它们的地方加载它们？

我猜测只在我真正使用它们的地方加载提供商会更好.

但在这种情况下,对我而言根本不清楚如何解决以下构造:

假设我有三个页面(A,B和C),它们有自己的模块和三个提供程序(1,2和3).

A use 1
B use 1, 2, 3
C use 1, 2

• 我想,因为1是在所有应用程序中使用,我将不得不声明它 app.module.ts

• 由于3只在B​​页中使用,我想我只需要声明它 B.module.ts

• 但是2呢？我怎么能在两者中声明它B.module.ts并且C.module.ts目标是共享相同的提供者"内存"(如果提供者包含一个值,B和C应该看到相同的对象),我将分别如何编码？只需通过"像往常一样"注入提供者并完成剩下的角度吗？

提前获得任何帮助,真的很感激

UPDATE

不确定我是否正确理解了角度文档,但这是目标,应该为所有应用程序加载提供程序吗？

看到

https://angular.io/guide/ngmodule-faq#q-component-scoped-providers

更新2018年

注入策略随着Angular v6的引入而发展.根据文档,可以providedIn指定应该使用服务的模块.请参阅https://angular.io/guide/dependency-injection

一种常见的做法是将服务包括在 @NgModule.providers

@NgModule({
  providers: [
    MessageService
  ]
})

根据Angular 教程，您可以提供服务而无需在@NgModule装饰器中指定它，通过使用@injectable.providedIn

@Injectable({
  providedIn: 'root',
})
export class MessageService {...}

使用 Angular 教程中介绍的方法有什么好处吗？

我试图弄清楚如何在 Angular 11 中使用useFactory作为异步函数。现在我有这个：

import { ApolloClientOptions } from 'apollo-client';
import { FirebaseService } from './firebase.service';
// other imports here...

export async function createApollo(httpLink: HttpLink, fs: FirebaseService): Promise<ApolloClientOptions<any>> {

  const token = await fs.getToken();

  const getHeaders = async () => {
    return {
      "X-Auth-Token": token,
    };
  };

  // functions has more content here...

  return Promise.resolve({
    link: errorLink.concat(link),
    cache: new InMemoryCache(),
  });
}

@NgModule({
  imports: [HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, FirebaseService],
    },
  ],
}) …

作为一个新手,我在Angular 2中设置路线时遇到了问题.虽然我很确定,但这是我非常缺乏的基础.

我想要的只是我App Component加载并向我显示标题.在它下面,一个链接将加载contact-list component路由器出口部分.

import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <a routerLink="/contact-list">Contact List</a>
    <router-outlet></router-outlet>
    `
})
export class AppComponent{
  title = 'Welcome to my Dream App!';
}

这里是 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } …

我正在使用 Angular 插件，需要通过使用InjectionToken插件导出的配置对象来配置它。

import { pluginToken } from 'plugin';

@NgModule({
  providers: {
    // Configure the plugin
    //
    // The configuration value string needs to be taken from some other
    // provider (available for dependency injection).
    { provides: pluginToken, useValue: valueString },
  },
})
class MyModule {
  ...
}

我的问题是这valueString是来自其他提供商的价值。我不知道如何将依赖项注入@NgModule装饰器的提供者。怎么做？