storybook: @storybook/angular does not work with Angular Ivy

Describe the bug The problem is that I get runtime exception, when I open some story of some Angular Component. The component is not starting.

To Reproduce Steps to reproduce the behavior (ready repro): 1 Clone the repro: git clone git@github.com:sharikovvladislav/angular-ivy-storybook-repro.git (or use HTTPS link: https://github.com/sharikovvladislav/angular-ivy-storybook-repro.git) 2 Go to the created directory: cd angular-ivy-storybook-repro 3 Install the dependencies: yarn 4 Start the storybook: yarn run storybook 5 Open the browser console

Steps to reproduce on the clear example: Preconditions: stable @angular/cli is installed (8.3.8 at the moment, npm i -g @angular/storybook) globally and you have also @storybook/angular installed (npm i -g @storybook/cli). 1 Execute ng new <your-name> --defaults --enable-ivy (or without defaults, just put default values, when ng will ask you to interact) 2 Execute cd <your-name> command 3 Execute sb init 4 Execute ./node_modules/.bin/ivy-ngcc command (this is required by Angular to get Ivy working and probably this step can produce the problem) 5 Go to the src/stories/1-Button.stories.ts and put the following code:

import { storiesOf } from '@storybook/angular';
import { AppComponent } from '../app/app.component';

storiesOf('App Component', module).add('Component with separate template', () => ({
  component: AppComponent,
  props: {},
}));

6 Run the npm run task yarn run storybook or npm run storybook 7 Open the browser console

Expected behavior

I expect simple story with woot text in it and no exceptions in the console.

Actual result

I am getting this error in the console:

ERROR TypeError: Cannot read property 'clear' of undefined
    at SafeSubscriber._next (vendors~main.54eb421…3c3.bundle.js:81321)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendors~main.54eb421…c3.bundle.js:155128)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendors~main.54eb421…c3.bundle.js:155066)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (vendors~main.54eb421…c3.bundle.js:155010)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (vendors~main.54eb421…c3.bundle.js:154987)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next (vendors~main.54eb421…c3.bundle.js:163002)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (vendors~main.54eb421…c3.bundle.js:154987)
    at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (vendors~main.54eb421…c3.bundle.js:162714)
    at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (vendors~main.54eb421…c3.bundle.js:154987)
    at ReplaySubject.push../node_modules/rxjs/_esm5/internal/ReplaySubject.js.ReplaySubject._subscribe (vendors~main.54eb421…c3.bundle.js:1

And I don’t see the rendered text wooot.

Screenshots

Code snippets

The story code is above (in one of the repros).

The component code:

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

@Component({
  selector: 'app-root',
  template: `
  <span>woot</span>

  `
})
export class AppComponent {
  title = 'with-ivy';
}

It references this.target.clear line in your AppComponent in the storybook source code. Here is this line

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-actions: ^5.2.3 => 5.2.3 
    @storybook/addon-links: ^5.2.3 => 5.2.3 
    @storybook/addon-notes: ^5.2.3 => 5.2.3 
    @storybook/addons: ^5.2.3 => 5.2.3 
    @storybook/angular: ^5.2.3 => 5.2.3 
  npmGlobalPackages:
    @storybook/cli: 5.2.3

Additional context

I am using @angular/core@8.2.9 with Ivy enabled.
ivy-ngcc is a tool to make node_modules Ivy compatible.
with Ivy disabled everything works correctly

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 31 (8 by maintainers)

Most upvoted comments

I had the same error as stated in the issue description and it disappeared after upgrading to "@storybook/angular": "5.3.0-rc.7"

salmoro on Jan 2, 2020

same question here, is there any workaround available?

caraie on Dec 7, 2020

Looks like it is same using latest angular version (in my project, not in storybook).

Here is the list of known issues: https://docs.google.com/document/d/1Dije0AsJ0PxL3NaeNPxpYDeapj30b_QC0xfeIvIIzgg/preview I found it there: https://blog.angular.io/its-time-for-the-compatibility-opt-in-preview-of-ivy-38f3542a282f

Probably, this can cause error:

Libraries that don’t use Angular Package Format aren’t processed properly with ngcc (examples: AngularFire, Prime NG). See issue: angular/angular#30565.

Let me fully reinstall node_modules and check it again. UPD: absolutely same.

If I understand correctly, I don’t need compile node_modules with ivy-ngcc command in angular@9.0.0-next.10. Probably , this happens on the fly now. Looks like @storybook/angular package in node_modules folders is not processed at all. On Angular@8 version when I called ivy-ngcc tool manually, storybook/angular didn’t appear in list of processed libraries.

sharikovvladislav on Oct 11, 2019

There are some news about this issue?

lorenzodianni on Dec 17, 2019

Wait :DDD

It is just an error in console. Storybook started, whil I was typing the previous message.

I have this exception while storybook is starting:

ERR! Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
ERR!     at Module.require (internal/modules/cjs/loader.js:690:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/Users/vladislav.sharikov/git/ccm_portal/node_modules/@storybook/angular/dist/server/angular-cli_utils.js:19:25)
ERR!     at Module._compile (internal/modules/cjs/loader.js:776:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:690:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/Users/vladislav.sharikov/git/ccm_portal/node_modules/@storybook/angular/dist/server/angular-cli_config.js:29:27)
ERR!     at Module._compile (internal/modules/cjs/loader.js:776:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)

But in general, storybook started and works fine. In Ivy. In our huge project 😃

sharikovvladislav on Oct 15, 2019

Arrrgh… In our project we don’t @angular/cli at the moment. My mate @nickbullock has this task at the moment 😄

I can’t start storybook in our project, since it does not have angular-devkit dependency at the moment. Looks like you need it to get webpack-configs. We have webpack configs extracted (well, actually Angular and Angular CLI did not exist at that moment in the past 😄).

sharikovvladislav on Oct 15, 2019

Oh really? That’s what I have fixed 😄 Haven’t expected that it fixes the usage of Ivy as well Let me confirm this and we might be able to close this. Thanks for all your efforts! It helped a lot.

kroeder on Oct 15, 2019

Looks like it is fixed in alpha.18 according to the CHANGELOG.md file. It works on alpha.19.

sharikovvladislav on Oct 15, 2019

Interesting. I somehow managed to run Ivy instead of the view engine in my project.

Reproduction

npx @angular/cli new angular8-ivy --defaults --enable-ivy
cd angular8-ivy
npx @storybook/cli@next init // maybe it's something we've fixed in next-release branch
npm i raw-loader@^1.0.0 // This is due to another bug with angular2-template-loader
node_modules/.bin/ivy-ngcc
npm run storybook

Result

Before running ivy-ngcc I had no problems. Everything looked as expected (using AppComponent as a story component)
After runing ivy-ngcc I got 0 errors (the one in the screenshot is something different) but somehow not the entire template / styles are rendered/applied

Regarding the missing entry for @storybook/angular in ivy-ngcc

Currently, @storybook/angular is compiled by tsc because we can’t run the angular compiler so far. Maybe it is now possible using ivy-ngcc but it wasn’t possible (or at least I haven’t figured out how) with ngc because we have no real angular project

This is how we create the module that is used to display a story in Angular

https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/helpers.ts#L29

Also worth mentioning

I set aot to true in my angular.json but the generated code uses jit_ Somehow @storybook/angular uses jit and ignores the aot: true - I’m not even sure how activate aot programmatically 🤔

Thank you very much for helping out here!

kroeder on Oct 11, 2019

Now lets compile node_modules using ivy-ngcc tool:

And lets execute npm run storybook command again.

Now we don’t have ngfactories (so Ivy is enabled now):

This is how compiled code of the AppComponent looks like:

This is this.target value now:

This refers to AppComponent (its correct):

Also notice ngContext in this, that also means that Ivy is working.

sharikovvladislav on Oct 11, 2019

@kroeder I think the problem is not about rxjs. It is just a call stack. Your code uses rxjs. Here is it:

https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts:

  // ....
  ngOnInit(): void {
    this.data.pipe(first()).subscribe((data: StoryFnAngularReturnType) => { // rxjs callstack because of this subscription
      this.target.clear(); // the problem is here
      // ....

The problem appears in this line: https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts#L44

this.target is a result of ViewChild query: https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts#L30

sharikovvladislav on Oct 11, 2019

Thanks for reporting this! I wanted to test Ivy as well and had hoped it just works 😬 This is really something we have to fix before Angular 9 is released @shilman - I will start working on this soon

Clarification for non-angular users Ivy is the new rendering engine of Angular and is currently “opt-in” in Angular 8. It’s becoming “opt-out” in Angular 9 so basically every new project starting with Angular 9 will run with Ivy

They are still having next releases and no alpha, beta or rc but it will be released around november I think https://angular.io/guide/releases#release-schedule

@sharikovvladislav I would appreciate any kind of help - I’m not yet familiar with Ivy and the problems it may cause

kroeder on Oct 11, 2019