Angular 6 “Workspace needs to be loaded before it is used.” when trying to generate a new Component

问题

when I create asp.net core project with angular dotnet new command does not add an angular.json file (angular 6) to the project and therefor we are not able to use angular cli. If i add angular.json file manually the project give the exception below!?

Workspace needs to be loaded before it is used. Error: Workspace needs to be loaded before it is used. at Workspace._assertLoaded (D:\NetAngular\node_modules\@angular-devkit\core\src\workspace\workspace.js:59:19) at Workspace.getProjectByPath (D:\NetAngular\node_modules\@angular-devkit\core\src\workspace\workspace.js:103:14) at Object.getPackageManager (D:\NetAngular\node_modules\@angular\cli\utilities\config.js:97:35) at UpdateCommand.runSchematic (D:\NetAngular\node_modules\@angular\cli\models\schematic-command.js:74:38) at UpdateCommand.<anonymous> (D:\NetAngular\node_modules\@angular\cli\commands\update.js:70:25) at Generator.next (<anonymous>) at D:\NetAngular\node_modules\@angular\cli\commands\update.js:7:71 at new Promise (<anonymous>) at __awaiter (D:\NetAngular\node_modules\@angular\cli\commands\update.js:3:12) at UpdateCommand.run (D:\NetAngular\node_modules\@angular\cli\commands\update.js:69:16)

回答1:

I was getting the same error, and yes angular.json was making the problem. This error can occur while you are adding the external css path manually. I had missed the comma while referencing bootstrap css.

While adding the custom CSS in style array, I missed the comma(,)

Error File:

If you see below code comma is missing after
"../node_modules/bootstrap/dist/bootstrap.min.css".

"styles": [
          "../node_modules/bootstrap/dist/bootstrap.min.css"
          "src/styles.css"

        ]

Solution: Comma added

"styles": [
          "../node_modules/bootstrap/dist/bootstrap.min.css",
          "src/styles.css"

        ]

回答2:

EUREKA.............

dotnet new angular comman does not create an angular.json file on the root of the application. in some sites they say that after using

npm install --save--dev @angular/cli@latest

command use

npm update @angular/cli

which will migrate you angular-cli.json file to angular.json file!!! but the point here there is no angular-cli.json file nor angular.json.

I solved the problem by creating my own angular.json file as bellow (you may change vega with your project name)

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "vega": {
      "root": "",
      "sourceRoot": "ClientApp",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "ClientApp/dist/vega"
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

after that i was able to use angular cli command and create components and services.

Code to be Happy

回答3:

Same error. Tried uninstall, reinstall and upgrade, ng still reported this error information.

After removed an empty ~/.angular-config.json file, everything is working well again.

回答4:

It is confirmed that you have made some changes in angular.json. if you have a syntax problem in your angular.json file there this error happens. I would say this is unexpected behavior and should be changed to say there is a syntax problem in the file instead.

Issue

回答5:

After added comma after buildOptimizer:true, It is working fine.

"configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true //I missed to put comma here...
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }
      }

回答6:

I did change my angular.json file, but I saw no errors. After double checking the commas and everything I saved it with encoding (UTF-8), then formatted the document (right click and Format Document), that removed 10 redundant lines. After that I could run the angular cli update, and the commands as well.

回答7:

I was having similar error:

"An unhandled exception occurred: Workspace config file cannot be loaded: ///Projects///project/angular.json Schema validation failed with the following errors: Data path "" should NOT have additional properties(scripts). See "/private/var/folders/f8/cq9wj86n3gbfj8h64f8jlx2m0000gn/T/ng-5TCBsc/angular-errors.log" for further details."

It was because of extra 'scripts' key I added in angular.json earlier. Removed that and it worked!

来源：https://stackoverflow.com/questions/50269399/angular-6-workspace-needs-to-be-loaded-before-it-is-used-when-trying-to-gener