Angular2 quickstart main.js 被搜索到错误的路径

Question

main.js 未从 http://localhost:6541/app/main.js 加载，搜索到 http://localhost:6541/Home/app/main.js 并收到 404。

所以我有 systemjs.config.js：

(function (global) {
   var map = {
       'app': 'app',
       '@angular': 'lib/@angular',
       'rxjs': 'lib/rxjs'
    };
    var packages = {
        'app': { main: './main.js',  defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js'}
    };
    var ngPackegeNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];
    ngPackegeNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = {
            main: pkgName + '.umd.js',
            defaultExtension: 'js'
        };
    });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

tsconfig.json：

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es6", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"rootDir": "app",
"outDir": "wwwroot/app"
},
"compileOnSave": true,
"exclude": ["node_modules","wwwroot/lib"]
}

在我的布局中：

<script src="~/lib/core-js/client/shim.min.js"></script>
<script src="~/lib/zone.js/dist/zone.js"></script>
<script src="~/lib/reflect-metadata/Reflect.js"></script>
<script src="~/lib/systemjs/dist/system.src.js"></script>
<script src="~/js/systemjs.config.js"></script>
<script>
        System.import('app').catch(function (err) { console.error(err); });
</script>

在 renderBody html 文件中：

<my-app> Loading AppComponent content here ...</my-app>

Angular 2 Quickstart 404 GET /app/main.js 中的任何内容都不起作用。

Answer 1

我相信您遇到的问题是 MVC 框架路由的结果。由于您使用的 .cshtml 文件位于 Home Controller 中，因此路由从 Home Controller (http://localhost:6541/Home) 的基础开始。

您需要使用.. 字符更新systemjs.config.js 以备份到wwwroot 文件夹的基础，如下所示：

(function (global) {
    var map = {
        'app': '../app',
        '@angular': '../lib/@angular',
        'rxjs': '../lib/rxjs'
    };
    var packages = {
        'app': { main: './main.js',  defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js'}
    };
    var ngPackegeNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];
    ngPackegeNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = {
            main: pkgName + '.umd.js',
            defaultExtension: 'js'
        };
    });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

作为替代方案，由于 Angular 是一个 SPA，并且您不会做太多 MVC 路由，因此将 TypeScript 编译到 wwwroot 文件夹下的 Home 文件夹可能是有意义的。这将使您不必对systemjs.config.js 文件进行任何更改，并且对您的应用程序的引用应该可以正常工作。为此，请修改您的 tsconfig.json，如下所示：

"outDir": "wwwroot/Home/app"