Ошибка углового цифрового входа - ИСКЛЮЧЕНИЕ: не удается разрешить все параметры

Я создал базовое приложение на Angular, но столкнулся со странной проблемой, когда я не могу внедрить службу в один из моих компонентов. Тем не менее, он отлично вписывается в любой из трех других компонентов, которые я создал.

Для начала, это сервис:

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

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }

  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }

}

И компонент, с которым он отказывается работать:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

Я получаю ошибку в консоли браузера:

ИСКЛЮЧЕНИЕ: Не удается разрешить все параметры для HeaderComponent: (?).

У меня есть сервис в функции начальной загрузки, поэтому у него есть провайдер. И я, кажется, могу вставить его в конструктор любого из моих других компонентов без проблем.

+357
23 июн. '16 в 17:07
источник поделиться
35 ответов
  • 1
  • 2

Импортируйте его из файла, где он объявлен непосредственно, а не в бочке.

Я не знаю, что именно вызывает проблему, но я видел, как это упоминалось несколько раз (вероятно, какая-то циклическая зависимость).

Он также должен быть исправлен путем изменения порядка экспорта в стволе (не знаю деталей, но также упоминался)

+400
23 июн. '16 в 19:34
источник

Связанные вопросы


Похожие вопросы

В дополнение к предыдущим приведенным ответам, похоже, эта ошибка также возникает, когда вашей инъекционной службе не хватает фактического декоратора @Injectable(). Поэтому перед тем, как вы отлаживаете элемент циклической зависимости и порядок импорта/экспорта, выполните простую проверку, действительно ли ваша служба имеет @Injectable().

Это относится к текущему Angular последнему, Angular 2.1.0.

Я открыл проблему по этому вопросу.

+290
23 окт. '16 в 0:56
источник

Начиная с Angular 2.2.3 теперь есть функция утилиты forwardRef(), которая позволяет вам вводить поставщиков, которые еще не определены.

Не определено, я имею в виду, что карта инъекций зависимостей не знает идентификатора. Это то, что происходит во время круговых зависимостей. Вы можете иметь круговые зависимости в Angular, которые очень трудно распутать и посмотреть.

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

Добавление @Inject(forwardRef(() => MobileService)) к параметру конструктора в исходном исходном коде вопроса устранит проблему.

Ссылки

Angular 2 Руководство: ForwardRef

Переслать ссылки в Angular 2

+97
12 дек. '16 в 1:37
источник

НЕПРАВИЛЬНО # 1: Забывание декоратора:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }

НЕПРАВИЛЬНО # 2: Опуская символ "@" Символ:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }

НЕПРАВИЛЬНО # 3: Опускание "()" Символы:

//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }

НЕПРАВИЛЬНО # 4: Нижний регистр "i":

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

НЕПРАВИЛЬНО # 5: Вы забыли: import {Injectable} из '@angular/core';

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

ПРАВИЛЬНО:

@Injectable()
export class MyFooService { ... }
+55
27 нояб. '17 в 18:52
источник

Как уже было сказано, проблема вызвана экспортным упорядочением внутри ствола, вызванным круговыми зависимостями.

Более подробное объяснение здесь: qaru.site/questions/32947/...

+24
25 июн. '16 в 1:16
источник

Я также столкнулся с этим, вводя службу A в службу B и наоборот.

Я думаю, это хорошо, что это быстро не сработает, так как, вероятно, его все равно следует избегать. Если вы хотите, чтобы ваши услуги были более модульными и могли использоваться повторно, лучше избегать циклических ссылок в максимально возможной степени. Этот пост освещает подводные камни, связанные с этим.

Поэтому у меня есть следующие рекомендации:

  • Если вы чувствуете, что классы взаимодействуют слишком часто (я говорю о зависти к функциям), вы можете рассмотреть возможность объединения двух сервисов в один класс.
  • Если вышеперечисленное не работает для вас, рассмотрите возможность использования третьей службы (EventService), которую обе службы могут внедрить для обмена сообщениями.
+20
09 нояб. '16 в 15:05
источник

В интересах поисковиков; Я получил эту ошибку. Это был просто отсутствующий символ @.

т.е. Это вызывает ошибку Can't resolve all parameters for MyHttpService.

Injectable()
export class MyHttpService{
}

Добавление отсутствующего символа @ исправляет его.

@Injectable()
export class MyHttpService{
}
+17
15 февр. '17 в 16:00
источник

В моем случае мне нужно было добавить import "core-js/es7/reflect"; в мое приложение, чтобы заставить @Injectable работать.

