title: Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval (<anonymous>) Angular 2
body: <p>I am trying to use full page with angular 2,</p>
  
  <p>I am getting the below error when importing it in my app.module.ts.</p>
  
  <pre><code>"(SystemJS) Unexpected token &lt;
      SyntaxError: Unexpected token &lt;
          at eval (&lt;anonymous&gt;)
          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 (&lt;anonymous&gt;)
      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"
  </code></pre>
  
  <p>Below are my files:</p>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code>(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);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Nakul Chawla&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;!--&lt;link rel="stylesheet" href="../node_modules/fullpage.js/dist/jquery.fullpage.css" /&gt;--&gt;
      &lt;!--&lt;script src="node_modules/jquery/jquery.js"&gt;&lt;/script&gt;--&gt;
  
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('main.js').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
    &lt;base href="/"&gt;
      &lt;my-app&gt;Loading AppComponent content here ...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am taking help from the npm page which reference a plunkr:</p>
  
  <p><strong>npm package</strong></p>
  
  <p><a href="https://www.npmjs.com/package/ng2-fullpage" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p><a href="http://embed.plnkr.co/1p9zKp4CNI1HncAh1h9m" rel="nofollow noreferrer">http://embed.plnkr.co/1p9zKp4CNI1HncAh1h9m</a></p>
  
  <p><strong>plunkr</strong>
  I have seeked help from other stack overflow pages and tried everything, but the error seems to persist.</p>
  
  <p>I have posted another variation of the question on stackoverflow, both errors have the same issue.</p>
  
  <p><a href="https://stackoverflow.com/questions/42325399/unable-to-load-ng2-fullpage-in-my-angular-2-quickstart-app">Unable to load ng2-fullpage in my angular-2 quickstart app</a></p>
  
  <p>I have no clue how to resolve this, tried everything now.</p>
  
  <p>Thanks in advance.</p>