无法将新的 npm 模块添加到使用 SystemJS 的 Angular2 应用程序：“错误：(SystemJS) ToPrimitive 未定义”

Question

我正在尝试向我的 Angular2 应用程序添加一个 npm 模块，该应用程序使用 systemjs 加载模块。它基于在线教程Angular 2 User Registration and Login Example & Tutorial，该教程声明它基于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' 到地图字段的行

1. 更新 app.module.ts 文件，即添加

   从“ng2-completer”导入{ Ng2CompleterModule }；

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

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

这对我来说似乎很奇怪，好像 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

如果您检查 package.json 的 ng2-complete，您可以看到 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 版本。