ВИХІД: Не вдається вирішити всі параметри

Я створив базовий додаток у Angular 2, але у мене виникли дивні проблеми, коли я не можу ввести службу в один із своїх компонентів. Однак він добре вводить будь-який із трьох створених мною компонентів.

Для початку це послуга:

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: (?).

У мене є служба у функції завантаження, щоб вона мала провайдера. І я, здається, зможу без проблем ввести його в конструктор будь-якого іншого мого компонента.

Імпортуйте його з файлу, де оголошено безпосередньо замість бочки.

Я не знаю, що саме викликає проблему, але я бачив, як це згадувалося кілька разів (можливо, якась кругова залежність).

Це також має бути зафіксовано, змінивши порядок експорту в барелі (не знаю деталей, але згадувалося також)

На додаток до попередніх відповідей, схоже, ця помилка викидається і тоді, коли у вашій службі ін’єкцій відсутній власний @Injectable()декоратор. Тому перед тим, як налагодити річ циклічної залежності та порядок імпорту / експорту, проведіть просту перевірку, чи справді @Injectable()визначена ваша послуга .

Це стосується поточної версії Angular 2.1.0, Angular 2.1.0.

Я відкрив питання з цього приводу .

Станом на Angular 2.2.3тепер існує forwardRef()утиліта, яка дозволяє вводити постачальників, які ще не визначені.

Не визначено, я маю на увазі, що карта введення залежності не знає ідентифікатора. Це те, що відбувається під час кругових залежностей. Ви можете мати кругові залежності в кутових, які дуже важко розплутати і побачити.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

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

Список літератури

Кутовий посібник 2: ForwardRef

Переадресація посилань у Angular 2

WRONG # 1: Забуття декоратора:

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

WRONG # 2: Опущення символу "@":

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

WRONG # 3: Пропуск символів "()":

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

WRONG # 4: Малі літери "i":

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

WRONG # 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

Я також зіткнувся з цим, ввівши службу А в службу В і навпаки.

Я думаю, що це добре, що це не вдається швидко, тому що, мабуть, цього слід уникати . Якщо ви хочете, щоб ваші послуги були більш модульними та повторно використовувались, краще максимально уникати кругових посилань. Цей пост висвітлює підводні камені, що оточують це.

Тому в мене є такі рекомендації:

• Якщо ви вважаєте, що заняття взаємодіють занадто часто (я кажу про заздрість до функції ), ви можете розглянути питання про об'єднання двох служб у 1 клас .
• Якщо вищезгадане не працює для вас, подумайте про використання третьої послуги , (an EventService), яку обидві служби можуть вводити для обміну повідомленнями.

На благо шукачів; Я отримав цю помилку. Це був просто зниклий символ @.

Тобто це створює Can't resolve all parameters for MyHttpServiceпомилку.

Injectable()
export class MyHttpService{
}

Додавання відсутнього @символу виправляє його.

@Injectable()
export class MyHttpService{
}

У моєму випадку мені потрібно було додати import "core-js/es7/reflect";свою заявку, щоб зробити @Injectableроботу.

Інша можливість - не emitDecoratorMetadataвстановити значення true у tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Ви отримуєте цю помилку, якщо у вас є служба A, яка залежить від статичної властивості / способу обслуговування B, а сама служба B залежить від послуги A через введення залежності. Отже, це якась кругова залежність, хоча це не так, оскільки властивість / метод статичні. Можливо, помилка, яка виникає в поєднанні з AOT .

Окрім зниклих @Injectable() декоратора

Відсутній @Injectable()декоратор у абстрактному класі видав Не вдається вирішити всі параметри для обслуговування: (?) Потрібно, щоб він був присутнім, MyServiceяк і у похідному класі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) {}

для мене це було просто відсутністю ()в @Injectable. Правильним є @Injectable ()

Видалення параметрів з методу інжекційного конструктора () вирішило це для мого випадку.

У моєму випадку це було через плагін Augury, відключити його буде добре. Альтернативний варіант - aot, також працює.

усі кредити на @ Boboss74, він відповів тут: https://github.com/angular/angular/isissue/23958

Ну для мене проблема була ще більше дратує, я користувався сервісом у межах сервісу і забув додати його як залежність у appModule! Сподіваємось, це допоможе комусь заощадити кілька годин, розбиваючи додаток, лише знову створити його

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

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

