Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I created my app using the angular-cli tool. I'm trying to load the ng2-file-upload package into my app but it's getting a 404. I've been trying the suggestion of updating system-config.ts to map to the appropriate packages but I'm still getting a 404.

Here's my system-config.ts file:

"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 });

I'm importing it into my component this way:

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

My app structure looks like the following:

enter image description here

And finally here's the error I'm getting:

enter image description here

share|improve this question
up vote 0 down vote accepted

Change your mapping in system-config.tsto

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

Next tell angular-cli to copy your dependency in vendor directory. Look for angular-cli-build.jsin source directory.

Then update the vendorNpmFiles array to copy everything from node_modules/ng2-file-upload like

ng2-file-upload/**/*.*
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.