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

[sharikovvladislav]

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 [email protected]: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/[email protected] with Ivy enabled.
• ivy-ngcc is a tool to make node_modules Ivy compatible.
• with Ivy disabled everything works correctly

[sharikovvladislav]

I will check this on the latest 9.0.0-next.10 angular version in the nearest future

[kroeder]

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]

@sharikovvladislav in your error screenshot rxjs is causing the error. Is there a pre-release of rxjs that might fix this issue?

[sharikovvladislav]

@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]

This is how Angular compiles the code before Ivy (I have angularCompilerOptions.enableIvy enabled, but I didn't use ivy-ngcc after installing the depencies):

In Ivy you don't have ngfactories. Here you have it. So it is not Ivy mode.

Lets check this.target expression. This is how it works (before Ivy):

[sharikovvladislav]

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]

Now, let me check it with angular 9.0.0-next.10

[sharikovvladislav]

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 [email protected]. 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]

I also tried to compile @storybook/angular package through ivy-ngcc tool and got no result.

Don't you think angular/angular#30565 could help?

[kroeder]

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]

🤦‍♂ Should have scrolled down. Styles are just not applied

They are inline styled (using the bootstrapped app.component.ts)

Works just fine when moving the css code from app.component.html to app.component.css
this screenshot is Angular 9 btw.

[sharikovvladislav]

I will check it tomorrow morning.

[sharikovvladislav]

What is your @angular/cli version? You said screenshots are showing 9 version, but you created angular-8 app (the name).

[sharikovvladislav]

@kroeder What is the code of your story?

[kroeder]

I tried 8 and 9 - can't tell you the version right now
Regarding the story I just set component: AppComponent - doesn't matter which story file

I'm at work and have no access to my project right now

[sharikovvladislav]

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

[kroeder]

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.

[sharikovvladislav]

@kroeder do you have any planned released date for the next stable version of @angular/storybook?

[sharikovvladislav]

Arrrgh... In our project we don't @angular/cli at the moment. My mate @nickbullock has this task at the moment :D

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 :D).

[sharikovvladislav]

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 :)

[shilman]

Great work @kroeder @sharikovvladislav!!! 👏 👏 👏

[sharikovvladislav]

@shilman @kroeder
any info how to supress exeption in the message above?

[samsoedien]

I had similar console errors using storybook 5.2.3. Updated to 5.2.4 and it resolved all issues for me!

[sharikovvladislav]

I got it on next version :(

вт, 15 окт. 2019 г. в 14:59, Samsoedien [e-mail]:

I had similar console errors using storybook 5.2.3. Updated to 5.2.4 and
it resolved all issues for me!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybookjs/storybook/issues/8370?email_source=notifications&email_token=ABK4V7UA6DDBZFW4ZBQYA5LQOWWDFA5CNFSM4I7LDW2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBIPKTQ#issuecomment-542176590,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABK4V7VRI3WTUET6EBTQPOLQOWWDFANCNFSM4I7LDW2A
.

[sharikovvladislav]

@samsoedien wait, do you mean ERROR TypeError: Cannot read property 'clear' of undefined message or messages from https://github.com/storybookjs/storybook/issues/8370#issuecomment-542108871?

I tried 5.2.4 and it haven't fixed the problem from my initial message in this issue.

[samsoedien]

It could be that the issues I had were unrelated to the problem you are having. I couldn't get the components rendered in storybook and kept getting ERROR TypeError: Cannot read property 'hooks' of undefined in 5.2.3. The storybook examples rendered without problems. Only when I imported my angular components using either the storiesOf API or CSF notation, I couldn't get them rendered.

[lorenzodianni]

There are some news about this issue?

[salmoro]

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

[shilman]

That's great news @salmoro!! I'm going to close this issue and if it's still breaking for people they can comment & I'll reopen.

[chriscarpenter12]

So @kroeder or @sharikovvladislav how do we officially run storybook with Ivy enabled? I was testing 6.0.0-beta.4 on an Angular 9 library but cannot figure out how to enable Ivy view engine.

[caraie]

same question here, is there any workaround available?