Fail to add a new npm module to Angular2 application that is using SystemJS : "Error: (SystemJS) ToPrimitive is not defined"

Question

I am trying to add an npm module to my Angular2 application that uses systemjs for loading modules. It is based on an online tutorial Angular 2 User Registration and Login Example & Tutorial that states it was based on Angular 2 quickstart project.

The module that I am trying to add is ng2-completer. It is not the first module that I failed to integrate to my applcation; apparently I am missing something at configuring it properly although I follow and double check the installation & usage steps described at the module's page.

Before trying to add the module, I have a runing application with no problem.

The steps I follow are;

1. installing the npm package with npm install ng2-completer --save
2. updating systemjs.config.js file i.e., adding

'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js' line to the map field

3. updating app.module.ts file i.e., adding the

   import { Ng2CompleterModule } from "ng2-completer";

directive and including Ng2CompleterModule in imports array of @NgModule configuration.

Up until I apply the third step my application continues to work properly. Following the third step, the browser Console displays the stack trace below:

which appears odd to me as if there is a problem in reflect-metadata/Reflect.js itself. I am more than willing to provide more information if it would help identifying the problem.

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/http/testing': 'npm:@angular/http/bundles/http-testing.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',
            'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            "jwt-decode": {
                defaultExtension: "js"
            },
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

app.module.ts file:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule } from '@angular/http';

import { fakeBackendProvider } from './_helpers/index';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

import { AppComponent }  from './app.component';
import { routing }        from './app.routing';
import { AppConfig } from './app.config';

import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, RoleService, MunicipalityService, UnitService, CommService } from './_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { MunicipalityComponent } from './municipality/index';
import { UnitComponent } from './unit/index';
import { UserComponent } from './user/index';
import { ManagementComponent } from './management/index';

import { Ng2CompleterModule } from "ng2-completer";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        Ng2CompleterModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
        AlertComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        MunicipalityComponent,
        UserComponent,
        UnitComponent,
        ManagementComponent
    ],
    providers: [
        AppConfig,
        AuthGuard,
        AlertService,
        AuthenticationService,
        UserService,
        MunicipalityService,
        UnitService,
        RoleService,
        CommService
        // providers used to create fake backend
        //fakeBackendProvider,
        //MockBackend,
        //BaseRequestOptions
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Answer 1

If you check the package.json for ng2-complete you can see that it defines dependency with reflect-metadata as "reflect-metadata": "^0.1.3".

This means the minimal version is 0.1.3 but the ToPrimitive doesn't exist in reflect-metadata until v0.1.9. See https://github.com/rbuckton/reflect-metadata/blob/v0.1.9/Reflect.js#L712.

So try to specify reflect-metadata dependency in your app package.json as "reflect-metadata": "^0.1.9" which should force install 0.1.9 version.