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

Question

我正在尝试将 npm 模块添加到使用 systemjs 加载模块的 Angular2 应用程序。它基于在线教程 Angular 2 User Registration and Login Example & Tutorial that states it was based on Angular 2 quickstart project。

我要添加的模块是 ng2-completer。这不是我未能集成到我的应用程序中的第一个模块；显然我在正确配置它时遗漏了一些东西，尽管我遵循并仔细检查了模块页面上描述的安装和使用步骤。

在尝试添加模块之前，我有一个正在运行的应用程序没有问题。

我遵循的步骤是；

1. 使用 npm install ng2-completer --save
安装 npm 包
2. 正在更新 systemjs.config.js 文件，即添加

'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js' 行到地图字段

3. 正在更新 app.module.ts 文件，即添加

   从"ng2-completer"导入{Ng2CompleterModule}；

指令并在 @NgModule 配置的导入数组中包含 Ng2CompleterModule。

直到我应用第三步，我的应用程序才能继续正常工作。在第三步之后，浏览器控制台显示以下堆栈跟踪：

这对我来说很奇怪，好像 reflect-metadata/Reflect.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/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 文件：

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

如果您检查 ng2-complete 的 package.json，您可以看到 it defines dependency with reflect-metadata as "reflect-metadata": "^0.1.3"。

这意味着最低版本是 0.1.3，但 ToPrimitive 在 v0.1.9 之前不存在于反射元数据中。参见 https://github.com/rbuckton/reflect-metadata/blob/v0.1.9/Reflect.js#L712。

因此，请尝试在您的应用 package.json 中将反射元数据依赖项指定为 "reflect-metadata": "^0.1.9"，这将强制安装 0.1.9 版本。