Question

我正在尝试将npm模块添加到我的Angular2应用程序中，该应用程序使用systemjs来加载模块。它基于在线教程Angular 2 User Registration and Login Example & Tutorial，表明它基于Angular 2 quickstart project。

我要添加的模块是ng2-completer。它不是我未能集成到我的applcation的第一个模块;显然我错过了正确配置它的东西，虽然我按照并仔细检查安装和放大模块页面中描述的使用步骤。

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

我遵循的步骤是：

使用 npm install ng2-completer --save
更新systemjs.config.js文件，即添加

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

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

从＆＃34; ng2-completer＆＃34;;

指令并在@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

如果您检查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版本。

无法将新的npm模块添加到使用SystemJS的Angular2应用程序中：＆＃34;错误：（SystemJS）ToPrimitive未定义＆＃34;

1 个答案: