CODEWITHSUNDEEP
angularasp.net-coreiis
V. Periyasamy
V. Periyasamy

Reputation: 107

Uncaught SyntaxError: Unexpected token in Angular while running in IIS server under subfolder

I have created Angular 11 template (Angular 11 + .Net core 5.0) using visual studio 2019. Angular application should be run from subfolder(caui) and not from the root folder. I have published the angular application and deployed in IIS. But i am getting following error in the browser.

Uncaught SyntaxError: Unexpected token '<' (at runtime.js:1:1)
polyfills.js:1 Uncaught SyntaxError: Unexpected token '<' (at polyfills.js:1:1)
main.js:1 Uncaught SyntaxError: Unexpected token '<' (at main.js:1:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Below are the configurations in my project.

Index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>tester</title>
  <base href="/caui/" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#3dcd58" />
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
</head>

<body>
  <!--[if lt IE 10]>
  <p>
    You are using an <strong>outdated</strong> browser.
    Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
  </p>
  <![endif]-->
  <noscript>
    <p>
      This page requires JavaScript to work properly. Please enable JavaScript in your browser.
    </p>
  </noscript>
  <ses-app theme="auto">
    <app-root></app-root>
  </ses-app>
</body>

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "LowcostCAApp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref": "/caui/",
            "deployUrl": "/caui/",
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "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,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "LowcostCAApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "LowcostCAApp:build:production",
              "baseHref": "/caui/",
              "servePath": "/caui/"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "LowcostCAApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "LowcostCAApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "LowcostCAApp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "LowcostCAApp"
}

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build  --prod --aot --base-href /caui/ --output-hashing none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

.Net core Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace ui
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            if (!env.IsDevelopment())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                // 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");
                }
            });
        }
    }
}

Publishprofile.pubxml

publish profile settings

Browser network tab trace

Browser Network tab trace

IIS Server settings

iis server settings

I am not able to fix the problem.

Upvotes: 0

Views: 1256

Answers (1)

V. Periyasamy
V. Periyasamy

Reputation: 107

I found the solution. Since we make index.html like subpath based. <base href="/caui/" />.

Packages are published into Clientapp/dist/caui folder. But index.html should be placed in Clientapp/dist folder location to serve the request.

If i move the Index.html outside from caui folder then it got worked.

Upvotes: 1

Related Questions