错误：(SystemJS) 意外标记 < SyntaxError: Unexpected token < at eval (<anonymous> ) 角 2

Question

I am trying to use full page with angular 2,我正在尝试使用角度为 2 的整页，

I am getting the below error when importing it in my app.module.ts.在我的 app.module.ts 中导入它时出现以下错误。

"(SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
        at eval (<anonymous>)
        at Object.eval (http://localhost:3000/app/app.module.js:16:22)
        at eval (http://localhost:3000/app/app.module.js:40:4)
        at eval (http://localhost:3000/app/app.module.js:41:3)
        at eval (<anonymous>)
    Evaluating http://localhost:3000/node_modules/ng2-fullpage
    Evaluating http://localhost:3000/app/app.module.js
    Evaluating http://localhost:3000/main.js
    Error loading http://localhost:3000/main.js"

Below are my files:以下是我的文件：

systemjs.config.js systemjs.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // '@jquery':'npm:jquery/jquery.min.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ng2-fullpage':               'npm:ng2-fullpage',
      // 'jquery':                     'npm:jquery/dist/jquery.js',
      'fullpage.js':                'npm:fullpage.js/jquery.fullPage.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // format:'register',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

app.module.ts app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {routing} from './app.routing';
import {NavbarComponent} from './components/navbar/navbar.component';
import { MnFullpageDirective } from 'ng2-fullpage';
import {MnFullpageService} from 'ng2-fullpage';

import { AppComponent }  from './app.component';
import { ResumeComponent } from './components/resume/resume.component';
import { AboutComponent } from './components/about/about.component';
import {HomeComponent} from './components/home/home.component';



@NgModule({
  imports:      [ BrowserModule,HttpModule, routing ],
  declarations: [ AppComponent, ResumeComponent, AboutComponent, HomeComponent, NavbarComponent,
    MnFullpageDirective
  ],
  bootstrap:    [ AppComponent ],
  providers: [MnFullpageService]
})
export class AppModule { }

index.html索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Nakul Chawla</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css">
    <!--<link rel="stylesheet" href="../node_modules/fullpage.js/dist/jquery.fullpage.css" />-->
    <!--<script src="node_modules/jquery/jquery.js"></script>-->

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
  <base href="/">
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

I am taking help from the npm page which reference a plunkr:我正在从引用 plunkr 的 npm 页面获取帮助：

npm package npm 包

enter link description here在此处输入链接描述

http://embed.plnkr.co/1p9zKp4CNI1HncAh1h9m http://embed.plnkr.co/1p9zKp4CNI1HncAh1h9m

plunkr I have seeked help from other stack overflow pages and tried everything, but the error seems to persist. plunkr我从其他堆栈溢出页面寻求帮助并尝试了所有方法，但错误似乎仍然存在。

I have posted another variation of the question on stackoverflow, both errors have the same issue.我在 stackoverflow 上发布了该问题的另一个变体，两个错误都有相同的问题。

Unable to load ng2-fullpage in my angular-2 quickstart app 无法在我的 angular-2 快速入门应用程序中加载 ng2-fullpage

I have no clue how to resolve this, tried everything now.我不知道如何解决这个问题，现在尝试了一切。

Thanks in advance.提前致谢。

Answer 1

There are certainly many issues that may lead to this error.肯定有很多问题可能会导致此错误。 I got it when using SystemJS in connection with web-servers such as live-server that offer a convenient function for single page web applications, namely to route all non-existing files to the index.html of the project.我在将 SystemJS 与 Web 服务器（例如live-server）结合使用时得到了它，这些服务器为单页 Web 应用程序提供了一个方便的功能，即将所有不存在的文件路由到项目的 index.html。 So if SystemJS tries to resolve a dependency that is not installed, the webserver will present the index.html that most often starts with <!DOCTYPE html> .因此，如果 SystemJS 尝试解析未安装的依赖项，网络服务器将显示最常以<!DOCTYPE html>开头的 index.html。 This may be the unexpected < mentioned in the error.这可能是错误中提到的意外< 。

Solution:解决方案：

Check if your server routes non-existing files to an html file.检查您的服务器是否将不存在的文件路由到 html 文件。
Stop routing for the debugging.停止路由以进行调试。
Launch your application.启动您的应用程序。 Find out using the network tab in your browser tools which files get an 404 error.使用浏览器工具中的网络选项卡找出哪些文件出现 404 错误。
Install missing dependencies using jspm install my_dependency .使用jspm install my_dependency安装缺少的依赖jspm install my_dependency 。
Iterate until all files can be found.迭代直到可以找到所有文件。
Enable routing of missing files to some html file, again.再次启用将丢失文件路由到某个 html 文件的功能。

错误：(SystemJS) 意外标记 < SyntaxError: Unexpected token < at eval (<anonymous> ) 角 2

问题描述

1 个解决方案

解决方案1
0 2017-08-29 08:20:30

Solution:解决方案：

错误：(SystemJS) 意外标记 &lt; SyntaxError: Unexpected token &lt; at eval (<anonymous> ) 角 2

问题描述

1 个解决方案

解决方案1 0 2017-08-29 08:20:30

Solution:解决方案：

错误：(SystemJS) 意外标记 < SyntaxError: Unexpected token < at eval (<anonymous> ) 角 2

解决方案1
0 2017-08-29 08:20:30