Adding in component from third party on beta version of angular 2

Question

I have a large project in angular 2 rc3 .. can't afford to update it to the latest.

I'm following instructions to add third party components like this one:

https://github.com/gmostert/ng2-breadcrumb

I do my best considering my syntax is different from the latest angular 2 but I get errors

import {Ng2BreadcrumbModule, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css'],
  directives: [ROUTER_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
  providers: [BreadcrumbService]  
})

error:

zone.js:101 GET http://localhost:4200/ng2-breadcrumb/ng2-breadcrumb 404 (Not Found)

Doesn't look like it's looking for this thing in the node_modules folder? I think I have to handle this in system-config.ts or something?

Please advise.. I spend way too much time trying to figure out how to get these dependencies working properly..

// 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 = {
  '@ngrx': 'vendor/@ngrx',
  'file-saver': 'vendor/file-saver',
  'ng2-breadcrumb': 'npm:ng2-breadcrumb'
};

/** User packages configuration. */
const packages: any = {
  '@ngrx/core': {
     main: 'index.js',
     format: 'cjs'
   },
   '@ngrx/store': {
      main: 'index.js',
      format: 'cjs'
    },
   'ng2-breadcrumb': {
      defaultExtension: 'js'
    },    
    'file-saver': {
      main: 'fileSaver.js',
      format: 'cjs'
    }
};

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

  // Thirdparty barrels.
  'rxjs',
  'file-saver',
  'xlsx',

  // App specific barrels.
  'app',
  'app/shared',
  'app/admin-dashboard',
  'app/products',
  'app/users',
  'app/login',
  'app/clients',
  'app/reducers',
  'app/actions',
  'app/table',
  'app/users-list',
  'app/search',
  'app/form',
  'app/forgot-password',
  'app/product-data',
  'app/client-edit',
  'app/user-edit',
  'app/client-dashboard',
  'app/scrub-dashboard',
  'app/components/scrub/dashboard',
  'app/components/scrub/scrub-dashboard',
  'app/components/scrub/scrub-editorial',
  'app/components/form/dropdown',
  'app/components/table/editorial-report-table',
  'app/components/table/editorial-report-table/editorial-report-table',
  'app/components/table/abstract-table/abstract-table',
  'app/components/table/abstract-table',
  'app/tables',
  'app/components/table',
  'app/components/tables/editorial-report-table',
  'app/components/cells/editorial-report-cell',
  'app/components/table-rows/editorial-report-row',
  'app/services/api/api-service',
  'app/components/form/scrub-search',
  'app/components/table-header',
  'app/components/table-footer',
  'app/components/scrub/scrub-products-review',
  'app/components/scrub/scrub-product-review',
  'app/components/table-rows/product-review-report-row',
  'app/modal',
  'app/components/modal',
  'app/components/product/top10-reviews',
  'app/components/scrub/scrub-product-faq',
  'app/components/table-rows/product-faq-report-row',
  'app/components/product/questions',
  'app/recent-reviews',
  'app/components/product/recent-reviews',
  'app/components/scrub/scrub-pricing-inventory',
  'app/components/table-rows/pricing-inventory-report-row',
  'app/components/scrub/scrub-search-result',
  'app/components/table-rows/search-result-report-row',
  'app/components/form/file-upload-input',
  'app/components/form/retailer-dropdown',
  'app/components/form/client-dropdown',
  'app/components/form/report-type-dropdown',
  'app/components/form/frequency-dropdown',
  'app/components/scrub/scrub-automated-report',
  'app/components/product/update-from',
  'app/components/form/file-upload',
  'app/components/table-rows/scrub-automated-reporting',
  'app/components/table-rows/automated-reporting-row',
  'app/components/product/automated-report',
  'app/components/scrub/scrub-price-comparison',
  'app/components/form/comparison-search',
  'app/components/table-rows/price-comparison-row',
  'app/edit-profile',
  'app/breadcrumb',
  /** @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',
    '@ng2-breadcrumb': 'ng2-breadcrumb.js'
  },
  packages: cliSystemConfigPackages
});

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

Answer 1

Yes, you will need to add to the systemjs.config file. You should have the following

map: {
  'ng2-breadcrumb': 'npm:ng2-breadcrumb'
},
packages: {
  'ng2-breadcrumb': {
     defaultExtension: 'js'
  }
}

You will also need to declare the BreadcrumbComponent in order to be able to use the breadcrumb element

import {BreadcrumbComponent, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css'],
  directives: [
    ROUTER_DIRECTIVES,
    REACTIVE_FORM_DIRECTIVES,
    BreadcrumComponent
  ],
  providers: [BreadcrumbService]  
})

You won't need the Ng2BreadcrumbModule , as that is only for RC6 and later.

If the systemjs mapping doesn't work, please update your post with the config file. You may have different structuring of the mappings, so it may not be so obvious how to go about adjusting it