systemjs.config.js 托管环境中的相对路径 404（未找到）

Question

这是一个aspnet core + angular2的项目。我的站点无法在托管环境中找到（404 未找到）js 文件。它在 VS2015 的开发环境中运行良好。

在我的开发环境中，我的 angluar2 文件位于我的 aspnetcore_project_directory/wwwroot/app 文件夹下。

angular2 的主要应用程序文件位于 aspnetcore_project_directory/wwwroot/app/main.js

内容systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

我在vs2015的开发环境下测试时，这个设置没问题。我将发布的内容复制到IIS。这里的文件夹结构是 inetpub\wwwroot\myprj 所以在 inetpub\wwwroor\myprj\wwwroot\app 下我有 angular 个文件。

我以

的身份启动我的网站

http: //example.com/myprj

并且所有与 aspnet 相关的代码都能正确加载。但是当它尝试加载 angular 模块时，它正在尝试从

加载 main.js

http: //example.com/app/main.js

而不是

http: //example.com/myprj/wwwroot/app/main.js

我不确定是不是我没有将文件复制到正确的位置，或者没有在 systemjs 文件中正确引用它，或者两者都有，或者..

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index - myprj</title>


        <link rel="stylesheet" href="/myprj/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/myprj/css/site.css" />



</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/myprj">myprj</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/myprj/SiteManager">Stats</a></li>
                    <li><a href="/myprj">Home</a></li>
                    <li><a href="/myprj/Home/About">About</a></li>
                    <li><a href="/myprj/Home/Contact">Contact</a></li>
                </ul>

    <form method="post" id="logoutForm" class="navbar-right" action="/myprj/Account/LogOff">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a title="Manage" href="/myprj/Manage">Hello padhu@adsc.com!</a>
            </li>
            <li>
                <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
            </li>
        </ul>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8KehTnO-SvNKgU7UYNtLOEZOnq1O6ETchwbvuVHy4sOk8JDjACikATgFczHo5p0CZiGbPYRpa4cZ0Kx43DFrV9JidqSTjTMdAFcAu_YBlXl54-m0NRAvtOVIZudX7Rm7MD7y006yAcfujAaPK72-j2AGf2L50f7CSxpUyH964Mi22A4IxgVgerkO9aja_rYEow" /></form>

            </div>
        </div>
    </div>
    <div class="container-fluid body-content">


    <!-- Css -->
    <link rel="stylesheet" href="/myprj/css/site.css" /><link rel="stylesheet" href="/myprj/css/site.min.css" /><link rel="stylesheet" href="/myprj/css/spinkit.css" />
    <!-- Js -->
    <script src="/myprj/lib/jQuery/dist/jquery.js"></script>

    <script src="/myprj/node_modules/systemjs/dist/system.js"></script>    
    <script src="/myprj/node_modules/core-js/client/shim.js"></script>
    <script src="/myprj/node_modules/zone.js/zone.js"></script>
    <script src="/myprj/node_modules/reflect-metadata/reflect.js"></script>




<!-- Configure SystemJS -->
<script src="/myprj/js/systemjs.config.js"></script>
<script>
      System.import('app').catch(function(err){ console.error(err); });
</script>
<my-app>Loading...</my-app>

        <hr />
        <footer>
            <p>&copy; 2016 - myprj</p>
        </footer>
    </div>


        <script src="/myprj/lib/jquery/dist/jquery.js"></script>
        <script src="/myprj/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/myprj/js/site.js?v=PO_8e6bIDi7De8_fdNEN0tfEE9tOM_13R3l4268U5_Y"></script>




</body>
</html>

Answer 1

由于站点在运行的子目录中，我不得不更改 _Layout.cshtml 文件中的 base。

从

更改而来

<base href="/">

至

<script>
    document.write('<base href="' + document.location + '" />');
</script>

由于托管在子目录中，这几乎解决了所有引用问题。

systemjs.config.js 托管环境中的相对路径 404（未找到）

systemjs.config.js relative path in hosted enviornment 404 (Not Found)

systemjs

asp.net-core

angular