2

出于安全原因，我们必须坚持使用 ASP.NET MVC5。这就是为什么我们必须构建前端 Angular 应用程序并使用它BundleConfig来打包和抓取所有内容。对于视图，我们为 Angular App 建立了一个视图占位符。

是的，我同意这很丑。但是，这似乎是我们的最佳解决方案。

这是问题所在：当我尝试加载静态文件时。（例如图像、json 文件）我们必须从 mvc5 后端获取它们。

我尝试将静态文件移动到 angular assets 文件夹，一切都成功编译并复制到 dist 文件夹。但是，使用相对路径，Angular 无法识别它们。

这是错误：

在此处输入图像描述

您可能知道，我们的 Angular 应用程序的根源是：http://localhost:1220/client

绝对 json 文件位置是：'http://localhost:1220/client/dist/assets/data/UiData.json'

这是我的 Angular 服务：

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);
  }
}

这两种路径都不适用于这种情况'../../../assets/data/UiData.json'，'assets/data/UiData.json'因为服务器无法识别前端 Angular 应用程序。

这是来自我们 MVC5 后端的 BundleConfig：

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()
            ));
    }
}

在这种情况下，有没有办法使用相对路径加载本地 json 文件？

提前致谢！

4

1 回答 1

2

我们有一个非常相似的环境（也出于安全原因）。我希望我可以通过解释我“认为”将是处理此问题的标准方法来帮助回答您的问题...

我认为主要的是只知道/决定一个文件夹作为你的“网络根文件夹”。

在旧版本的 MVC 中，它是 /Content 文件夹。在 asp.net 核心版本中，它是 /wwwroot 文件夹。

然后把你所有的脚本和资产放在那个文件夹中。只要它们都是相对的，它应该可以工作。

所以基本上，您需要编辑 angular-cli 的输出目录，以将您的 Angular 应用程序输出到类似

/Content/js/dist/你的文件

您的所有资产都将位于 /Content/images/your images 和 /Content/static/your static files 中

类似的东西。换句话说，您将把所有资产放在那个“网络根文件夹”中，并确保将您的 /dist 文件夹输出到同一个文件夹。

希望有帮助！

于 2018-08-08T02:10:52.147 回答