Visual Studio Angular + ASP.NET Core project fails with "Could not find file app.component.ts"

Question

I'm trying to create a new ASP.NET Core project with Angular using Visual Studio 2022. I selected the Angular template during project creation. However, after the project is generated, I get the following error when opening it:

Could not find file 'D:\Experiments\Experiments\AngularApp2\angularapp2.client\src\app\app.component.ts' Things I noticed:

Before this error, Visual Studio prompted me about sharing anonymous project creation data with Google (Angular telemetry), and I clicked No.

I already installed Node.js and Angular CLI globally using:

npm install -g @angular/cli

I tried to Deleting the project and creating it again (still same error) Reinstalling Angular CLI But sadly didn't worked nor I was able to find any proper solution about it. Any guidance or a workaround to fix this would be appreciated.

Answer 1

I believe you currently have Angular 20 installed.

Previously, the app file was called "app.component.ts". But since Angular 20, the naming convention has changed to remove ".component", ".directive", and similar names from files.

Visual Studio does not know this, so it is looking for "app.component.ts" when Angular 20 has generated "app.ts".

This is a Visual Studio bug that is currently being fixed. They had similar issues when Angular moved away from using modules.

In the meantime, I suggest using Angular 19 instead:

npm install -g @angular/cli@v19

Edit: If you need to use Angular 20 before this is fixed:

The Angular 20 announcement post explains that new projects can enable old naming convention using the following schematic configuration in angular.json:

{
  "projects": {
    "app": {
      ...
      "schematics": {
        "@schematics/angular:component": { "type": "component" },
        "@schematics/angular:directive": { "type": "directive" },
        "@schematics/angular:service": { "type": "service" },
        "@schematics/angular:guard": { "typeSeparator": "." },
        "@schematics/angular:interceptor": { "typeSeparator": "." },
        "@schematics/angular:module": { "typeSeparator": "." },
        "@schematics/angular:pipe": { "typeSeparator": "." },
        "@schematics/angular:resolver": { "typeSeparator": "." }
      },
  ...
}

You will still get the error when the template is generated, but adding this configuration may prevent further issues.

Also, please keep in mind that depending on how Angular is supported by Visual Studio in the future, this naming convention may not be recognized for Angular 20 projects.