Angular2 quickstart main.js is searched to wrong path - asp.net-mvc

Question

main.js is not loaded from http://localhost:6541/app/main.js , is searched to http://localhost:6541/Home/app/main.js and I receive 404.
So I have 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"]
}
in the layout I have:
<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>
in renderBody html file:
<my-app> Loading AppComponent content here ...</my-app>
nothing from Angular 2 Quickstart 404 GET /app/main.js does not worked.

Answer 1

I believe that the issue you are experiencing is a result of the MVC framework routing. Since the .cshtml file you are using lives in the Home Controller the routing starts at the base of the home controller (http://localhost:6541/Home).
You need to update the systemjs.config.js to backup to the base of the wwwroot folder using the .. character like so:
(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);
As an alternative, since angular is a SPA and you won't be doing much MVC routing it might make sense to have the TypeScript compile to the Home folder under the wwwroot folder. This will allow you to not have to make any changes to your systemjs.config.js file and the references to your app should work correctly. To do this modify your tsconfig.json like so:
"outDir": "wwwroot/Home/app"