Storybook: Angular in AOT mode

[andreev-artem]

Is your feature request related to a problem? Please describe.
While developers work on Angular components in JIT mode it's possibly to get additional errors in AOT mode.

Describe the solution you'd like
We need a way to run Angular components in AOT mode while developing.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@kroeder any thoughts on thiss?

[kroeder]

Yes, see https://github.com/storybookjs/storybook/issues/10580#issuecomment-643577649

It's not a duplicate but related. AOT is something that needs to be supported and I'm experimenting with the AngularCompilerPlugin webpack plugin in order to achieve this. So far I was not able to produce AOT code

[stupidawesome]

I use code that depends on Ivy view engine being enabled, so this is a real blocker for me.

Looking at the current implementation, integration with storybook relies heavily on JIT compilation with dynamic calls to NgModule and Component decorators at runtime. AFAIK this won't work with AoT compilation. Ivy is also much stricter than View Engine here.

AoT compilation has many restrictions to consider.

It should be possible to transform CSF stories into AoT compatible code.

Example:

export const Icon = () => ({
    moduleMetadata: {
        imports: [CommonModule],
        declarations: [AppIcon]
    },
    template: `
        <app-icon *ngFor="let icon of icons" [icon]="icon"></app-icon>
    `,
    props: {
        icons
    }
})

should generate something like

@Component({
    selector: "storybook-host",
    template: `
        <app-icon *ngFor="let icon of icons" [icon]="icon"></app-icon>
    `
})
export class CodegenHost {
    icons = icons
}

@NgModule({
    imports: [CommonModule],
    declarations: [AppIcon, CodegenHost],
    bootstrap: [CodegenHost]
})
export class Icon {}

platformBrowserDynamic.bootstrap(Icon)

Then add these as entry points for ngc to compile.

[kroeder]

@stupidawesome good to know, thanks! I think this will help me

I haven't really started (just tried a first working version)
Are you able to help me with https://github.com/storybookjs/storybook/pull/11157 ?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!