angular-cli 6 (with webpack 4) compatibility #3491

igor-dv · 2018-04-26T13:09:42Z

What I did

Upgraded to v6 of the Angular related deps
Adopt migration of the angular-cli.json -> angular.json
Update peers to >=6

Quramy · 2018-04-27T07:43:24Z

app/angular/src/server/angular-cli_config.js

@@ -4,7 +4,7 @@ import { logger } from '@storybook/node-logger';

 function isAngularCliInstalled() {


nit: @angular/cli module is no longer needed, so I prefer such as isBuildAngularInstalled.

Quramy · 2018-04-29T09:46:06Z

app/angular/src/server/angular-cli_config.js

@@ -21,12 +21,19 @@ export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
    throw new Error('.angular-cli.json must have apps entry.');
  }
  const appConfig = cliConfig.apps[appIndex];
+  const { root, styles, scripts } = appConfig;


We should read the build options from angular.json (not .angular-cli.json). And the structures of them are not compatible.

const angularJson = JSON.parse(fs.readFileSync(path.resolve(dirToSearch, 'angular.json'), 'utf8')) const project = angularJson['projects'][angularJson['defaultProject']]; const cliWebpackConfigOptions = { buildOptions: project.architect.build.options, root: project.root, projectRoot: dirToSearch, supportES2015: false, tsConfig: { options: { }, fileNames: [], errors: [], }, tsConfigPath: path.resolve(dirToSearch, 'src/tsconfig.app.json'), };

I've created the sample repo to extract webpack config object using @angular-devkit/build-angular
https://github.com/Quramy/how-to-extract-webpack-conf-from-angular-cli

Quramy · 2018-04-29T09:58:07Z

examples/angular-cli/package.json

-    "@angular/platform-browser": "^5.2.10",
-    "@angular/platform-browser-dynamic": "^5.2.10",
-    "@ngrx/store": "^5.2.0",
+    "@angular/common": "^6.0.0-rc.5",


As mentioned above, new angular/cli v6 needs not .angular-cli.json but angular.json. I think it's better to re-generate the example project with ng new angular-cli.

Stable 6 version is out now, please upgrade

Yeah, I am on it

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

codecov · 2018-05-07T14:59:20Z

Codecov Report

Merging #3491 into master will decrease coverage by 0.03%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #3491      +/-   ##
==========================================
- Coverage   41.45%   41.42%   -0.04%     
==========================================
  Files         458      459       +1     
  Lines        5075     5077       +2     
  Branches      853      855       +2     
==========================================
- Hits         2104     2103       -1     
  Misses       2464     2464              
- Partials      507      510       +3

Impacted Files	Coverage Δ
app/angular/src/server/wrapInitialConfig.js	`0% <ø> (ø)`	⬆️
addons/jest/src/components/Panel.js	`0% <ø> (ø)`	⬆️
app/angular/src/server/angular-cli_config.js	`0% <0%> (ø)`	⬆️
app/angular/src/server/angular-cli_utils.js	`0% <0%> (ø)`
addons/storysource/src/StoryPanel.js	`0% <0%> (ø)`	⬆️
addons/events/src/components/Event.js	`0% <0%> (ø)`	⬆️
addons/storysource/src/loader/inject-decorator.js	`100% <0%> (ø)`	⬆️
addons/storysource/src/loader/generate-helpers.js	`100% <0%> (+9.37%)`	⬆️

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 a46d3e8...9b13bfc. Read the comment docs.

…the angular.json

igor-dv · 2018-05-07T18:49:43Z

@Quramy, I have a strange thing with "assets" prop.

I was needed to override it like this:

buildOptions: {
      ...project.architect.build.options,
      assets: [],
    },

Otherwise, I am getting an error from this code:

which is strange because assets were generated by angular-cli and they are:

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ]

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

igor-dv · 2018-05-13T08:16:15Z

@klimentru1986, after your angular PRs, I assume you can help here =)

klimentru1986 · 2018-05-13T17:21:25Z

@igor-dv , i find example in https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts
, rewrite it, and send request #3578

