Angular dependency injection not working #15185

massi08 · 2021-06-09T14:24:25Z

Describe the bug
Angular dependency injection doesn't seem to work right with Angular 9.

To Reproduce
Simply import ChangeDetectorRef in component constructor

  constructor(private cdr: ChangeDetectorRef) {
  }

Component story:

import {RadioComponent, RadioGroupComponent} from '@engie-group/fluid-design-system-angular';
import {Meta, moduleMetadata, Story} from '@storybook/angular';

export default {
  title: 'Radio/Radio Group',
  component: RadioGroupComponent,
  argTypes: {
    value: {
      description: 'Radio group selected value',
      control: {
        type: null,
      },
    },
    selected: {
      description: 'Radio group selected radio component',
    },
    name: {
      description: 'Radio group name, this will force all the children radios to have this name',
    },
    isDisabled: {
      description: 'Whether the radio group is disabled or not, this will force all the children radios be disabled or not depending on this value',
      control: {
        type: 'boolean'
      },
    },
    orientation: {
      description: 'Whether the radio group should be displayed in column or row',
      control: {
        type: 'radio',
      },
      table: {
        defaultValue: {
          summary: 'column'
        }
      }
    },
    required: {
      description: 'Whether radio is required or not',
      control: {
        type: null,
      },
    },
    valueChange: {
      description: 'Output that emits checked value on change only',
      control: {
        type: null,
      },
    },
  },
  decorators: [
    moduleMetadata({
      declarations: [RadioGroupComponent, RadioComponent],
    }),
  ],
  parameters: {
    docs: {
      description: {
        component: '`<nj-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`'
      }
    },
  }
} as Meta;

export const RadioGroup: Story = (args) => ({
  props: {
    orientation: args.orientation,
    value: args.value,
    isDisabled: args.isDisabled,
  },
  template: `
    <nj-radio-group [value]="${args.value}" [isDisabled]="${args.isDisabled}" [orientation]="${args.orientation}">
     <nj-radio value="option1">Option 1</nj-radio>
     <nj-radio value="option2" [isDisabled]="true">Option 2</nj-radio>
     <nj-radio value="option3">Option 3</nj-radio>
     <nj-radio value="option4">Option 4</nj-radio>
    </nj-radio-group>
    `
});

RadioGroup.args = {
  orientation: 'column',
  isDisabled: null,
  value: null,
};

Browser Error:

ERROR NullInjectorError: StaticInjectorError(ElementsModule)[RadioComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[RadioComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:937)
    at resolveToken (core.js:12202)
    at tryResolveToken (core.js:12146)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:12040)
    at resolveToken (core.js:12202)
    at tryResolveToken (core.js:12146)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:12040)
    at resolveNgModuleDep (core.js:21927)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:22528)
    at resolveDep (core.js:22907)

