[6.2.0-beta.1] Angular library not rendering without calling ngcc

Hi iam testing the new angular inline feature (https://github.com/storybookjs/storybook/pull/13525) in our component library (Angular 10).

Sadly this is a private project and i cannot share any source files.

The library is a part of an monorepository and we build the library separate. Afterwards we are linking the library dist-folder to the storybook project.

In the current alpha release (6.2.0-alpha.29) I have to compile the dist-folder with the ngcc compiler after each build, otherwise i get the following error message: zone.js:690 Unhandled Promise rejection: Cannot read property 'id' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'id' of undefined at registerNgModuleType (core.umd.js:24829) at core.umd.js:24840 at Array.forEach (<anonymous>) at registerNgModuleType (core.umd.js:24840) at new NgModuleFactory (core.umd.js:24936) at compileNgModuleFactory__POST_R3__ (core.umd.js:28472) at PlatformRef.push../node_modules/@angular/core/bundles/core.umd.js.PlatformRef.bootstrapModule (core.umd.js:28716) at ElementRendererService.<anonymous> (ElementRendererService.js:89) at step (ElementRendererService.js:53) at Object.next (ElementRendererService.js:34) TypeError: Cannot read property 'id' of undefined at registerNgModuleType (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76527:31) at http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76538:51 at Array.forEach (<anonymous>) at registerNgModuleType (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76538:21) at new NgModuleFactory (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76634:17) at compileNgModuleFactory__POST_R3__ (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:80170:29) at PlatformRef.push../node_modules/@angular/core/bundles/core.umd.js.PlatformRef.bootstrapModule (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:80414:20) at ElementRendererService.<anonymous> (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140803:26) at step (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140767:23) at Object.next (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140748:53)

Example storybook:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  ArgsTable,
  Description,
  Primary,
  PRIMARY_STORY,
  Stories,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { MyCompoennt, MyLibraryModule } from 'dist/my-project';
import React from 'react';

export default {
  title: 'Navigation/MyComponent',
  component: MyCompoennt,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [MyLibraryModule, BrowserAnimationsModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
  },
} as Meta;

const Template: Story = (args) => {
  return {
    props: args,
  };
};

export const Default = Template.bind({});
Default.args = {
  items: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'],
};

[danielleroux]

Okay than i will Update my GitHub example tomorrow.

But in our production environment we have 6.2.0-Alpha.29 and can reproduce the problem.

Maybe it’s a other Problem than the inline feature ?

[ThibaudAV]

@danielleroux Ok thanks for the workaround. I think it might help other people if they have the same problem 🙂 .

Storybook is on its way to working with ivy 🤞 (I hope this will solve this problem )🤞