在角度2的beta版本中添加来自第三方的组件

Question

我有一个角度为2 rc3的大项目..不能将其更新到最新版本。

我下面的说明添加第三方组件像这样的：

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

我尽我所能考虑我的语法是从最新的角2不同，但我得到的错误

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] 
}) 

错误：

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

d看起来它不是在node_modules文件夹中寻找这个东西？我想我必须在system-config.ts或其他东西中处理这个问题？

请指教。我花了太多时间试图找出如何让这些依赖正常工作..

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

是的，你将需要添加到systemjs.config文件。你应该有以下

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

您还需要以申报BreadcrumbComponent能够使用breadcrumb元素

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] 
}) 

你不会需要Ng2BreadcrumbModule，因为这是只为RC6和更高版本。

如果systemjs映射不起作用，请使用配置文件更新您的文章。你可能有不同的映射结构，所以它可能不是那么明显，如何去调整它