Unhandled Promise rejection: StaticInjectorError(ElementsModule)[RadioComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[RadioComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: StaticInjectorError(ElementsModule)[RadioComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[RadioComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:937)
    at resolveToken (core.js:12202)
    at tryResolveToken (core.js:12146)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:12040)
    at resolveToken (core.js:12202)
    at tryResolveToken (core.js:12146)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:12040)
    at resolveNgModuleDep (core.js:21927)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:22528)
    at resolveDep (core.js:22907) NullInjectorError: StaticInjectorError(ElementsModule)[RadioComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[RadioComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:6006/vendors~main.iframe.bundle.js:100945:25)
    at resolveToken (http://localhost:6006/vendors~main.iframe.bundle.js:112210:24)
    at tryResolveToken (http://localhost:6006/vendors~main.iframe.bundle.js:112154:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:6006/vendors~main.iframe.bundle.js:112048:20)
    at resolveToken (http://localhost:6006/vendors~main.iframe.bundle.js:112210:24)
    at tryResolveToken (http://localhost:6006/vendors~main.iframe.bundle.js:112154:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:6006/vendors~main.iframe.bundle.js:112048:20)
    at resolveNgModuleDep (http://localhost:6006/vendors~main.iframe.bundle.js:121935:29)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:6006/vendors~main.iframe.bundle.js:122536:16)
    at resolveDep (http://localhost:6006/vendors~main.iframe.bundle.js:122915:45)
api.onUnhandledError @ zone.js:690
handleUnhandledRejection @ zone.js:713
_loop_1 @ zone.js:704
api.microtaskDrainDone @ zone.js:708
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:231
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:251
scheduleResolveOrReject @ zone.js:881
resolvePromise @ zone.js:819
(anonymous) @ zone.js:739
webpackJsonpCallback @ bootstrap:25
(anonymous) @ 3.iframe.bundle.js:1

System
Environment Info:


  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 87.0
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/addon-controls: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/addon-docs: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/addon-essentials: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/addon-links: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/angular: ^6.3.0-alpha.22 => 6.3.0-alpha.22 
    @storybook/theming: ^6.3.0-alpha.22 => 6.3.0-alpha.22

Additional context
I've seen other closed tickets related to this issue (#7544), but the fix is to add "emitDecoratorMetadata": true in tsconfig.json.
This fix doesn't seem to work in my case.

The text was updated successfully, but these errors were encountered:

massi08 · 2021-06-11T11:38:54Z

Some additional info: The project where this happens is a monorepo powered by Lerna (https://github.com/lerna/lerna#how-it-works).
So in my story when i Import import {RadioComponent, RadioGroupComponent} from '@engie-group/fluid-design-system-angular'; it actually imports the components from a package which is a linked directory in my projet, not from a package downloaded from npm.

kroeder · 2021-06-14T07:42:07Z

Long shot: You use component: RadioGroupComponent and also use RadioComponent in the stories
Doesn't this mean you never actually declare RadioComponent? I wonder why there's no "RadioComponent is not part of an NgModule" error

Can you reproduce this with e.g. a new hello-world component that does nothing but injecting the ChangeDetectorRef?

massi08 · 2021-06-14T14:12:07Z

Yes i still get the same issue.

Here's the component:

import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';

@Component({
  selector: 'nj-test-cdr',
  templateUrl: './test-cdr.component.html',
  styleUrls: ['./test-cdr.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestCdrComponent {

  constructor(private cdr: ChangeDetectorRef) {
  }
}

template: test-cdr.component.html

<p>test-cdr works!</p>

its story:

import {TestCdrComponent} from '@engie-group/fluid-design-system-angular';
import {Meta, moduleMetadata, Story} from '@storybook/angular';

export default {
  title: 'TestCdr/Test Cdr',
  component: TestCdrComponent,
  decorators: [
    moduleMetadata({
      declarations: [TestCdrComponent],
    }),
  ],
} as Meta;

export const TestCdr: Story = (args) => ({
  template: `
     <nj-test-cdr></nj-test-cdr>
    `
});

Here's the browser preview with the same error:

massi08 · 2021-06-24T14:33:56Z

Any news about this issue ? I still have not found a fix yet

ihor-panasiuk95 · 2021-07-12T06:42:35Z

I also experience a similar issue.
My story

My component

My service

I don't see any errors. I just don't see the story in the preview. But once I comment constructor in ExclusiveFeatureModalService and the body of openExclusiveFeatureModal method in that service, I do see the story in preview. Don't know what happens.
I explicitly set an empty object as ExclusiveFeatureModalService so I expect that the framework won't try to add exactly ExclusiveFeatureModalService but actually it seems like instead of my mock it adds ExclusiveFeatureModalService and this causes the story not showing.
I don't see any specific error in the console that would help me to solve that.

ihor-panasiuk95 · 2021-07-12T07:03:31Z

Note: storybook version is 6.3.4

massi08 · 2021-07-12T13:37:08Z

@ihor-panasiuk95 did you try to add ModalWindowService to providers as well ?

ihor-panasiuk95 · 2021-07-12T14:28:19Z

@massi08 yes

ihor-panasiuk95 · 2021-07-12T14:29:54Z

when I try to add the full chain of dependencies it works. But when I want to provide mock via { provide: ExclusiveFeatureModalService, useValue: {}} (like in unit-tests) the high-level service it doesn't work.

ihor-panasiuk95 · 2021-07-12T14:31:03Z

There are no errors. The preview just doesn't display that story in the list. But the rest of stories that cover components without dependencies are displayed normally.

ihor-panasiuk95 · 2021-07-14T13:38:16Z

My issue was solved. It wasn't related to DI actually. I created the feature request here: #15582

massi08 · 2021-10-18T13:48:14Z

@kroeder any news on this I am still experiencing this issue on many of my components using ChangeDetectorRef

shilman · 2023-06-07T13:07:12Z

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

massi08 added bug needs triage labels Jun 9, 2021

shilman added the angular label Jun 10, 2021

shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular dependency injection not working #15185

Angular dependency injection not working #15185

massi08 commented Jun 9, 2021 •

edited

massi08 commented Jun 11, 2021

kroeder commented Jun 14, 2021 •

edited

massi08 commented Jun 14, 2021

massi08 commented Jun 24, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

massi08 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 14, 2021

massi08 commented Oct 18, 2021

shilman commented Jun 7, 2023

Angular dependency injection not working #15185

Angular dependency injection not working #15185

Comments

massi08 commented Jun 9, 2021 • edited

massi08 commented Jun 11, 2021

kroeder commented Jun 14, 2021 • edited

massi08 commented Jun 14, 2021

massi08 commented Jun 24, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

massi08 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 12, 2021

ihor-panasiuk95 commented Jul 14, 2021

massi08 commented Oct 18, 2021

shilman commented Jun 7, 2023

massi08 commented Jun 9, 2021 •

edited

kroeder commented Jun 14, 2021 •

edited