Add Angular 6 fixture to the sb-cli tests

[kroeder]

What I did

Created an Angular 6 fixture with ng new angular-cli-v6 --skip-install. The fixture in angular-cli still uses Angular 4.

How to test

Hopefully, CI will test it for me 🙂

[codecov]

Codecov Report

Merging #4464 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4464   +/-   ##
=======================================
  Coverage   35.96%   35.96%           
=======================================
  Files         555      555           
  Lines        6653     6653           
  Branches      871      871           
=======================================
  Hits         2393     2393           
  Misses       3813     3813           
  Partials      447      447

Impacted Files	Coverage Δ
...ngular/src/server/create-fork-ts-checker-plugin.js	100% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ceccc99...6ea12ae. Read the comment docs.

[kroeder]

Test is green even though there are errors in the smoke tests.

This is most likely because angular uses fork-ts-checker-webpack-plugin which starts type checking in a seperate thread and not in the build process itself.

[kroeder]

CodeFactor shows an issue in a file that does not exists anymore 😕
lib\cli\test\fixtures\angular-cli-v7\e2e\protractor.conf.js v7 is now v6 and the protractor directory was removed

[igor-dv]

LGTM

[tmeasday]

I've been testing the LearnStorybook angular code (cc @alterx) w/ @storybook/angular@rc with the just released rc.1, and I think I am still seeing the issue this PR aimed to solve?

Repro:

npx -p @angular/cli ng new taskbox --style less
cd taskbox
npx -p @storybook/cli@rc sb init
yarn start

Output:

> taskbox-angular@0.0.0 start /private/tmp/taskbox-angular
> ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-18T02:12:58.419Z
Hash: 8b29fb3234976af7a07a
Time: 3126ms
chunk {main} main.js, main.js.map (main) 1.89 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 674 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 326 kB [initial] [rendered]

ERROR in node_modules/@storybook/angular/index.d.ts(38,51): error TS2304: Cannot find name 'NodeModule'.
node_modules/@storybook/angular/index.d.ts(42,58): error TS2304: Cannot find name 'NodeModule'.
src/stories/index.stories.ts(8,22): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(13,21): error TS2304: Cannot find name 'module'.
src/stories/index.stories.ts(40,29): error TS2304: Cannot find name 'module'.

Note that yarn storybook does work.

LMK if opening a separate issue makes more sense

(Edited to show correct storybook install command)

[kroeder]

Maybe you need @storybook/cli@4.0.0-rc.1 specifically. The important thing is a correct getstorybook (which is now sb init). You should have a .storybook/tsconfig.json with compiler Options / types in it. If not, it means you might not use the rc.1 cli

[kroeder]

I just tested it with npm and it worked for me doing:

npm i -g @storybook/cli@4.0.0-rc.1
ng new my-app
sb init
npm run storybook

$ npm run storybook

> sb-rc1-test@0.0.0 storybook C:\_myplace\next\sb-rc1-test
> start-storybook -p 6006

info @storybook/angular v4.0.0-rc.1
info
info => Loading presets
info => Loading custom addons config.
info => Found custom tsconfig.json
info => Using default webpack setup based on "angular-cli".
info => Loading angular-cli config.
info => Get angular-cli webpack config.
Starting type checking service...
Using 1 worker with 2048MB memory limit
 10% building modules 2/2 modules 0 activei ｢wdm｣: wait until bundle finished:                                                                                                              webpack built 80c22ccd7867be284bb0 in 1173
3ms
i ｢wdm｣: Hash: 80c22ccd7867be284bb0
Version: webpack 4.21.0
Time: 11733ms

i ｢wdm｣: Compiled successfully.
╭─────────────────────────────────────────────────╮
│                                                 │
│   Storybook 4.0.0-rc.1 started                  │
│                                                 │
│   Local            http://localhost:6006/       │
│   On your network  http://192.168.56.1:6006/    │
│                                                 │
╰─────────────────────────────────────────────────╯

To specifically use @storybook/cli@4.0.0-rc.1 should be documented, though.

@shilman is the npm release tagged with next or latest? So people can install npm i -g @storybook/cli@next instead of a specific rc version ?

Edit: It's actually npm i -g @storybook/cli@rc

[tmeasday]

Argh, sorry I was running npx -p @storybook/cli@rc sb init, and using rc.1. I'll update my comment above.

The issue is not running storybook; it is actually running the angular app itself with yarn start / ng serve.

(I have been specifically testing the rc with LearnStorybook, rest assured it does work with the 3.4 version, I am looking for regressions)

[kroeder]

Ah, could it be that the default tsconfig of angular tries to include *.stories.ts files? If yes, then tsconfig.app.json is the issue 🙁

Can you try to add types: ['node'] to your existing types block in src/tsconfig.app.json ? It should work (as a workaround)
Edit: Can confirm the bug and can confirm that this workaround works "types": ["node"]

@igor-dv fyi. I guess we need to open a new issue for that

[tmeasday]

@kroeder, yes that works.

Perhaps better to add .stories.js or src/stories to the "exclude" section of that file I am guessing?

I suppose we need to change the CLI (sb init) to do this?

[igor-dv]

The Pr is here - #4485 already =)