Extension completely breaks when an Angular project is not the root directory of a workspace.

[b4ux1t3]

🐞 bug report

Is this a regression?

Not as far as I can tell.

Description

While working with the ASP.NET Angular template, I noticed that VS Code constantly throws errors about bad syntax, missing imports, and, helpfully, things like saying "Appears in the NgModule.imports of AppServerModule, but itself has errors(-996002)", but then proceeding to show no other errors in the file (example in screenshots).

The Angular app compiles just fine, and these errors go away if I open the Angular app as the workspace directory.

I've also been unable to reproduce this all of my machines; the problem seems to be sporadic but persistent. I've also been unable to reproduce it in any other situations; it doesn't seem to occur when I create a nested directory inside an empty directory and then open an Angular project in that nested directory.

Bug Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. Clone this repository: https://github.com/b4ux1t3/angular-extension-test.git

• git clone https://github.com/b4ux1t3/angular-extension-test.git

2. Run npm install inside the ClientApp directory.
3. See the aforementioned errors.

Expected behavior

The extension should work regardless of where the angular project is within the VS Code workspace.

Logs

I'm unable to generate logs, because the Angular compiler itself works just fine; it has no problem compiling and serving the application I'm developing.

Screenshots

The aforementioned error.

ngForm apparently doesn't exist for forms, but you can see in the previous screenshot that I am, indeed, properly importing the FormsModule.

This is a rather large screenshot, but you can see the broken extension on the left, with the same file pulled up in a VSCode instance with the angular application set as the workspace root, and the running, compiled application with no console errors on the right.

This is essentially the "smoking gun" that shows that the extension is the only thing misbehaving here.

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 7.20.5
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0 (cli-only)
@angular-devkit/core         12.0.0 (cli-only)
@angular-devkit/schematics   12.0.0 (cli-only)
@schematics/angular          12.0.0 (cli-only)

Extension Version:

v12.2.0

VSCode Version:

Version: 1.59.0 (user setup)
Commit: 379476f0e13988d90fab105c5c19e7abc8b1dea8
Date: 2021-08-04T23:13:12.822Z
Electron: 13.1.7
Chrome: 91.0.4472.124
Node.js: 14.16.0
V8: 9.1.269.36-electron.0
OS: Windows_NT x64 10.0.19043

Operating System:

Windows 10 Version 21H1 (OS Build 19043.1165)

Anything else relevant?
Since I am running this as the client for a .NET application, VSCode is running (at least) three language servers:

1. OmniSharp for C# and .NET
2. Angular Language Service
3. TypeScript

I don't think that should matter, though.

[b4ux1t3]

I should also mention that I've tried several workarounds, like trying to mess around with the path and baseUrl in tsconfig.json.

That the extension functions just fine with the Angular app at the workspace root is, as I said above, the big neon sign that made me finally give up troubleshooting and file this bug.

[atscott]

Hi @b4ux1t3, could you provide a minimal reproduction that eliminates steps 1 and 2 from your steps to reproduce?

[b4ux1t3]

@atscott That's what I tried to do at first, but I couldn't get the issue to reproduce by simply opening up a directory that had an Angular app nested inside of it. I think it's the complexity of being "two projects deep" (so to speak) that leads to the issue.

Would throwing up a small demo app onto GitHub that can be git clone'd work?

[atscott]

Would throwing up a small demo app onto GitHub that can be git clone'd work?

Yes, that would be very helpful.

[b4ux1t3]

Updated!

I should note that I am now seeing errors on all Angular imports in my original project (which I copied verbatim into the test project I just uploaded), and then completely different errors in the test project. That is, every Angular import is errored in the original project now, but only some are errored in the copied, identical project (see screenshots).

As before, when opening the Angular app as the workspace root in the test project, there are no errors.

All Angular imports errored in original project.

Only some imports errored in the copied project.

No errors at all with the ClientApp as the workspace root.

[atscott]

@b4ux1t3 I noticed that your test project is using Angular version 8, which is now outside of LTS. It's likely that it's not Ivy compatible either. Your bug report says the project you're experiencing this issue with is a v12 project. Do you have a reproduction for one that is v9 or above?

For the project you provided as a reproduction, you'd have to check the option to use the legacy view engine language service.

[b4ux1t3]

That actually might end up solving my issue. I hadn't realized the template included with the .NET project was from such an old version of Angular. Let me see if I can reproduce once I bring up the Angular version.

[b4ux1t3]

UPDATE: I upgraded the Angular version to 12.2.2, both in the application I'm working on and the test project I pushed.

This seems to have resolved the issue, apologies for the false alarm! I'm going to go open an issue on the .NET repo to get them to ship a supported version of Angular in their templates.

Thanks for the help @atscott!

[angular-automatic-lock-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.}