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)

看起来没有在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映射不起作用，请使用配置文件更新您的帖子。您可能有不同的映射结构，因此如何调整它可能不那么明显

在角度为2的测试版中添加来自第三方的组件

1 个答案: