Угловая ошибка DI – ИСКЛЮЧЕНИЕ: Не удается разрешить все параметры

Я создал базовое приложение в 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: (?).

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

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

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

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

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

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

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

    Начиная с 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)) к параметру конструктора в исходном коде исходного вопроса устранит проблему.

    Рекомендации

    Угловое 2 Руководство: ForwardRef

    Прямые ссылки в Angular 2

    НЕПРАВИЛЬНО # 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 { ... } 

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

    Более подробное объяснение здесь: https://stackoverflow.com/a/37907696/893630

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

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

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

    • Если вы чувствуете, что classы слишком часто взаимодействуют (я говорю о зависти функции ), вы можете захотеть объединить 2 службы в 1 class .
    • Если вышеуказанное не работает для вас, рассмотрите возможность использования третьей службы ( EventService ), которую обе службы могут вводить для обмена сообщениями.

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

    Т.е. это приводит к Can't resolve all parameters for MyHttpService ошибки Can't resolve all parameters for MyHttpService .

     Injectable() export class MyHttpService{ } 

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

     @Injectable() export class MyHttpService{ } 

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

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

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

     //abstract class @Injectable() abstract class BaseService { ... } //MyService @Injectable() export class MyService extends BaseService { ..... } 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Для меня, я получил эту ошибку, когда я ошибочно отключил этот импорт в файле 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'; 

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

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

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

    Предположим, что у вас есть classы 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 {...} 

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

    Решение

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

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

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

    Другая возможность заключается не в том, что emitDecoratorMetadata установлен в true в tsconfig.json

     { "compilerOptions": { ... "emitDecoratorMetadata": true, ... } } 

    При использовании импорта бочек – сначала сначала имейте инъекционные инъекции, как правило.

    Это происходит при обращении к interface .

    Изменение interface для class исправлено, работа с и без @Inject .

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

     @Component({ moduleId: module.id, selector: 'pm-header', templateUrl: 'header.component.html', styleUrls: ['header.component.css'], directives: [ROUTER_DIRECTIVES, NgClass], providers: [MobileService] }) 

    Иногда это происходит, когда вы объявили встроенный модуль Angular (HttpClientModule, HttpErrorResponse и т. Д.) В app.module.js. Я также столкнулся с той же проблемой, но теперь решил.

    Ошибка, которую я сделал, это упоминание HttpClientModule в Providers вместо импорта углового модуля

    Для меня это было потому, что у меня была пустая строка между моим декоратором @Component и моим classом Component. Это заставило декоратора не применяться к classу.

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

    mComponent.component.ts :

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

    Затем я пытался использовать MyEnum из дочернего элемента MyComponentClass . Это вызывало ошибку Can not для устранения всех параметров .

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

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

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

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

    В AngularMaterial-2 DatePicker.

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

    После того, как я добавлю это в свой class «CustomDateAdapter»:

     @Injectable({ providedIn: 'root' }) 

    Ошибка исчезла.

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

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

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

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

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

      ng serve -aot 
    Interesting Posts

    Как проверить, является ли double целым числом

    Получение значения открытого статического конечного поля / свойства classа в Java через reflection

    Возrotation сгенерированного pdf с использованием пружины MVC

    Конструктор Date (…) устарел. Что это значит? (Ява)

    Как показать данные JRBeanCollectionDataSource с помощью компонента Table?

    Как мне выполнить резервное копирование своих данных перед переустановкой Windows? Опущенные файлы при копировании диска C

    Отключение звука Windows с помощью C #

    Можно ли использовать несколько фоновых изображений с помощью CSS?

    Каков наилучший метод проверки адреса электронной почты Java?

    Автоматический поиск и обновление драйверов в Windows?

    В чем разница между фоном и фоном?

    Как сделать пакетный режим доступным для камеры

    Как скопировать и вставить данные в R из буфера обмена?

    Изменение константы с помощью указателя не const

    req.body пуст в сообщениях

    Давайте будем гением компьютера.