2016-07-06 68 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導入變化: