SyntaxError: Unexpected token < ng2 bootstrap

Question

I am using ng2 bootstrap and I am facing the error Unexpected token < Below is the config file and I have added 'ng2-bootstrap': 'node_modules/ng2-bootstrap'

System.config.ts

(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',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'ng2-bootstrap': 'node_modules/ng2-bootstrap'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

Below is the module file where I have import AlertModule.forRoot()

Module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes,RouterModule} from '@angular/router';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModuleWithProviders } from '@angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";
import { NavComponent } from "./Components/nav.Component";
import { DashBoardItemComponent } from "./Components/dashBoard.Item.Component";
import { MarketComponent } from "./Components/market.Component";
import { DatepickerModule, AlertModule } from 'ng2-bootstrap';

const appRoutes: Routes = [
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
    { path: 'DashBoard/Index', children: [
                                { path: '', component: DashBoardItemComponent},
                                { path: '', component: DashBoardComponent, outlet: 'dashboard' }
                                ]},
    { path: 'Account/Login', children: [
                                {path: '', component: NavComponent, outlet: 'navbar'},
                                {path: '', component: LoginComponent},
                                {path: '', component: FooterComponent, outlet: 'footer'}
                                ]},
    { path: 'Home/Index', children: [
                            {path: '', component: NavComponent, outlet: 'navbar'},
                            {path: '', component: HomeComponent},
                            {path: '', component: FooterComponent, outlet: 'footer'}
                            ]},
{
        path: 'DashBoard/MarketList',
        children: [
            { path: '', component: DashBoardComponent, outlet: 'dashboard' },
            { path: '', component: MarketComponent }
        ]
    }
];



export const routing = RouterModule.forRoot(appRoutes);

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule,routing,AlertModule.forRoot()],
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent,NavComponent,DashBoardItemComponent,MarketComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

The source I have used https://valor-software.com/ng2-bootstrap/#/alerts

Answer 1

Configure this in your systemJS properties:

var map = {
    ...
    'ng2-bootstrap':              'npm:ng2-bootstrap',
  };

var packages = {
   ...
  'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
  ...
 };

Answer 2

In your systemjs.config.js replace

'ng2-bootstrap': 'node_modules/ng2-bootstrap'

with this line

'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'

You are just giving path to wrong file