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

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

Answer 2

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 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.

Answer 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