Error while running ASP.NET Core with Angular Template

Question

I am trying to run my working project in a new machine. The Angular app individually is running fine using ng serve, but when I am trying to rum the whole application from Visual Studio, I am getting the following error:

AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: npm ERR! path C:\Windows\System32\package.json

I have tried the following ways, it didn't help:

• Selected the file package.json inside the folder ClientApp then changed the property Copy to Output Directory to Copy always.
• Deleted package.lock.json and ran npm install.
• I don't have –EXTRACT-CSS in my package.json. It is "start": "ng serve.
• Followed all the steps mentioned in https://github.com/silvairsoares/Angular-with-Asp.Net-Core/wiki

Answer 1

There are two ways you can run your angular app inside an aspnet core app. Assuming you are running the app as a console application (Not using IIS Express) and the angular app resides inside ClientApp folder, you can check the following ways.

If you want to run the angular server independently add this to your Configure() method inside Startup.cs

app.UseSpa(spa =>
        {

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); // Use this instead to use the angular cli server
            }
        });

If you want to start both of the inside the aspnet core app add this to your Configure() method inside Startup.cs

app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
                spa.Options.StartupTimeout = TimeSpan.FromSeconds(60); // Increase the timeout if angular app is taking longer to startup

            }
        });

Before that make sure npm install inside your client app folder.

Answer 2

If your project code is follow,

"scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",
    ...
}

Repair follow

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/cdk": "^8.2.0",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/forms": "~8.2.5",
    "@angular/http": "^7.2.15",
    "@angular/material": "^8.2.0",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ngx-toastr": "^11.2.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.4",
    "@angular/cli": "~8.3.4",
    "@angular/compiler-cli": "~8.2.5",
    "@angular/language-service": "~8.2.5",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }