2016-07-06 72 views
0

我从angular1应用程序创建一个angular2应用程序。除去NG-应用指令并添加system.config后,我遇到了以下错误:Index.html由web服务器代替main.js(Angularjs2)

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中打开<)。

我亲眼目睹Chrome浏览器的开发工具在网络选项卡中逐个浏览下载的JavaScript文件,直到找到了返回HTML的位置,在这种情况下是main.js.

但是我无法解决这个问题。解决问题的方法是什么?

的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); 
+0

如果服务器返回错误的数据,那么你需要检查服务器端为什么它返回错误的文件。服务器上是否有任何重定向/重写 –

+0

你说得对。谢谢。 –

+0

添加为答案。请在回答/注释 –

回答

0

如果服务器将返回错误的数据,那么你需要检查服务器端为什么它返回错误的文件。 可能的修复方法是纠正服务器端的任何重定向/重写以提供正确的文件。

+0

前加上服务端代码更改在特定“dist”文件夹之外的服务器配置文件中,无法导入。所以,我提出在其中的index.html导入变化: