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

Question

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

这是我的系统-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/**/*.*

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

Angular2: How to resolve 404 error when loading node module into component built using Angular-CLI

angular

angular-cli