0

I have an Asp mvc 5 site with angular9.

My angular 9 is built into /Scripts/angularDist directory.

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "App": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "Scripts/angularDist/",
                    "index": "src/index.html",
                    "main": "src/main.ts",

I am returning angular index.html file (src/index.html) in my default mvc controller action (Home/Index):

        public ActionResult Index()
    {
        var htmlPath = Server.MapPath("~/Scripts/angularDist/index.html");
        return new FilePathResult(htmlPath, "text/html");
    }

The ngsw-config.json is configured to use the index.html:

{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
            "files": [
                "/favicon.ico",
                "/index.html",
                "/manifest.json",
                "/*.css", 
                "/*.js" 
            ],

And finally i register the service worker via the ServiceWorker module in app.module:

         ServiceWorkerModule.register('/Scripts/angularDist/ngsw-worker.js', 
{ scope: '/Scripts/angularDist/', registrationStrategy: 'registerImmediately' }),

So since angular and the pwa are in a subdirectory, the only way i managed to get the relative paths to be registered in the service worker is by using:

ng build --prod --base-href=/Scripts/angularDist/

So the urls in the ngsw.json look like this now:

      "urls": [
    "/Scripts/angularDist/1-es2015.a1dd7840a1fc1224a25c.js",
    "/Scripts/angularDist/1-es5.a1dd7840a1fc1224a25c.js",

So applicaiton works fines and the service worker is registered.However the problem is that my url is now:

http://localhost:5114/Scripts/angularDist/login

So my question is, how can i set the relative path for the generated .js and .css files in the services worker to be prefixed with my sub directory (/Scripts/angularDist) without changing my url.

Is there another way of settings this up?

The problem that i have:

  1. I do not want/need to display the /Scripts/angularDist path in the url
  2. All http calls now fail to the web api because the relative path is appended to the api calls

Edit

I tried using ng build --prod --base-href=./ which then loads the url without the /Scripts/angularDist and the relative paths in the service worker work correctly but then it looks like the scope of the service worker does not cover the root url and app does not work offline

JustLearning
  • 3,164
  • 3
  • 35
  • 52
  • are you using vc code or visual studio? have you tried built in templates using cli, they solve a lot of config issues by default. – Alok Aug 29 '20 at 14:38
  • i am using visual studio. I have not seen any templates for asp mvc 5, unlike the .net core ones. – JustLearning Aug 29 '20 at 14:45
  • you can try angular 2 web mvc template, try searching for it. for more useful links since you have already done some custom setup, i suggest you go through these links https://medium.com/asp-net-and-angular/how-to-create-an-asp-net-mvc-5-project-with-angular-6-in-visual-studio-part-1-8b116e19a335 https://developer.okta.com/blog/2018/12/21/build-basic-web-app-with-mvc-angular – Alok Aug 29 '20 at 17:38
  • Thats actually exactly how i setup my project and it works if you do not need pwa functionality from angular. Once i installed the angular pwa i ran into the relative path issues in the service worker and the service worker scope issues. I tried creating my own service worker and that works just fine since i register it in the root Index.cshtml. The problem i found is that i failed to cache the dynamically generated angular files, so i need to use the angular service worker or workbox which seems to work exactly like the ngsw – JustLearning Aug 30 '20 at 07:13
  • what does work is if i use the baseHref and set it to something like /app/ and build my angular to that /app directory, then if i always serve my application from www.domain.com/app the pwa works fine – JustLearning Aug 30 '20 at 07:14
  • i had similar issue with monaco editor once, unfortunately i had to do a full url setup, same as how you have setup baseHref there was no workaround but you can sniff the right paths from api calls to get different base urls and set that on runtime. – Alok Aug 30 '20 at 14:14

0 Answers0