This is a aspnet core + angular 2 project. My site is not able to find (404 Not Found) the js files in hosted environment. It runs fine in the developemnt enviornment from the VS2015.
In my Development environment, my angluar2 files are located under my aspnetcore_project_directory/wwwroot/app folder.
The main app file for angular2 is in aspnetcore_project_directory/wwwroot/app/main.js
The contents 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);
This setup is fine when I was testing under development environment in vs2015. I copied the published content to IIS. The folder structure here is inetpub\wwwroot\myprj so under inetpub\wwwroor\myprj\wwwroot\app I have the angular files.
I launch my site as
http: //example.com/myprj
and all aspnet related code loads properly. But when it tries to load the angular module, it is trying to load the main.js from
http: //example.com/app/main.js
instead of
http: //example.com/myprj/wwwroot/app/main.js
I am not sure If I haven't copied the files to right location or not referencing it properly in the systemjs file or both or ..
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>© 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>
Since the site is running in a subdirectory, I had to change base in _Layout.cshtml file.
Changed it from
<base href="/">
to
<script>
document.write('<base href="' + document.location + '" />');
</script>
This solved almost all of the reference issues because of hosting in subdirectory.