Angular2：如何在将节点模块加载到使用Angular-CLI构建的组件时解决404错误

Question

我使用angular-cli工具创建了我的应用程序。我正在尝试将ng2-file-upload软件包加载到我的应用程序中，但它正在获得404.我一直在尝试更新system-config.ts的建议以映射到相应的软件包，但我仍然得到404

这是我的system-config.ts文件：

"use strict";

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'ng2-file-upload': 'node_modules/ng2-file-upload'
};

/** User packages configuration. */
const packages: any = {
  'ng2-file-upload': { defaultExtension: 'js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/order-details',
  'app/check-payment-component',
  'app/check-payment',
  'app/myorder',
  'app/item-details',
  'app/shipping',
  'app/payment',
  'app/price-line',
  'app/money-order-payment',
  'app/credit-card-payment',
  'app/wire-transfer-payment',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

我将这种方式导入我的组件：

import { FileUploader, FileUploaderOptions, FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload';

我的应用结构如下所示：

最后这是我得到的错误：

Answer 1

将system-config.ts中的地图更改为

const map: any = {
  'ng2-file-upload': 'vendor/ng2-file-upload' 
};

接下来告诉angular-cli在vendor目录中复制你的依赖项。在源目录中查找angular-cli-build.js。

然后更新vendorNpmFiles数组以复制node_modules/ng2-file-upload之类的所有内容

ng2-file-upload/**/*.*