Angular 16

[janousek]

Please update extension to support Angular >=16.

[MariaSolOs]

Please update extension to support Angular >=16.

@janousek could you please elaborate on what kind of support you're asking for? Is the extension not working as expected with this version?

[janousek]

This extension always use embedded version of the the Angular Language Service (14.2.0). The extension, on the other hand, does not use the version that is installed as part of the project. The current version is 16.0.x. In versions 15.x.x and 16.0.x there were a lot of changes that made the extension unusable (for example standalone components, required fields, etc.).

[MariaSolOs]

@janousek after #54 a local version of the Angular language service might be used, but there are some limitations which I mentioned on that PR.

However, are features of the language service extension (like completions) not working if you're using Angular 16 in your project?

[mmsaffari]

I currenty get an error like this above my component.html code files:

Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information. Show output

Visual Studio 2022: and

While everything works fine with Visual Studio Code

[MariaSolOs]

@mmsaffari does that happen with a newly created project? I just tried to reproduce the issue with the Standalone TypeScript Angular project template and I don't have that gold bar.

[mmsaffari]

@MariaSolOs I removed the extension, re-installed it and added a Standalone TypeScript Angular project to the solution. The error is still there.

If I run yarn run ngcc I'd get this alert message:

yarn run v1.22.19 $ C:\Workspace\VS\Tests\AngularProject1\node_modules.bin\ngcc

==========================================

ALERT: As of Angular 16, "ngcc" is no longer required and not invoked during CLI builds. You are seeing this message because the current operation invoked the "ngcc" command directly. This "ngcc" invocation can be safely removed.

A common reason for this is invoking "ngcc" from a "postinstall" hook in package.json.

In Angular 17, this command will be removed. Remove this and any other invocations to prevent errors in later versions.

==========================================

Done in 0.21s.

[MariaSolOs]

Does the gold bar appear when opening the IDE, or just after running yarn?

[mmsaffari]

1. Added a new Standalone TypeScript Angular project. The gold bar is not there.
2. Executed yarn install
   • Something must be running npm in the background. A package-lock.json file was added to the project while yarn install was running! I deleted package-lock.json and executed yarn install again.
3. Executed ng add @angular-eslint/schematics to configure ESLint for the project.
4. Opening app.component.html makes the VS freeze for 2-3 seconds, and then the gold bar appears.

Output window - Angular Language Service Extension:

Info: Using @angular/language-service v14.2.0 from C:\Users\Mahdi\AppData\Local\Microsoft\VisualStudio\17.0_d87efce0\Extensions\r4wpj2k2.ke1\node_modules\@angular\language-service\index.js Info: Angular language server process ID: 30600 Info: Logging is turned off. To enable, run command 'Open Angular server log'. Info: Using typescript/lib/tsserverlibrary v4.8.2 from C:\Users\Mahdi\AppData\Local\Microsoft\VisualStudio\17.0_d87efce0\Extensions\r4wpj2k2.ke1\node_modules\typescript\lib\tsserverlibrary.js Error: Failed to run ngcc for c:/Workspace/VS/Tests/AngularProject1/tsconfig.json, language service may not operate correctly: Failed to resolve ngcc from c:/Workspace/VS/Tests/AngularProject1 Info: Enabling Ivy language service for c:/Workspace/VS/Tests/AngularProject1/tsconfig.json.

[jc-noodev]

If I may weight in this conversation, I get this as well.

When I create a standalone everything works as expected, but as soon as I npm install, I get the gold bar and Angular Service stops working. Tried most of the steps mentionned by @mmsaffari without success.

Ive also tried adding an existing Angular project that I have and the gold bar appears.

Messages are pretty straight forward :

• Failed to run ngcc for repo_path/tsconfig.json
• Failed to resolve ngcc from repo_path

[joj]

Hi! We do run npm install on build (and on startup), depending on what version of the JavaScript SDK you're using. To avoid this, open your project file (the esproj, or double-clicking on the project in solution explorer) and add this: <ShouldRunNpmInstall>false</ShouldRunNpmInstall>

Also, you may want to update the BuildCommand and the StartupCommand to user yarn instead of npm. It would look something like this:

    <StartupCommand>yarn start</StartupCommand>
    <BuildCommand>yarn build</BuildCommand>

Please do tell if this helps. Thanks! J

[mmsaffari]

Hi there. I'm here to report, I have reinstalled Windows, VS2022, node, global Angular and ESLint, and Angular Language Service extension just to get kinda the same behavior. I haven't installed yarn at all this time.

I see that every time I have over <form> tag, an Error line is added to the extension's output.

[MariaSolOs]

@mmsaffari given that the problem you're encountering is different from the original request of updating Angular, could you please open a separate issue? Please also provide the versions of node, the Angular CLI, and VS that you're currently using.

[mmsaffari]

@MariaSolOs Thanks. I'll open a new issue.

[Steve-from-Memphis]

@mmsaffari - where is the new issue you posted. I am having the same issue.

[mmsaffari]

@Steve-from-Memphis - After updating the extension (released 4 days ago), I don't get the gold bar anymore; however, the extension's functionality in VS2022 is far behind what it is in VSCode. But this is another issue which I'm not gonna open.

[MariaSolOs]

@Steve-from-Memphis - After updating the extension (released 4 days ago), I don't get the gold bar anymore; however, the extension's functionality in VS2022 is far behind what it is in VSCode. But this is another issue which I'm not gonna open.

I'm sorry to hear that you've had a negative experience with this extension. We would really appreciate hearing more about the feature gap you've experienced with VS Code, so that we can investigate and potentially improve the IDE support for VS.

[jiayac]

@Steve-from-Memphis - After updating the extension (released 4 days ago), I don't get the gold bar anymore; however, the extension's functionality in VS2022 is far behind what it is in VSCode. But this is another issue which I'm not gonna open.

Hey Mohammad, would you like to briefly talk about why the extension's functionality in VS2022 is far behind? Thanks a lot in advance for your inputs.

[TomekWebDev]

This extension always use embedded version of the the Angular Language Service (14.2.0). The extension, on the other hand, does not use the version that is installed as part of the project. The current version is 16.0.x. In versions 15.x.x and 16.0.x there were a lot of changes that made the extension unusable (for example standalone components, required fields, etc.).

I'm facing the same error when just trying to use ngModel, it gives me an underlined error but everything is working. I'm currently using 16.2.0 Angular version.

I get a vscode pop-up saying: Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information.

If I try to manually install ngcc package I get this error:
ALERT: As of Angular 16, "ngcc" is no longer required and not invoked during CLI builds. You are seeing this message because the current operation invoked the "ngcc" command directly. This "ngcc" invocation can be safely removed. A common reason for this is invoking "ngcc" from a "postinstall" hook in package.json. In Angular 17, this command will be removed. Remove this and any other invocations to prevent errors in later versions.

How can I resolve this problem? Does someone know if is there a good alternative to the Angular Language Service extension?

[PhilKoepfer]

To fix the Popup you can just disable ngcc for the angular language service:

[MariaSolOs]

To fix the Popup you can just disable ngcc for the angular language service:

You must be using a different extension then. This extension doesn’t even expose settings. EDIT: In fact, your picture is from VS Code. This is the extension for Visual Studio.

[PhilKoepfer]

Ups, yes sorry 😄