+8
15 мая '18 в 19:28
источник

Вы получаете эту ошибку, если у вас есть служба A, которая зависит от статического свойства/метода службы B и службы B зависит от сервиса A. Так что это своего рода циклическая зависимость, хотя это не так, поскольку свойство/метод статично. Вероятно, ошибка, возникающая в сочетании с AOT.

+8
26 апр. '17 в 14:01
источник

В дополнение к отсутствующему декоратору @Injectable()

Отсутствует декодер @Injectable() в абстрактном классе, который не может разрешить все параметры для службы: (?) Декоратор должен присутствовать в MyService, а также в производном классе BaseService

//abstract class
@Injectable()
abstract class BaseService { ... }

//MyService    
@Injectable()
export class MyService extends BaseService {
.....
}
+7
20 окт. '17 в 10:23
источник

В моем случае это произошло потому, что я не объявлял тип для параметра конструктора.

У меня было что-то вроде этого:

constructor(private URL, private http: Http) { }

а затем, изменив его на приведенный ниже код, решила мою проблему.

constructor(private URL : string, private http: Http) {}
+6
27 сент. '17 в 13:27
источник

для меня это было просто отсутствие () в @Injectable. Proper - это @Injectable()

+5
16 мая '18 в 7:58
источник

Удаление параметров из метода инъецируемого конструктора() разрешило его для моего случая.

+5
16 февр. '17 в 9:34
источник

Другая возможность - не устанавливать для emitDecoratorMetadata значение true в tsconfig.json.

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}
+4
28 февр. '18 в 11:31
источник

В моем случае это было из-за плагина Augury, отключить его будет нормально. Альтернативный вариант есть, тоже работает.

все кредиты @Boboss74, он разместил ответ здесь: https://github.com/angular/angular/issues/23958

+4
17 мая '18 в 10:54
источник

В моем случае, передача неправильных параметров в конструктор генерирует эту ошибку, основная идея этой ошибки заключается в том, что вы неосознанно передали некоторые неправильные аргументы любой функции.

export class ProductComponent {
    productList: Array<Product>;

    constructor(productList:Product) { 
         // productList:Product this arg was causing error of unresolved parameters.
         this.productList = [];
    }
}

Я решил это, просто убрав этот аргумент.

+2
14 дек. '17 в 9:00
источник

Для меня, я получил эту ошибку, когда я по ошибке отключил этот импорт в файле polyfills.ts, вы должны убедиться, что он импортирован, чтобы избежать этой ошибки.

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
+2
29 мая '18 в 13:01
источник

Ну, для меня проблема была еще более раздражающей, я использовал сервис в сервисе и забыл добавить его как зависимость в appModule! Надеюсь, что это поможет кому-то сэкономить несколько часов, нарушающих приложение, только чтобы восстановить его снова.

+2
24 янв. '17 в 16:03
источник

Вам нужно добавить массив поставщиков в @Component decorator или в модуль, в котором объявлен ваш компонент. Внутренний компонент можно сделать следующим образом:

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [MobileService]
})
+2
22 мая '17 в 7:21
источник

Если ваша служба определена в том же файле, что и компонент (который ее использует), а служба определена после компонента в файле, вы можете получить эту ошибку. Это связано с той же проблемой 'forwardRef', о которой упоминали другие. В настоящее время VSCode не очень хорошо показывает эту ошибку, и сборка успешно компилируется.

Запуск сборки с --aot может замаскировать эту проблему из-за того, как работает компилятор (вероятно, связанный с дрожанием дерева).

Решение. Убедитесь, что служба определена в другом файле или перед определением компонента. (Я не уверен, можно ли использовать forwardRef в этом случае, но это кажется неуклюжим).

Если у меня есть очень простой сервис, который очень сильно привязан к компоненту (вроде как модель представления) - например. ImageCarouselComponent, я могу назвать его ImageCarouselComponent.service.ts чтобы он не смешивался с другими моими службами.

+1
21 июл. '18 в 23:14
источник

В моем случае я пытался расширить NativeDateAdapter " NativeDateAdapter ", чтобы переопределить метод format(date: Date, displayFormat: Object) ".

В AngularMaterial-2 DatePicker.

Поэтому я забыл добавить @Injectable.

После того, как я добавлю это в мой класс "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

Ошибка ушла.

+1
20 июл. '18 в 12:04
источник

Я столкнулся с этой ошибкой, ошибочно указав имя службы, т.е. конструктор (private myService: MyService).

