Using 3rd party builders causes IDEs to show warnings when viewing angular.json

[erictor]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Hi, the below is the content of a bug I filed at https://developercommunity.visualstudio.com/t/Please-dont-put-warning-green-squiggle-/10294859

Please don't put warning green squiggle line under "builder" in angular.json when using ngx-build-plus

Reported Feb 28, 2023 8:56 PM When using ngx-build-plus to bundle in Angular, one needs to set the “builder” line in angular.json to "builder": "ngx-build-plus:browser" but the key “builder” gets a warning green squiggle line underneath it when this is done. Further info on the need to place this value in angular.json is at: [https://github.com/manfredsteyer/ngx-build-plus/issues/157](github.com review baschtii 's 5-upvote answer)

Visual Studio Windows 10.0 Visual Studio 2022 version 17.5

Microsoft Resolution - Maria Solano [MSFT]
Closed - Other Product This issue seems to be caused by Angular and not Visual Studio. Please file a ticket with that product at https://github.com/angular/angular/issues.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

[I'm not sure why the below stuff on ng version was auto-filled-in.  I'm not running linux.  Here are the actual results when I run ng version:]

Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: npm 9.3.1
OS: win32 x64

Angular: 15.2.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.6
@angular-devkit/build-angular   15.1.6
@angular-devkit/core            15.1.6
@angular-devkit/schematics      15.1.6
@angular/cdk                    15.2.1
@angular/cli                    15.1.6
@angular/flex-layout            15.0.0-beta.42
@angular/material               15.2.1
@angular/youtube-player         15.2.1
@schematics/angular             15.1.6
rxjs                            7.5.7
typescript                      4.8.4

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[jessicajaniuk]

@erictor Can you create a stackblitz reproduction of this case for us? Actually create a github repo reproduction for us since we'll need to test this in VSCode.

[erictor]

Hi Jessica, something is looking at the angular.json build key "builder" and the value I was required to place next to the key, "ngx-build-plus:browser" and sending an interactive in-editor error message "Value must be exactly "@angular-devkit/build-angular:browser-esbuild". Admittedly a pretty minor issue; I was just annoyed at the green squiggle-line. The repro would be any Angular project including a dependency to "ngx-build-plus": "^15.0.0" (the version number isn't the point here) in package.json. ngx-build-plus allows an Angular project to be published as a bundle using a build command such as ng build --output-hashing none --single-bundle true.

"projects": {
    "mfe-one": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "progress": false,
            "outputPath": "dist/mfe-one",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",

If one puts the suggested value "@angular-devkit/build-angular:browser-esbuild" in the json for "builder", then when attempting to run the ng build command ng build --output-hashing none --single-bundle true an error occurs: Error: Unknown argument: single-bundle . That error is unacceptable because the point is to end up with a single bundle.

[JoostK]

Do you have a $schema reference in your angular.json file?

[erictor]

Hi Joost! Yes, the first line is "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

[alan-agius4]

Hi @erictor,

I did try to replicate this issue using vscode and was not able. In addition to that I also used an online tool to validate the angular.json with the schema and it does not shown any errors. See: https://www.jsonschemavalidator.net/s/CQNd7pdM

This does seem to be an issue with Visual Studio, that is not validating the schema correctly as the schema does not force usage of @angular-devkit/build-angular:browser-esbuild.

See related part of the schema https://github.com/angular/angular-cli/blob/f2cba37327ee0dcb361d89db184d49a548696eb8/packages/angular/cli/lib/config/workspace-schema.json#L346-L586

[erictor]

Hi Alan! Thank you so much for taking the time to look at this. -- Eric

[alan-agius4]

Closing as there isn't anything actionable from our end here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}