How to fix 404 path error for Angular2/TypeScript ASP.NET 4.6.1 on VS2015
Question
I am trying to build a new app using TypeScript, Angular2 and ASP.NET 4.6.1 on VS2015. I am experiencing two problems.
First: I am getting 404 errors on the include files in my index.html file. When I open F12 developer tools in Chrome I see this:
GET http://localhost:58613/app/app/lib/es6-shim.min.js
As you can see, it's trying to go to app/app/ but my files are in app/lib/ . Why is this happening? Chrome reports a 404 error on all of this. However, it doesn't report a 404 error on my .css files (the index.html file in included in this post further down).
Second: When I run the app and it opens in IE (version 10, my default browser) I see this error:
0x800a1391 - JavaScript runtime error: 'System' is undefined
When it hits this code:
System.config({
packages: {
app: {
//format: 'register',
defaultExtension: 'js'
}
}
});
My directory structure is such:
/app/
index.html
--Main/
boot.ts
boot.js
--lib/
various .js files moved via gulp
--Components
My index.html file is such:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="lib/bootstrap.min.css" rel="stylesheet">
<!-- Toastr-->
<link href="lib/toastr.min.css" rel="stylesheet" />
</head>
<body>
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/toastr.min.js"></script>
<script src="app/lib/es6-shim.min.js"></script>
<script src="app/lib/shims_for_IE.js"></script>
<script src="app/lib/system-polyfills.src.js"></script>
<script src="app/lib/angular2-polyfills.min.js"></script>
<script src="app/lib/system.src.js"></script>
<script src="app/lib/rx.min.js"></script>
<script src="app/lib/angular2.dev.js"></script>
<script src="app/lib/router.dev.js"></script>
<script src="app/lib/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
//format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/Main/boot')
.then(null, console.error.bind(console));
</script>
<my-app>Hello World</my-app>
</body>
</html>
tsconfig.jscon
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Why is this happening? What do I have to do to get this setup correctly?
1 answers
solution1
0 2016-03-31 06:22:58
ok, i think i see the cause.
Your index.html is under /app/index.html
so all the script import is relative to the directory that this index.html file is in.
for example:
<script src="app/lib/es6-shim.min.js"></script>
It means "/app/app/lib/es6-shim.min.js". It is not there, so you get a 404
Simple change it to:
<script src="lib/es6-shim.min.js"></script>
and for others as well. It will solve the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.