У моєму випадку передача неправильних параметрів конструктору генерує цю помилку, основне уявлення про цю помилку полягає в тому, що ви несвідомо передали якісь неправильні аргументи будь-якій функції.

export class ProductComponent {
    productList: Array<Product>;

    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';

У моєму випадку я намагався розширити " NativeDateAdapter", щоб перемогти "format(date: Date, displayFormat: Object) " метод, " метод.

У програмі AngularMaterial-2 DatePicker.

Так я в основному забув додати @Injectableанотацію.

Після того як я додаю це до свого класу "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

Помилка пішла.

Ця відповідь може бути дуже корисною для цієї проблеми. Крім того, для мого випадку defaultпричиною було експортування послуги .

WRONG:

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

ПРАВИЛЬНО:

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

Це може бути дуже важкою проблемою для усунення помилок через відсутність зворотного зв'язку в помилці. Якщо ви стурбовані фактичною циклічною залежністю, ось найголовніше, що слід переглянути в сліді стека: a) ім'я служби; b) параметр конструктора в цій службі, який має знак питання, наприклад, якщо він виглядає так:

не вдається вирішити всі параметри для AuthService: ([Object Object], [object Object], [object Object], [object Object],?)

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

Звідти вам просто потрібно роз’єднати 2 сервіси шляхом реструктуризації коду.

Я зіткнувся з цією помилкою, помиляючи ім'я служби, тобто конструктор (приватна myService: MyService ).

Щодо помилково написаних служб, я зміг визначити, яка служба була проблемою (у конструкторі було декілька), оглянувши сторінку в Chrome-> Console. Ви побачите як частину повідомлення список масиву "параметрів", відобразивши об'єкт Object, object Object,? (або щось подібне). Зауважте, де "?" є і це позиція служби, яка викликає проблему.

Хоча впорядкування експортованих класів з-під бочок, можливо, було зазначено, наступний сценарій також може мати той же ефект.

Припустимо , у вас є класи 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) {}
}

У моєму випадку я експортував клас та Enum з того самого файлу компонентів:

mComponent.component.ts:

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

Потім я намагався використовувати MyEnumз дитини MyComponentClass. Це спричинило помилку усунення всіх параметрів .

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

Як згадував Гюнтер Зехбауер, це відбувається через те, що послуга або компонент є циркульно залежними.

Якщо ваша послуга визначена в тому ж файлі, що і компонент (який її споживає), і служба визначається після компонента у файлі, ви можете отримати цю помилку. Це пов’язано з тим самим питанням "forwardRef", про яке згадували інші. Наразі VSCode не дуже добре показує вам цю помилку і збірка успішно компілюється.

Запуск збірки --aotможе замаскувати цю проблему завдяки тому, як працює компілятор (можливо, це стосується струшування дерев).

Рішення: Переконайтеся, що послуга визначена в іншому файлі або перед визначенням компонента. (Я не впевнений, чи можна в цьому випадку використовувати формат forwardRef, але це здається незграбним).

Якщо у мене дуже простий сервіс, який дуже сильно прив’язаний до компонента (на зразок моделі перегляду) - наприклад. ImageCarouselComponent, Я можу назвати це, ImageCarouselComponent.service.tsщоб він не змішувався з іншими моїми послугами.

У моєму випадку це була кругла довідка. У мене було виклик MyService Myservice2 та MyService2, який дзвонив MyService.

Не добре :(

У моєму випадку причиною було наступне:

• мій сервіс для ін'єкцій. Поширений ще один клас B
• B мав конструктор, який вимагав аргументу
• Я не визначив жодного конструктора в A

Як наслідок, при спробі створити об’єкт A конструктор за замовчуванням не вдався. Я поняття не маю, чому це не помилка компіляції.

Я вирішив це, просто додавши конструктор в A, який правильно називався конструктором B.

Отримав!

Якщо жоден з перерахованих вище відповідей вам не допоміг, можливо, ви імпортуєте якийсь елемент із того самого файлу, куди компонент вводить послугу.

Я пояснюю краще:

Це службовий файл :

// 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');
}

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

для кутових 6 та новіших версій спробуйте

@Injectable({
  providedIn: 'root'
})

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

переваги

• немає необхідності додавати послугу в будь-який модуль (буде автоматично виявлено)
• сервіс буде одиночним (оскільки він буде введений в корінь)

[ кутові документи ]