Failed to load local data with Angular 6 and ASP.NET MVC5

Question

For security reason, we have to stick to ASP.NET MVC5. That's why we have to build the frontend Angular app and use BundleConfig to package and grab everything. For the view, we established a view placeholder for our Angular App.

Yes, I agree that it's ugly. However, it seems it is a best solution for us.

Here is the problem: When I try to load the static files. (e.g. images, json files) we have to grab them from the mvc5 backend.

I tried to move the static files to the angular assets folder, and everything got successfully compiled and copied to the dist folder. However, using relative path, Angular cannot recognize them.

Here is the error:

As you may know that the root of our angular app is: http://localhost:1220/client

and the absolute json file location is: 'http://localhost:1220/client/dist/assets/data/UiData.json'

This is my Angular service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/observable';

@Injectable()
export class LocalDataService {
  private staticDataURL = '../../../assets/data/UiData.json';
  // private staticDataURL = 'assets/data/UiData.json';

  constructor(private http: HttpClient) { }

  public getJSON(): Observable<any> {
    return this.http.get(this.staticDataURL);
  }
}

both path '../../../assets/data/UiData.json' and 'assets/data/UiData.json' won't work for this case, because the server won't recognize the frontend Angular App.

This is the BundleConfig from our MVC5 backend:

public class BundleConfig
{
    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/script/bundle").Include("~/Scripts/dist/bundle.js"));
        bundles.Add(new StyleBundle("~/style/main").Include("~/Scripts/dist/style.css", new CssRewriteUrlTransform()));

        // Angular build artifacts
        bundles.Add(new ScriptBundle("~/script/report-bundle").Include(
            "~/client/dist/runtime.*",
            "~/client/dist/polyfills.*",
            "~/client/dist/scripts.*",
            "~/client/dist/main.*"
            ));

        bundles.Add(new StyleBundle("~/style/report-style")
            .Include(
                "~/client/dist/styles.*",
                new CssRewriteUrlTransform()
            ));
    }
}

Is there any way to load the local json file using relative path in this case?

Thanks in advance!

Answer 1

We have a very similar environment (for security reasons also). I'm hoping I can help answer your question by explaining what I 'think' would be the standard way to handle this...

I think the main thing is to just know / decide on a folder to treat as your "web root folder".

In older versions of MVC, it was the /Content folder. In asp.net core versions, it is the /wwwroot folder.

And then put all of your scripts and assets in that folder.. As long as they are all relative to each other it should work..

So basically, you'll want to edit your output dir of your angular-cli to output your angular app to something like

/Content/js/dist/your files

All of your assets will be in something like /Content/images/your images and /Content/static/your static files

something like that. in other words, you'll put all your assets in that "web root folder" and also make sure to output your /dist folder to that same folder.

hope that helps!