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.

Could you please check, if the file exists? Angular changed the naming conventions during the last major release (no 'component'). I guess the project template does not work together with the latest cli and you may need to fix the generated project files by your own or there is already an update for the project template. — Thomas Renger
– Thomas Renger, Commented Jun 22 at 12:09
@ThomasRenger of course file doesn't exist can you please provide more details to fix it thanks. — Bilal Pothigara
– Bilal Pothigara, Commented Jun 23 at 4:50

John h · Accepted Answer · 2025-07-08 13:58:54Z

23

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.

edited Jul 8 at 13:58

answered Jul 7 at 13:52

John h

2055 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eliseo Jul 8 at 6:11

My Good!, NOT (downgrading never is a good solution). If you want to use the same "name convention", just change the angular.json like show in the blog -the section "Style guide updates"-. Apologies, I downvote the answer, because I think it is wrong full)

John h Jul 8 at 14:02

Hi Eliseo, thank you for the additional information. I still believe that since this issue is specific to new projects, using Angular 19 instead of 20 for a new project may be a valid solution for some developers. Additionally, the solution you've provided will not prevent the original Visual Studio error, but it may prevent further issues with Visual Studio, so I've included it in my answer in case some people find it useful. Thanks.

Paul Pritchard Jul 30 at 19:59

Thank you. npm install -g @angular/cli@v19 worked perfectly for me.

samiayaz Sep 24 at 8:33

Thx. Downgrading version to 19 solved it.

Beejee Oct 3 at 8:32

While downgrading seems awfull, this isn't realy an issue. You can go back to 20 once the sollution is created.

JorisB · Accepted Answer · 2025-06-24 14:19:21Z

2

Had the same issue. Worked around it by using the Angular app template (without ASP core) and creating a second project with the ASP core API template.

Apparently only the Angular app template is updated.

answered Jun 24 at 14:19

JorisB

211 bronze badge

Comments

Bokay02 · Accepted Answer · 2025-07-04 21:32:54Z

1

I found a workaround that worked for me.

I uninstalled the current version of an angular cli and installed the version 19 lts.

npm remove -g @angular/cli

npm intall -g @angular/cli@v19-lts

After that, it created the project for me.

answered Jul 4 at 21:32

Bokay02

211 bronze badge

1 Comment

Eliseo Jul 8 at 6:15

see my comment about downgrading.

Bilal Pothigara · Accepted Answer · 2025-09-10 10:12:50Z

1

I solved it by not using the combined template. Just created Angular 20 project with CLI in VS Code and Web API in Visual Studio, then ran both (ng serve for Angular and run API from VS). Worked fine.

answered Sep 10 at 10:12

Bilal Pothigara

1511 silver badge6 bronze badges

Comments

Mark Spencer · Accepted Answer · 2025-06-25 04:29:59Z

0

From error above message, it seems there is mismatch or conflict between Angular CLI version that you have installed and what VS template expects or generates. My advice, you can test to downgrade your Angular CLI to v16. If still not working, you can try to create your Angular project using Angular CLI (in separate folder).

answered Jun 25 at 4:29

Mark Spencer

1563 bronze badges

Comments

John h · Accepted Answer · 2025-07-07 16:41:29Z

Possible Reason I don't have the actual template, but I imagine in the folder ClientApp/src you have a file called main.ts.

This is the file that is executed when your program.cs indicates something like this:

if (builder.Environment.IsDevelopment())
{
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        spa.UseAngularCliServer(npmScript: "start");
    });
}

Specifically, you indicate to execute the main.ts file in the package.json file. (In the ClientApp folder)

If you use a standalone component as the "entry point", the main.ts file will have something like this:

    //see that you bootstrap a Component
    bootstrapApplication(AppComponent, config);

If your angular application uses modules, you should "bootstrap" the app module with:

    //see that you bootstrap a Module
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));

Possible Solutions

Change the main.ts to use modules (not recommended)
Create an angular application using ng-client in another place and copy the folder into your ClientApp folder

Anthony · Accepted Answer · 2025-10-08 19:37:21Z

0

The problem is with .NET. They look for the names:

app.component.ts
app.component.html
app.component.spec.ts
app.component.css
app.module.ts

If those names are not there, the project fails to complete the project creation.

The solution I found is to create the project like normal and have it fail. Then add those files:

app.component.ts
app.component.html
app.component.spec.ts
app.component.css
app.module.ts

Then go back to the project creation screen and click create again. Choose the options to overwrite the current solution and it should be created correctly after this.

answered Oct 8 at 19:37

Anthony

375 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

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

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

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

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related