Storybook: Angular 9 support please

[meriturva]

We have few problems with Angular 9, for example when we build storybook we just jet error as:

Unexpected value 'MyModule' imported by the module 'DynamicModule'. Please add a @NgModule annotation.

or when we run storybook it just tries to load all html file template without success:

are you going to plan Angular 9 support?

Thanks.

[meriturva]

I had time to investigate more on the issue about Angular 9 support and I found that the main problem is related to library integration.
I have created a repository to replicate issues. Here the link: https://github.com/meriturva/angular-9-library-storybook

before start storybook just be sure you have compiled library with: ng build @diego/pippo

@shamin If you need any other information just tell me!

[kroeder]

Thanks for the report. We already added angular 9 tests but as you have pointed out this seems to be a different setup. I will look into this issue asap

[meriturva]

So thanks @kroeder .
The main problem is related to how components imported on MDX. For example on project we have:

Dosen't work: import { PippoComponent } from '@diego/pippo';

Works correctly: import { PippoComponent } from '../lib/pippo.component';

Actually on angular 8 works both.

[kroeder]

It also works if you change this in your root ./tsconfig.json

    "paths": {
      "@diego/pippo": [
//        "dist/diego/pippo/diego-pippo",
//        "dist/diego/pippo"
        "projects/diego/pippo/src/public-api.ts"
      ]
    }

I'm actually surprised this has worked in Angular 8 🤔

It also works if you replace templateUrl with template in your component. After ng build the bundled code still contains templateUrl but it doesn't exists anymore (obviously).

Instead, it should render this I think

var PippoComponent = /** @class */ (function () {
    function PippoComponent() {
    }
    PippoComponent.prototype.ngOnInit = function () {
    };
    PippoComponent.ɵfac = function PippoComponent_Factory(t) { return new (t || PippoComponent)(); };
    PippoComponent.ɵcmp = ɵɵdefineComponent({ type: PippoComponent, selectors: [["lib-pippo"]], decls: 2, vars: 0, template: function PippoComponent_Template(rf, ctx) { if (rf & 1) {
            ɵɵelementStart(0, "p");
            ɵɵtext(1, " pippo works!\n");
            ɵɵelementEnd();
        } }, encapsulation: 2, changeDetection: 0 });
    return PippoComponent;
}());

Not related to this issue
In our companies' repo we also just point to public_api.ts during development and added a build step that changes all paths in CI from projects/... to dist/.... This is because as soon as you have 2 or more libraries in one repo and you have to build --watch everything then Angular does not know in which order it has to build each lib if they depend on each other

[meriturva]

@kroeder Thanks for your help...about watching the external library (we have a least 50) this is really really good advice... I will try a little bit and check it.
We are hoping to introduce Bazel quite soon but in meanwhile we are going to test your solution

[meriturva]

I have implemented tsconfig.json path changes as mentioned by @kroeder and Storybook works like a charm (both serve and build).
I have also introduced a new script to our pipeline to restore correct paths on production build time.

really really thanks @kroeder

@shilman do I have to close the issue or do you want to make Storybook works also on standard paths angular cli adds generating a new library?

[shilman]

I'll let @kroeder make the call on closing this! 🙏

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

[Grace-Dmello]

Faced similar issues with angular 9. @kroeder solution works. However, it will be great if the storybook fixes the issue.

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

[jeroenheijmans]

To a degree Angular 9 support is in place. I'm not sure if this issue and OP's problem were solved (I'm not sure what the issue is or why we did not experience it).

The only open issue I found I logged separely in #10302 and is about running a "Mono-repo with micro-apps" setup, and getting Storybook to run for multiple micro-apps.

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