title: Angular 7 with .net core 2.1 - Launching for specific page
body: <p>I have a .NET Core 2.1 website with Angular 7 sitting inside /ClientApp.</p>
  
  <p>I am using Microsoft.AspNetCore.SpaServices.Extensions</p>
  
  <p>If I go to a page e.g. localhost:5001/pagedoesnotexist/index then for some reason the Angular app kicks in.</p>
  
  <p><strong>Question - how can I change the configuration so that ASP.NET Core does not try to redirect to the Angular app if I go to a page that does not exist?<br>
  I want it to simply return a standard 404 upon incorrect web request.
  I want a specific page e.g. /admin/dashboard to serve the Angular app only</strong></p>
  
  <p>Startup.cs</p>
  
  <pre><code>public void ConfigureServices(IServiceCollection services)
  {
  ...
  services.AddSpaStaticFiles(configuration =&gt;
  {
     configuration.RootPath = "ClientApp/dist";
  });
  ...
  }
  </code></pre>
  
  <p>public void Configure(IApplicationBuilder app, IHostingEnvironment env)</p>
  
  <pre><code>{
  ...
  app.UseSpaStaticFiles();
  app.UseSpa(spa =&gt;
  {
  // To learn more about options for serving an Angular SPA from ASP.NET Core,
  // see https://go.microsoft.com/fwlink/?linkid=864501
  
  spa.Options.SourcePath = "ClientApp";
  
  
  if (env.IsDevelopment())
  {
    spa.UseAngularCliServer(npmScript: "start");
  }
  });
  ...
  }
  </code></pre>
  
  <p>While this is my first Angular app it seems to be working fine so far and the issue is inside of a development environment.</p>
  
  <p>Thanks.</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>To clarify a little further:</p>
  
  <p>PASS: I want localhost:5001/ = 404 </p>
  
  <p>PASS: I want localhost:5001/angtastic/ to serve the app</p>
  
  <p><strong>FAIL: I get repeated info?t=[random numbers] from zone.js (socksjs-node/info)
  (it works without the below code targetting the sub folder so perhaps I am doing something wrong).
  My guess is that the sockets or something to do with webpack (under the hood of angular cli) is having trouble with handling the application within this sub-folder.</strong></p>
  
  <p>I have a partial solution that comes with a problem:</p>
  
  <pre><code>app.Map(new PathString("/angtastic"), angtastic =&gt;
              {
                  angtastic.UseSpa(spa =&gt;
                  {
                      spa.Options.SourcePath = "ClientApp";
  
                      // To learn more about options for serving an Angular SPA from ASP.NET Core,
                      // see https://go.microsoft.com/fwlink/?linkid=864501
  
                      if (env.IsDevelopment())
                      {
                          spa.UseAngularCliServer(npmScript: "start --app=angtastic --base-href=/angtastic/ --serve-path=/angtastic/ ");
                      }
                  });
               });
  </code></pre>
  
  <p>Also, changed the index.html to have a BaseURL of .</p>
  
  <p>Here is my Angular.json</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "angtastic": {
        "root": "src",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {
          "@schematics/angular:component": {
            "styleext": "scss"
          }
        },
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/angtastic",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "angtastic:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "angtastic:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "angtastic:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "karmaConfig": "src/karma.conf.js",
              "styles": [
                "clientapp/src/styles.scss"
              ],
              "scripts": [],
              "assets": [
                "clientapp/src/favicon.ico",
                "clientapp/src/assets"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "angtastic-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "prefix": "",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "angtastic:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "angtastic:serve:production"
              }
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": "e2e/tsconfig.e2e.json",
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      }
    },
    "defaultProject": "angtastic"
  }
  </code></pre>