由Web服务器而不是main.js(Angularjs2)服务的Index.html [英] Index.html served by the web server instead of main.js (Angularjs2)
问题描述
我从angular1应用程序创建了angular2应用程序.删除ng-app指令并添加system.config后，我遇到以下错误:
I was creating an angular2 application from an angular1 application. After removing the ng-app directive and adding the system.config, I encountered the following error:
Error: SyntaxError: Unexpected token <
Evaluating https://localhost:8080/contents/app/main.js
Error loading https://localhost:8080/contents/app/main.js
SystemJS尝试检索依赖项(.js文件)时，Web服务器返回了HTML页面(因此html中出现意外打开<).
When SystemJS attempted to retrieve a dependency (.js file) the web server returned an HTML page (hence the unexpected opening < in the html).
我在Chrome的开发工具"的网络"选项卡上逐一查看了下载的JavaScript文件，直到找到返回HTML的文件(在本例中为main.js).
I witnessed this in Chrome's Dev Tools on the Network tab by going through the downloaded JavaScript files one-by-one until I found the one where HTML was returned instead ,in this case main.js.
但是，我无法使用该信息解决问题.解决该问题的方法是什么?
However I am unable to fix the issue with that information. What would be the approach towards solving it?
index.html
index.html
<!doctype html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-title" content="UpToDate" />
<style type="text/css">
#appContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(/app/assets/utd-menu/utd-icon.png) no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 48px 48px;
}
</style>
<!-- inject:app:css --><link rel="stylesheet" href="/app/assets/app-a9ca3a4af9.css"><!-- endinject -->
<!-- inject:pace:js --><script src="/app/dist/pace-fe9335c2fc.min.js"></script><!-- endinject -->
<!-- inject:system:js --><script src="/app/dist/system.src.js"></script><!-- endinject -->
<!-- inject:router:js --><script src="/app/dist/router.dev.min.js"></script><!-- endinject -->
<!-- inject:http:js --><script src="/app/dist/http.dev.min.js"></script><!-- endinject -->
<!-- inject:pollyfills:js --> <script src="/app/dist/system-polyfills.js"></script><!-- endinject -->
<base href="/index.html">
</head>
<body>
<div id="appContainer">
<header data-utd-header></header>
<div data-utd-loading-widget></div>
<div id="paceHolder"></div>
</div>
<!-- inject:ang:js --><script src="/app/dist/angular.min-1_4_8.js"></script><!-- endinject -->
<!-- inject:vendor:js --><script src="/app/dist/vendors-550a2bc2bc.min.js"></script><!-- endinject -->
<script>
System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}});
System.config({
map: {
'rxjs': 'node_modules/rxjs',
'angular2': 'node_modules/angular2',
'app': 'app'
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'@angular/core': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/upgrade': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
<my-app>Loading...</my-app>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
推荐答案
如果服务器返回错误数据，则需要在服务器端检查为什么它返回错误文件.可能的解决方法是更正服务器端的所有重定向/重写，以提供正确的文件.
if sever is returning wrong data then you need to check on server side why it returning wrong file. The possible fix would be to correct any redirects/rewrites on server side to serve correct file.
这篇关于由Web服务器而不是main.js(Angularjs2)服务的Index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