Для служб с ошибками я смог определить, какая из этих служб является проблемой (у меня было несколько перечисленных в конструкторе), просмотрев страницу в Chrome- > Console. Вы увидите как часть сообщения список параметров "parameter", показывая объект Object, Object Object,? (или что-то типа того). Обратите внимание, где "?" это и есть позиция службы, которая вызывает проблему.

+1
06 февр. '17 в 20:21
источник

В моем случае я экспортировал Class и Enum из одного и того же файла компонента:

mComponent.component.ts:

export class MyComponentClass{...}
export enum MyEnum{...}

Затем я пытался использовать MyEnum от потомка MyComponentClass. Это было причиной ошибки "Не удается разрешить все параметры".

Переместив MyEnum в отдельную папку из MyComponentClass, это решило мою проблему!

Как отметил Гюнтер Цохбауэр, это происходит из-за того, что услуга или компонент циклически зависимы.

+1
24 апр. '18 в 22:52
источник

Хотя, возможно, упоминалось упорядочение экспортируемых классов из бочек, следующий сценарий также может дать тот же эффект.

Предположим, у вас есть классы A, B и C экспортированные из одного и того же файла, где A зависит от B и C:

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

@Injectable()
export class B {...}

@Injectable()
export class C {...}

Поскольку зависимые классы (т.е. в этом случае классы B и C) еще не известны Angular, (вероятно, во время выполнения во время процесса внедрения зависимостей Angular в класс A) возникает ошибка.

Решение

Решение состоит в том, чтобы объявить и экспортировать зависимые классы перед классом, в котором выполняется DI.

то есть в вышеприведенном случае класс A объявляется сразу после определения его зависимостей:

@Injectable()
export class B {...}

@Injectable()
export class C {...}

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}
+1
22 февр. '18 в 10:49
источник

В моем случае причина была следующая:

  • мой инъекционный сервис А продлил еще один класс Б
  • У B был конструктор, который требовал аргумента
  • Я не определил ни одного конструктора в A

Как следствие, при попытке создать объект A конструктор по умолчанию потерпел неудачу. Я понятия не имею, почему это не было ошибкой компиляции.

Я исправил это, просто добавив конструктор в A, который правильно назвал конструктор B.

+1
28 сент. '18 в 16:04
источник

Попался!

Если ни один из приведенных выше ответов не помог вам, возможно, вы импортируете какой-то элемент из того же файла, в который компонент внедряет службу.

Я объясню лучше:

Это служебный файл:

// your-service-file.ts
import { helloWorld } from 'your-component-file.ts'

@Injectable()
export class CustomService() {
  helloWorld()
}

Это файл компонента:

@Component({..})
export class CustomComponent {
  constructor(service: CustomService) { }
}

export function helloWorld() {
  console.log('hello world');
}

Таким образом, это вызывает проблемы, даже если символ находится не внутри того же компонента, а только внутри одного файла. Переместите символ (это может быть функция, константа, класс и т.д.) В другое место, и ошибка исчезнет

0
24 мая '19 в 13:43
источник

Этот ответ может быть очень полезным для этой проблемы. Кроме того, в моем случае причиной был экспорт сервиса по default.

НЕПРАВИЛЬНО:

@Inject()
export default class MobileService { ... }

ПРАВИЛЬНЫЙ:

@Inject()
export class MobileService { ... }
0
03 апр. '19 в 6:18
источник

Для меня это было потому, что я перестал использовать флаг -aot, пытаясь ускорить время компиляции.

 ng serve -aot
0
26 янв. '18 в 21:02
источник

Это может быть действительно трудной проблемой для устранения из-за отсутствия обратной связи в ошибке. Если вас беспокоит фактическая циклическая зависимость, здесь самое важное, что нужно посмотреть в трассировке стека: а) имя службы; б) параметр конструктора в этой службе, который имеет вопросительный знак, например, выглядит ли он следующим образом:

не удается разрешить все параметры для AuthService: ([объект объекта], [объект объекта], [объект объекта], [объект объекта],?)

тогда это означает, что 5-й параметр является сервисом, который также зависит от AuthService. т.е. вопросительный знак означает, что он не был решен DI.

Оттуда вам просто нужно отделить 2 службы путем реструктуризации кода.

0
02 мая '19 в 22:45
источник

В моем случае это была круговая ссылка. У меня был MyService, вызывающий Myservice2, и MyService2, вызывающий MyService.

Нехорошо :(

0
25 сент. '18 в 8:45
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос