Question

过去几天我一直在尝试导入我通过NPM安装的模块（https://www.npmjs.com/package/ng2-tag-input），但我一直收到以下错误：

(index):21 Error: Error: XHR error (500 Internal Server Error) loading http://localhost:3000/ng2-tag-input/index.js

https://i.stack.imgur.com/PLhM8.png

我尝试过不同的模块，一切都抛出同样的错误。我还尝试过一个空白的准系统，快速启动项目，它总是一样的。

我已尝试将其包含在systemjs.config.js文件中，但无效。以下是一些相关文件：

Systemjs.config.js：

＆＃13;

var isPublic = typeof window != "undefined";

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': (isPublic) ? '/' : 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'client',
            // 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',
            'angular2-jwt':               'npm:angular2-jwt/angular2-jwt.js',
            'ng-semantic':                'npm:ng-semantic',
            'ng2-tag-input': 'npm:ng2-tag-input'
        },
        // 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'
            },
            'ng-semantic': {
                main: 'ng-semantic',
                defaultExtension: 'js'
            },
            'ng2-tag-input': {
              defaultExtension: 'js',
              main: "./index.js"
            }
        }
    });
})(this);

＆＃13;

 {
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
},
"exclude": [
  "../node_modules"
]
}

＆＃13;

的package.json

＆＃13;

{
  "name": "Playlstr",
  "version": "1.0.0",
  "description": "Angular 2, Express, redux, etc...",
  "main": "server/app.js",
  "private": true,
  "scripts": {
    "develop": "concurrently \"tsc -w -p ./server\" \"tsc -w -p ./client\" \"nodemon ./server/bin/www\" ",
    "forever": "tsc -p ./server && forever start ./server/bin/www --watch",
    "twc:client:w": "tsc -w -p ./client",
    "twc:server:w": "tsc -w -p ./server",
    "typings": "typings install",
    "build:client": "gulp build:client",
    "build:server": "",
    "postinstall": "typings install && tsc -p ./server"
  },
  "engines": {
    "node": ">= 5.4.1"
  },
  "author": "Gruppe 18",
  "dependencies": {
    "@types/body-parser": "0.0.33",
    "@types/express": "^4.0.32",
    "@types/jsonwebtoken": "^7.1.31",
    "@types/serve-favicon": "^2.2.27",
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "^2.2.0",
    "express": "^4.13.4",
    "express-jwt": "^5.1.0",
    "forever": "^0.15.2",
    "serve-favicon": "~2.3.0",
    "typescript": "^2.0.2",
    "typings": "^1.3.2"
  },
  "devDependencies": {
    "@angular/common": "2.1.2",
    "@angular/compiler": "2.1.2",
    "@angular/core": "^2.1.2",
    "@angular/forms": "2.1.2",
    "@angular/http": "2.1.2",
    "@angular/platform-browser": "2.1.2",
    "@angular/platform-browser-dynamic": "2.1.2",
    "@angular/router": "3.1.2",
    "@angular/upgrade": "2.1.2",
    "@types/core-js": "^0.9.32",
    "@types/jasmine": "^2.2.33",
    "angular2-in-memory-web-api": "0.0.21",
    "angular2-jwt": "^0.1.22",
    "concurrently": "^3.1.0",
    "core-js": "^2.4.1",
    "del": "^2.1.0",
    "gulp": "^3.9.0",
    "gulp-sourcemaps": "^2.1.1",
    "gulp-typescript": "^3.0.2",
    "mongoose": "^4.6.6",
    "nodemon": "^1.9.1",
    "path": "^0.12.7",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-rc.1",
    "systemjs": "0.19.40",
    "systemjs-builder": "^0.15.26",
    "yargs": "^6.3.0",
    "zone.js": "^0.6.23"
  }
}

＆＃13;

我将npm模块导入的模块：

＆＃13;

import {NgModule} from '@angular/core';
import {CommonModule} from "@angular/common";
import {routing} from "./upload.routing";
import {UploadComponent} from "../../components/upload/upload.component";
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { TagInputModule } from 'ng2-tag-input';

@NgModule({
    imports: [
        CommonModule,
        routing,
        TagInputModule,
        FormsModule,
        BrowserModule
    ],
    declarations: [
        UploadComponent
    ],
    bootstrap: [
        UploadComponent
    ],
})
export class UploadModule {}

＆＃13;

任何可能导致它的想法？好像systemjs找不到我的node_modules文件夹。这是一个巨大的头痛。

如果我错过了任何重要的事情，请说出来！

导入NPM模块时出现XHR错误404（Angular2）

0 个答案: