0
我有一個角度爲2 rc3的大項目..不能將其更新到最新版本。在角度2的beta版本中添加來自第三方的組件
我下面的說明添加第三方組件像這樣的:
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 });
得到這個錯誤:zone.js:101 XMLHttpRequest無法加載npm:ng2-breadcrumb/ng2-breadcrumb.js。協議方案僅支持交叉源請求:http,data,chrome,chrome-extension,https,chrome-extension-resource。 生病發布我的系統js文件上面 – hamobi
我想你應該改變它到供應商''ng2-breadcrumb':'vendor/ng2-breadcrumb'。我不確定'vendor'來自哪裏,但看起來其他庫也在使用它 –