"No valid Angular config file found for the chosen workspace" on monorepo workspace with multiple root folders per project

[digeomel]

Checks before posting an issue

• I have read all the extension's documentation (README and docs/TROUBLESHOOTING)
• My project meets the requirements indicated in README
• I launched ng g component hello in the VS Code Terminal inside my project, and it works
• I looked at the extension's logs ("Angular Schematics" Output channel, second tab left to the Terminal), and tried to fix my project's configuration accordingly
• I understand I am writing to a human being, doing this open source project on his free time
• I will be involved in my own issue, by answering questions and informing if the issue is resolved

Configuration

• VS Code version: 1.53.0
• Angular version (ng version): 10.2.0

Angular CLI: 10.2.0
Node: 13.14.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1002.0 (cli-only)
@angular-devkit/core         10.2.0 (cli-only)
@angular-devkit/schematics   10.2.0 (cli-only)
@schematics/angular          10.2.0 (cli-only)
@schematics/update           0.1002.0 (cli-only)

Description of the issue

We have a monorepo (multiple projects and libraries) workspace where the angular.json file resides at the root, and each project is under a projects folder, so projects/abc, projects/cde, etc.
When there is only one root folder in the workspace, the extension works fine.
When I add a particular project (sub)folder in the workspace (please don't ask why, it's complicated), then the extension throws the error above.

How to reproduce the issue

1. Create a workspace Angular project
2. Create a project inside this workspace
3. Open the root workspace in vscode
4. Choose File -> Add folder to workspace... and add the project folder in the workspace, so that now you have 2 root folders in the workspace, one of them a subfolder of the first
5. Try to use the extension

[cyrilletuzi]

2. Create a project inside this workspace

Can you be more specific? Do you mean projects generated by ng g library / ng g application, or full projects generated by a new ng new placed in subfolder?

[digeomel]

What is described here: https://octoperf.com/blog/2019/08/22/kraken-angular-workspace-multi-application-project/#create-a-workspace

1. ng new kraken --createApplication=false --directory=frontend --interactive=false
2. cd frontend
3. ng generate application administration --style=scss --routing=true

[cyrilletuzi]

Then it's normal. Angular sub-applications (ng g application) and sub-libraries (ng g library) are not designed to be opened as workspaces directly.

There is a lot of issues coming up doing that, for example:

• TypeScript will raise errors about experimental decorators because it cannot see the root tsconfig.json,
• launching ng g component inside the library root is not working (error: Could not find an NgModule), so if the Angular CLI itself is not working, the extension certainly can't.

On the other way, if you open your Angular project normally (ie. at the primary root), and you right-click on the folders inside your sub-applications or sub-libraries where you want to generate things, the extension will detect the sub-project automatically for you.

Moving this to discussions as it's not a bug.

[digeomel]

Ok, thank you for your time! 👍