Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to load the Angular CLI config (Angular 11.2.5) #14260

Closed
jlabaj opened this issue Mar 17, 2021 · 9 comments
Closed

Failed to load the Angular CLI config (Angular 11.2.5) #14260

jlabaj opened this issue Mar 17, 2021 · 9 comments

Comments

@jlabaj
Copy link

jlabaj commented Mar 17, 2021

I have run the npx sb upgrade --prerelease

I have nuked the node_modules and reinstalled, still the same error

image

"@angular-builders/custom-webpack": "11.0.0",
"@angular-devkit/architect": "0.1102.4",
"@angular-devkit/build-angular": "0.1102.4",
"@angular-devkit/build-ng-packagr": "0.1100.0-next.5",
"@angular-devkit/build-optimizer": "0.1102.4",
"@angular-devkit/build-webpack": "0.1102.4",
"@angular-devkit/core": "11.2.4",
"@angular-eslint/builder": "0.3.0-beta.1",
"@angular-eslint/eslint-plugin": "1.0.0",
"@angular-eslint/eslint-plugin-template": "1.0.0",
"@angular-eslint/template-parser": "1.0.0",
"@angular/animations": "11.2.5",
"@angular/cdk": "11.2.4",
"@angular/cli": "11.2.4",
"@angular/common": "11.2.5",
"@angular/compiler": "11.2.5",
"@angular/compiler-cli": "11.2.5",
"@angular/core": "11.2.5",
"@angular/forms": "11.2.5",
"@angular/language-service": "11.2.5",
"@angular/material": "11.0.0",
"@angular/platform-browser": "11.2.5",
"@angular/platform-browser-dynamic": "11.2.5",
"@angular/router": "11.2.5",
"@angular/upgrade": "11.2.5",
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
"@babel/plugin-proposal-optional-chaining": "7.11.0",
"@babel/preset-env": "^7.7.7",
"@compodoc/compodoc": "1.1.11",
"@ng-select/ng-option-highlight": "0.0.6",
"@ng-select/ng-select": "5.1.0",
"@ngrx/entity": "10.0.0",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "6.0.0",
"@storybook/addon-actions": "6.2.0-rc.2",
"@storybook/addon-essentials": "6.2.0-rc.2",
"@storybook/addon-links": "6.2.0-rc.2",
"@storybook/angular": "6.2.0-rc.2",
"@types/angular": "1.6.57",
"@types/angular-dynamic-locale": "0.1.35",
"@types/angular-mocks": "1.5.10",
"@types/angular-resource": "1.5.15",
"@types/angular-translate": "2.16.2",
"@types/angular-ui-bootstrap": "0.13.46",
"@types/angular-ui-router": "1.1.40",
"@types/core-js": "0.9.46",
"@types/d3": "5.7.2",
"@types/d3-selection": "1.4.2",
"@types/jasmine": "3.6.6",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "3.3.31",
"@types/jqueryui": "^1.12.10",
"@types/jsrender": "0.0.29",
"@types/lodash": "4.14.105",
"@types/node": "12.12.38",

@jlabaj
Copy link
Author

jlabaj commented Mar 17, 2021

@shilman It works if I downgrade to @angular-devkit/build-angular@0.1100.0 but the rebuild times will dip again 10x with Angular 11.2.5

see angular/angular-cli#20235. We cant develop like this.

@shilman
Copy link
Member

shilman commented Mar 17, 2021

@gaetanmaisse can you take a look at this? seems to be related to your previous PR

@jlabaj
Copy link
Author

jlabaj commented Mar 17, 2021

@shilman @gaetanmaisse it works when I explicitly add following to the angular.json:
"optimization": {
"styles": false,
"scrypts": false,
"fonts": false
},

that means no optimization: false or true, but one must define at least one of the properties shown above.

@gaetanmaisse
Copy link
Member

@jlabaj Adding these fields has been done in #13704 so you shouldn't face this issue 🤔 , I tried to reproduce but everything is working fine for me with a fresh Angular CLI project and:

  • Storybook 6.1.21 or 6.2.0-rc2
  • @angular-devkit/build-angular 0.1102.4, 1101.4 or 1100.7

Can you share your angular.json or create a simple repo reproducing the issue?

@jlabaj
Copy link
Author

jlabaj commented Mar 17, 2021

