[Angular] Does not generate 'generated-entry.js' file on my dev server

[alexisponcet]

Describe the bug

Hello everyone, I am using storybook with the last version of angular (9) on my own project. When I try to run start-storybook on my webpack dev server, I have nothing rendered on the screen (just a blank screen without any stories in the left sidebar nor 'no preview' message).

This is exactly the same behaviour as if I wouldn't have defined my stories in my main.js.

Below is my main.js

const angularCompilerPlugin = new AngularCompilerPlugin({
    entryModule: resolve(__dirname, 'modules/core/angular/modules/app.module#AppModule'),
    sourceMap: true,
    nameLazyFiles: true,
    tsConfigPath: resolve(__dirname, 'tsconfig.json'),
    skipCodeGeneration: true
});

module.exports = {
    webpackFinal: (config) => ({
        ...config,
        resolve: {
            extensions: [...common.resolve.extensions]
        },
        module: { ...config.module, ...(process.env.NODE_ENV === 'production' ? prod.module : dev.module) },
        plugins: [...config.plugins, angularCompilerPlugin]
    }),

    stories: ['**/*.stories.ts']
};

I use react and vue as well with exactly the same configuration and everything goes right. The biggest difference I have found during my investigation is that the generated-entry file is not sent on my webpack dev server (through webpack middleware). And there is another difference between react/vue and angular. I do not use angular cli, I have my own angular webpack configuration including ivy, but the loader that I use (ngtools/webpack) requires angularCompilerPlugin that has the particularity to wrap the input file system of previewCompiler. I don't know if this issue is related to storybook itself or webpack. One more thing, I have verified my webpack conf with --debug-webpack and everything was good. Hope you will suggest something. Your team does an awesome work! Thank you!

Versions: Angular : 9.1.1 Storybook/Angular : 5.3.18 Ngtools/webpack: 9.1.1

To Reproduce I don't have any repository to reproduce the error but I think that is pretty simple with a new angular project, an angular webpack configuration and storybook/angular.

Expected behavior To make it work.

Screenshots

System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Binaries: Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm Browsers: Chrome: 81.0.4044.129 Edge: 80.0.361.111 Firefox: 75.0 Safari: 13.1

EDIT : When removing the wrapper around the input file system in core/dist/server/dev-server.js

previewCompiler.inputFileSystem = previewCompiler.inputFileSystem._inputFileSystem;

It works perfectly. I dunno possibly side effects though.

[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!

[ndelangen]

EDIT : When removing the wrapper around the input file system in core/dist/server/dev-server.js

previewCompiler.inputFileSystem = previewCompiler.inputFileSystem._inputFileSystem;

It works perfectly. I dunno possibly side effects though.

I'm not sure what you mean by this.

Could you test if this is a problem with the 6.0.0 beta release as well?

[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!

[alexisponcet]

Hi!

I just installed the 6.0.0-beta.23 version and I still can't load my angular stories. I got exactly the same screen as described in my previous comment. Even with my previous trick, I can't successfully load my stories. I get the feeling that the storybook dev build process does not load core/dist/server/dev-server.js as it did previously.

I know this is a major release but I still do not understand how people can work with storybook 5+ and angular 9.1+. I could make some investigations on the new beta release (6) when I would get more time to see what it is wrong with angular.

[shilman]

@alexisponcet Would love any help you can provide here!

[ndelangen]

I know @kroeder also was working on something storybook + Angular9 related..

[kroeder]

Hey @alexisponcet 👋

I'm in the middle of trying the same. Storybook does not use the AngularCompilerPlugin by default so I thought it might be a door opener for AOT and Ivy stories. Stories currently use the ViewEngine and since this is something that will be removed in the future we really need to do something about that fact.

I ran in exactly the same issue: no navigation, no stories. As soon as I integrated AngularCompilerPlugin I wasn't able to start Storybook properly anymore. I also got no errors nor any hints that could lead me to the cause of the issue.

In the past (< Angular 9) every time I tried to use the AngularCompilerPlugin it had a lot of required fields that Storybook could not fulfill. Something like an entry module. Since Angular 9 it might have changed - Ivy can make modules obsolete, although it lacks still a couple of features that we might need for that.

I try to push my approach later this day. Maybe we can then discuss how to solve this? I bet this would solve multiple issues in @storybook/angular

[alexisponcet]

Gotcha. We got exactly the same issue with webpack and AngularCompilerPlugin. I am reassured that I am not the only one using webpack + my custom angular configuration.

I am pretty sure that is related with this issue : https://github.com/angular/angular-cli/issues/10064 and CachedInputFileSystem. In my opinion, the entry module is not sent to the webpack development server. That does not look like a big issue however.

I am impatient to see your PR and what you have in mind to solve this.

[kroeder]

@alexisponcet I created #11157 This PR is more at a try&error state... let's continue further discussions in the PR maybe?

[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!