Angular CLI 3rd 方库安装失败答案

【问题标题】：Angular CLI 3rd party lib installation failingAngular CLI 3rd 方库安装失败
【发布时间】：2016-10-21 23:19:15
【问题描述】：

嗯，我有一个奇怪的情况。我遵循了 3rd 方库安装的所有指南。当我运行 ng serve 实际上我可以看到 dis/vendor/redux 下的库。但是当我打开浏览器时，我的应用程序无法运行，并且当我在开发人员工具中检查资源时，该库不存在。我应该在哪里寻找问题？我的意思是怎么可能在 dist 文件夹中我可以看到库（在 webstorm 中）但在浏览器上却没有出现？

// 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 = {
  'redux': 'vendor/redux/dist'
};

/** User packages configuration. */
const packages: any = {
  'redux':{defaultExtension: 'js', main: 'redux.js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * 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/router-deprecated',

  // Thirdparty barrels.
  'rxjs',
  // App specific barrels.
  'app',
  'app/shared',
  /** @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 });

还有 angular-cli-build.js：

// Angular-CLI build configuration
    // This file lists all the node_modules files that will be used in a build
    // Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

    /* global require, module */

    var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

    module.exports = function(defaults) {
      return new Angular2App(defaults, {
        vendorNpmFiles: [
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'zone.js/dist/**/*.+(js|js.map)',
          'es6-shim/es6-shim.js',
          'reflect-metadata/**/*.+(ts|js|js.map)',
          'rxjs/**/*.+(js|js.map)',
          '@angular/**/*.+(js|js.map)',
          'redux/dist/**/*.js'
        ]
      });
    };

【问题讨论】：

vendor/redux/dist/redux.js是什么格式，可能需要在包定义中加上format: "format_type"？
您不需要 packages 定义。

标签： angular angular-cli

【解决方案1】：

我可以建议您一种解决方法，直到他们获得对 3rd 方库的更好支持。它对我有用:)

只要确保你在你的 src/index.html 中链接了你的 redux 路径

<script src="/vendor/redux/dist/redux.js" type="text/javascript"></script>

如果它不起作用，请确保您的 system-config.js 保持这种状态

const packages: any = {
  'redux':{format: 'cjs',defaultExtension: 'js', main: 'redux.js'}
};

希望你让它运行:)

【讨论】：