Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval (<anonymous>) Angular 2

I am trying to use full page with angular 2,

I am getting the below error when importing it in my 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

(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

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

<!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:

npm package

enter link description here

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

plunkr I have seeked help from other stack overflow pages and tried everything, but the error seems to persist.

I have posted another variation of the question on stackoverflow, both errors have the same issue.

Unable to load ng2-fullpage in my angular-2 quickstart app

I have no clue how to resolve this, tried everything now.

Thanks in advance.

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. 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>. This may be the unexpected < mentioned in the error.

Solution:

Check if your server routes non-existing files to an html file.
Stop routing for the debugging.
Launch your application. Find out using the network tab in your browser tools which files get an 404 error.
Install missing dependencies using jspm install my_dependency.
Iterate until all files can be found.
Enable routing of missing files to some html file, again.

Solution:

Recommended topics

Hot tags