CODEWITHSUNDEEP
angularangular-cli
Jason Shultz
Jason Shultz

Reputation: 970

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

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

Upvotes: 0

Views: 891

Answers (1)

Arpit Agarwal
Arpit Agarwal

Reputation: 4013

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/**/*.*

Upvotes: 0

Related Questions