It`s just a bit ugly, but it is prototype.

I think the best way is to rewrite this part of angular-storybook to typescript and use angular-devkit default methods with observable. ))

daiky00 · 2018-05-15T01:09:29Z

is this going to get fixed?

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

igor-dv · 2018-05-16T11:22:31Z

app/angular/src/server/angular-cli_utils.js

@@ -0,0 +1,55 @@
+import fs from 'fs';
+import { basename, dirname, normalize, relative, resolve } from '@angular-devkit/core';


If someone doesn't use angular-cli, will this dep still appear? I assume that it won't, that's why we added the isBuildAngularInstalled func

ndelangen · 2018-05-23T22:29:54Z

What's the status of this @igor-dv ?

…egration # Conflicts: # app/angular/src/server/config/webpack.config.js # examples/angular-cli/package.json # package.json # yarn.lock

igor-dv · 2018-06-02T16:03:03Z

Something bad happens with the static build after the merge from master 🤔

Looks related to webpack

igor-dv · 2018-06-03T18:22:43Z

@Hypnosphi, do we have any WIP PR with upgrading webpack to 4.10.2 ? Looks like it solves a static build problem here

…egration # Conflicts: # examples/marko-cli/package.json # yarn.lock

santialbo-actimo · 2018-06-11T10:23:31Z

app/angular/src/server/angular-cli_utils.js

+  }
+
+  return assetPatterns.map(assetPattern => {
+    const assetPath = normalize(assetPattern);


Hi @igor-dv sorry to nudge you like this. I'm getting a an error here.
At this point my asset pattern looks like this:

{ glob: '**/*', input: 'apps/viewer/src/assets', output: '/assets' }

which throws the following error:

TypeError: path.match is not a function

Thanks, will take a look

TheDevelolper · 2021-09-18T21:42:19Z

I'm not sure what's happening with this issue? Is it being looked at? Is it resolved? What's the fix?

my angular.json looks like this:

First bit still ugly commit for the new angular-cli compatibility

96b5668

igor-dv added compatibility with other tools ci: do not merge angular labels Apr 26, 2018

igor-dv self-assigned this Apr 26, 2018

igor-dv requested a review from alterx as a code owner April 26, 2018 13:09

WIP

575ad6a

igor-dv added the BREAKING CHANGE label Apr 26, 2018

Quramy suggested changes Apr 29, 2018

View reviewed changes

Merge remote-tracking branch 'origin/master' into new-angular-cli-int…

b74b4f8

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

igor-dv added 2 commits May 7, 2018 21:26

deps upgrade + update angular-cli_config.js based on a new format of …

06e6e05

…the angular.json

Remove back silent return

a36fc9f

igor-dv added 3 commits May 7, 2018 22:10

add dist to ignore list for jest in angular-cli example

c8ace6c

Update snapshots

48044eb

Merge remote-tracking branch 'origin/master' into new-angular-cli-int…

68c4b61

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

Hypnosphi mentioned this pull request May 12, 2018

@angular/core versions available: 6.0.0 #3541

Closed

klimentru1986 mentioned this pull request May 13, 2018

New angular cli integration #3578

Closed

igor-dv added 2 commits May 15, 2018 08:00

Merge remote-tracking branch 'origin/master' into new-angular-cli-int…

a41e08a

…egration # Conflicts: # examples/angular-cli/package.json # yarn.lock

Use changes based on #3491 for the assets normalization

a25b4cd

igor-dv commented May 16, 2018

View reviewed changes

ndelangen added this to the v4.0.0 milestone May 23, 2018

Merge remote-tracking branch 'origin/master' into new-angular-cli-int…

45a29df

…egration # Conflicts: # app/angular/src/server/config/webpack.config.js # examples/angular-cli/package.json # package.json # yarn.lock

igor-dv requested a review from renaudtertrais as a code owner May 31, 2018 16:56

Fix snapshots

d4ea7e4

igor-dv added 2 commits June 2, 2018 18:49

Fix warnings based on angular/universal-starter#593

1689458

Update versions

28a06ac

Temporary update webpack to 4.10.2

a32e314

igor-dv requested review from alexandrebodin, danielduan, Gongreg, naipath, ndelangen, rmevans9, tmeasday and usulpro as code owners June 3, 2018 17:49

Change angular peers to >=6

7bbaf8f

This was referenced Jun 4, 2018

Styles no longer imported after updating to v4.0.0-alpha - Angular 6 #3605

Closed

Storybook not global styles.scss file #3618

Closed

Angular assets not available - 404 error #3711

Closed

Update 34 dependencies from npm #3712

Merged

Merge remote-tracking branch 'origin/master' into new-angular-cli-int…

9b13bfc

…egration # Conflicts: # examples/marko-cli/package.json # yarn.lock

igor-dv added ready and removed ci: do not merge labels Jun 6, 2018

ndelangen approved these changes Jun 6, 2018

View reviewed changes

igor-dv merged commit b4d4704 into master Jun 7, 2018

igor-dv deleted the new-angular-cli-integration branch June 7, 2018 13:56

santialbo-actimo reviewed Jun 11, 2018

View reviewed changes

dependencies bot mentioned this pull request Jan 15, 2021

Update 25 dependencies from npm #2724

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular-cli 6 (with webpack 4) compatibility #3491

angular-cli 6 (with webpack 4) compatibility #3491

igor-dv commented Apr 26, 2018 •

edited

Loading

Quramy Apr 27, 2018

Quramy Apr 29, 2018

Quramy Apr 29, 2018

Hypnosphi May 7, 2018

igor-dv May 7, 2018 •

edited

Loading

codecov bot commented May 7, 2018 •

edited

Loading

igor-dv commented May 7, 2018

igor-dv commented May 13, 2018

klimentru1986 commented May 13, 2018 •

edited

Loading

daiky00 commented May 15, 2018

igor-dv May 16, 2018

ndelangen commented May 23, 2018

igor-dv commented Jun 2, 2018 •

edited

Loading

igor-dv commented Jun 3, 2018

santialbo-actimo Jun 11, 2018 •

edited

Loading

igor-dv Jun 11, 2018

TheDevelolper commented Sep 18, 2021 •

edited

Loading

		@@ -4,7 +4,7 @@ import { logger } from '@storybook/node-logger';

		function isAngularCliInstalled() {

		@@ -0,0 +1,55 @@
		import fs from 'fs';
		import { basename, dirname, normalize, relative, resolve } from '@angular-devkit/core';

angular-cli 6 (with webpack 4) compatibility #3491

angular-cli 6 (with webpack 4) compatibility #3491

Conversation

igor-dv commented Apr 26, 2018 • edited Loading

What I did

Quramy Apr 27, 2018

Choose a reason for hiding this comment

Quramy Apr 29, 2018

Choose a reason for hiding this comment

Quramy Apr 29, 2018

Choose a reason for hiding this comment

Hypnosphi May 7, 2018

Choose a reason for hiding this comment

igor-dv May 7, 2018 • edited Loading

Choose a reason for hiding this comment

codecov bot commented May 7, 2018 • edited Loading

Codecov Report

igor-dv commented May 7, 2018

igor-dv commented May 13, 2018

klimentru1986 commented May 13, 2018 • edited Loading

daiky00 commented May 15, 2018

igor-dv May 16, 2018

Choose a reason for hiding this comment

ndelangen commented May 23, 2018

igor-dv commented Jun 2, 2018 • edited Loading

igor-dv commented Jun 3, 2018

santialbo-actimo Jun 11, 2018 • edited Loading

Choose a reason for hiding this comment

igor-dv Jun 11, 2018

Choose a reason for hiding this comment

TheDevelolper commented Sep 18, 2021 • edited Loading

igor-dv commented Apr 26, 2018 •

edited

Loading

igor-dv May 7, 2018 •

edited

Loading

codecov bot commented May 7, 2018 •

edited

Loading

klimentru1986 commented May 13, 2018 •

edited

Loading

igor-dv commented Jun 2, 2018 •

edited

Loading

santialbo-actimo Jun 11, 2018 •

edited

Loading

TheDevelolper commented Sep 18, 2021 •

edited

Loading