Angular-cli: "Workspace needs to be loaded before it is used." when trying to generate a new Service.

[danbenge]

Versions

6.0.0

Repro steps

• Open Visual Studio Code to your root Angular project folder.
• Type in ng g component mynewcomponent

Observed behavior

Returns 

Workspace needs to be loaded before it is used.
Error: Workspace needs to be loaded before it is used.
    at Workspace._assertLoaded (D:\learn\Angular\my-first-app\node_modules\@angular-devkit\core\src\workspace\workspace.js:59:19)
    at Workspace.getProjectByPath (D:\learn\Angular\my-first-app\node_modules\@angular-devkit\core\src\workspace\workspace.js:103:14)
    at Object.getDefaultSchematicCollection (D:\learn\Angular\my-first-app\node_modules\@angular\cli\utilities\config.js:194:35)
    at GenerateCommand.parseSchematicInfo (D:\learn\Angular\my-first-app\node_modules\@angular\cli\commands\generate.js:71:39)
    at GenerateCommand.<anonymous> (D:\learn\Angular\my-first-app\node_modules\@angular\cli\commands\generate.js:36:58)
    at Generator.next (<anonymous>)
    at D:\learn\Angular\my-first-app\node_modules\@angular\cli\commands\generate.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (D:\learn\Angular\my-first-app\node_modules\@angular\cli\commands\generate.js:3:12)
    at GenerateCommand.initialize (D:\learn\Angular\my-first-app\node_modules\@angular\cli\commands\generate.js:30:16)

Desired behavior

Should create a new component.

Created the project using Angular CLI. Tried other projects and getting the same result.

[juanpablodelatorre]

Same here using ng update --all.

[bluesolution]

Do you have angular.json on project root.

[juanpablodelatorre]

@bluesolution I do.

[Muhanady]

actually i have the same problem, i found out that when updating angular it deletes angular-cli.json and adds an empty angular.json file. in the created file nothing related to project. am trying to add options to the new file but not sure that it will work because am receiving the same error .
By the way create a new dotnet new angular doesn't create angular.json therefor using ng cli is impossible

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)

[bmunugoti]

I had the same experiance. i tried to create new angular.json file but still no lucks :(

[Muhanady]

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

[ashish9342]

This bug might be due to syntax error. If you miss simple comma while referencing the css in styles array, you can get this error. This is how I fixed it for me.

Error : Missed comma after adding bootstrap css in styles array. After which you can see this bug.

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

Solution : Adding comma after "../node_modules/bootstrap/dist/bootstrap.min.css", fixes the problem for me.

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

[Theraghav]

This link helps:
https://update.angular.io/

Angular Update Guide | 5.2 -> 6.0 for Basic Apps
Before Updating

Replace downgradeComponent, downgradeInjectable, UpgradeComponent, and UpgradeModule imported from @angular/upgrade. Instead use the new versions in @angular/upgrade/static

Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

During the Update

Make sure you are using Node 8 or later

Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

Update Angular Material to the latest version.

ng update @angular/material

This will also automatically migrate deprecated APIs.

Use ng update or your normal package manager tools to identify and update other dependencies.

After the Update

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules.

For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

[nexeh]

I have confirmed that 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.

[thongcome]

check your angular-cli.json is only or not , remove read only will be fine.

[paakcmd]

Check your misspelling on angular.json

[wendellhu95]

check your angular-cli.json is only or not , remove read only will be fine.

Works for me. Or you can just remove the file.

[hirankit]

A blank (e.g. created by command: touch) angular-config.json in home directory can also cause this problem.

[schungx]

Well, looks like any errors on angular.json, not just syntax ones, will give this extremely unfriendly error message.

In my case, version is wrongly set to a string (should be a number). There is no syntax error, but this error still comes up. Changing version back to a number resolved it.

[LucasMali]

Using Angular 8 and this is still occurring for me on OS X when using ng new.
EDIT: Found this link and it was the fix for me on OS X.

[srmkumar]

Team Please help me to get rid of this.

Os version: win 10 64 bit
Node version: 10.15.0
npm version: 6.9.2
angular version: 7.0.4

I reinstalled node several times and uninstalled angular and npm as well for several times and cleared cache also.

At the time of Installing angular It looks like below Image:

When I try to create new project getting below error.

[mgechev]

@srmkumar did you try https://stackoverflow.com/questions/55601510/workspace-needs-to-be-loaded-before-it-is-used-on-ng-new

[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._}