Question

我正在从angular1应用程序创建一个angular2应用程序。删除ng-app指令并添加system.config后，我遇到以下错误：

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中意外打开＆lt;

）。

我通过逐个浏览下载的JavaScript文件，在网络选项卡上的Chrome开发工具中见证了这一点，直到找到了返回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);

Answer 1

如果服务器返回错误的数据，那么您需要检查服务器端为什么返回错误的文件。可能的解决方法是更正服务器端的任何重定向/重写以提供正确的文件。

Index.html由Web服务器而不是main.js（Angularjs2）提供服务

1 个答案: