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

Question

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)

Answer 1

I had the same error,This error can occur while:

1. it may be from the @angular/cli version.

2. missed the comma char at end of line in angular.json or tsconfig.json.

3. unicode of the angular.json or tsconfig.json file (will be UTF-8).

4. would have existed comment line at the angular.json or tsconfig.json. (in my case, there was comment line at tsconfig.json).

{

  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    //"outDir": "./dist/out-tsc", // comment line caused the error. I removed this line
    "outDir": "../content/ManagmentJob",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    ...
}

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 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"
            }
          ]
        }
      }

Answer 6

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

Answer 7

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"

        ]

Answer 8

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