@gaetanmaisse here you go:
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "arbitrarycompany-enterprise": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "less,sass"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack-arbitrarycompany.config.js"
            },
            "allowedCommonJsDependencies": ["rxjs", "rxjs-compat", "inputmask", "quill-emoji", "pixi.js", "jodit"],
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "deleteOutputPath": false,
            "outputHashing": "none",
            "tsConfig": "tsconfig.app.json",
            "namedChunks": false,
            "showCircularDependencies": false,
            "extractLicenses": false,
            "statsJson": false,
            "progress": true,
            "sourceMap": false,
            "buildOptimizer": false,
            "aot": true,
            "preserveSymlinks": false,
            "optimization": {
              "styles": false,
              "scrypts": false,
              "fonts": false
            },
            "vendorChunk": true,
            "commonChunk": true,
            "watch": false,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.less",
              "node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.css",
              "node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css",
              "node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css",
              "node_modules/@ng-select/ng-select/themes/material.theme.css",
              "node_modules/material-icons/iconfont/material-icons.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/typeface-nunito/index.css",
              "styles.scss",
              "arbitrarycompany/arbitrarycompany-app-theme.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/underscore/underscore-min.js",
              "libs-manual/modernizr/modernizr.js",
              "node_modules/moment/moment.js",
              "node_modules/angular/angular.js",
              "node_modules/angular-resource/angular-resource.js",
              "node_modules/angular-bindonce/bindonce.js",
              "node_modules/pixi.js/dist/pixi.js",
              "node_modules/signalr/jquery.signalR.js"
            ]
          },
          "configurations": {
            ...many configurations
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "arbitrarycompany-enterprise:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "arbitrarycompany-enterprise:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "arbitrarycompany-enterprise:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "arbitrarycompany/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/img"],
            "styles": ["src/styles.less"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": ".eslintrc.json",
            "lintFilePatterns": ["src/app/**/*.ts"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "arbitrarycompany-enterprise:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "arbitrarycompany-enterprise:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "arbitrarycompany-enterprise"
}

@jlabaj
Copy link
Author

jlabaj commented Mar 17, 2021

@gaetanmaisse there is also a custom webpack that is not doing much, but this bit could mess it up:

 
const webpackConfigBase = {
  optimization: {
    concatenateModules: false,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: environment.optimizeTerser ? true : false,
          keep_fnames: environment.optimizeTerser ? true : false,
        },
      }),
    ],
  },

...

module: {
    rules: [
      {
        test: require.resolve('jquery-migrate'),
        use: 'imports-loader?define=>false',
      },
      {
        test: /\.(js)$/,
        exclude: [/libs-manual\\/, /libs-manual\//, /node_modules\//, /node_modules\\/],
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
            presets: [['@babel/preset-env', { modules: false }]],
          },
        },
      },
    ],
  },

@shilman
Copy link
Member

shilman commented May 25, 2021

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.43 containing PR #15022 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed May 25, 2021
@tsteuwer-accesso
Copy link

@shilman , I just tried this and it's still failing. Just to note:

  • My angular is built strictly for a library.
  • E.g. ng new guest-apps-shared-lib -create-application=false -prefix=gasl
  • Angular 12 (installed today)

Storybook is installed in the root directory, not in the project directory.

info @storybook/angular v6.4.0-alpha.18
info 
info => Loading presets
info => Loading 1 config file in "/home/troy/development/guest-apps-shared-lib/.storybook"
info => Loading 9 other files in "/home/troy/development/guest-apps-shared-lib/.storybook"
info => Adding stories defined in "/home/troy/development/guest-apps-shared-lib/.storybook/main.js"
info => Using prebuilt manager
info => Found custom tsconfig.json
Compiling @angular/elements : fesm2015 as esm2015
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "guest-apps-shared-lib:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:117:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:140:47
ERR!     at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise (<anonymous>)
ERR!     at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at buildWebpackConfigOptions (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:125:82)
ERR!     at Object.<anonymous> (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:177:42)
ERR!     at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise (<anonymous>)
ERR!     at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at Object.extractAngularCliWebpackConfig (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:171:12)
ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:117:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:140:47
ERR!     at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise (<anonymous>)
ERR!     at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at buildWebpackConfigOptions (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:125:82)
ERR!     at Object.<anonymous> (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:177:42)
ERR!     at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise (<anonymous>)
ERR!     at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at Object.extractAngularCliWebpackConfig (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:171:12) {
ERR!   stack: 'TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined\n' +
ERR!     '    at validateString (internal/validators.js:117:11)\n' +
ERR!     '    at Object.resolve (path.js:980:7)\n' +
ERR!     '    at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:140:47\n' +
ERR!     '    at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)\n' +
ERR!     '    at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)\n' +
ERR!     '    at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71\n' +
ERR!     '    at new Promise (<anonymous>)\n' +
ERR!     '    at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)\n' +
ERR!     '    at buildWebpackConfigOptions (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:125:82)\n' +
ERR!     '    at Object.<anonymous> (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:177:42)\n' +
ERR!     '    at step (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)\n' +
ERR!     '    at Object.next (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)\n' +
ERR!     '    at /home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71\n' +
ERR!     '    at new Promise (<anonymous>)\n' +
ERR!     '    at __awaiter (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)\n' +
ERR!     '    at Object.extractAngularCliWebpackConfig (/home/troy/development/guest-apps-shared-lib/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:171:12)',
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

@shilman
Copy link
Member

shilman commented Jul 21, 2021

@tsteuwer-accesso #15246

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants