使用 lodash 构建 Angular 2 CLI

Question

导入总是导致错误“找不到模块 lodash”

import _ from 'lodash';

angular-cli-build.js

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)',
        '@ngrx/**/*.+(js|js.map)',
        '@angular/**/*.+(js|js.map)',
        '@angular2-material/**/*.js',
        'angularfire2/**/*.js',
        'firebase/*.js', 
        'lodash/**/*.js'
        ]
    });
};

系统配置.js

// 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 = {
    '@angular2-material': 'vendor/@angular2-material',
    '@ngrx': 'vendor/@ngrx',
    'firebase': 'vendor/firebase/firebase.js',
    'angularfire2': 'vendor/angularfire2',
    'lodash': 'vendor/lodash'
  };

  /** User packages configuration. */
  const packages: any = {
    '@angular2-material/button': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'button.js'
    },
    '@angular2-material/card': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'card.js'
    },
    '@angular2-material/core': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'core.js'
    },
    '@angular2-material/checkbox': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'checkbox.js'
    },
    '@angular2-material/icon': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'checkbox.js'
    },
    '@angular2-material/input': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'input.js'
    },
    '@angular2-material/list': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'list.js'
    },
    '@angular2-material/sidenav': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'sidenav.js'
    },
    '@angular2-material/toolbar': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'toolbar.js'
    },
    '@ngrx/core': {
        main: 'index.js',
        format: 'cjs'
    },
    '@ngrx/store': {
        main: 'index.js',
        format: 'cjs'
    },
    'angularfire2': {
        defaultExtension: 'js',
        main: 'angularfire2.js'
    },
    'lodash': {
      main:'index.js', 
      defaultExtension:'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/forms',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',

    // Thirdparty barrels.
    'rxjs',
    'lodash',

    // App specific barrels.
    'app',
    'app/services',
    'app/reducers',
    'app/dashboard',
    'app/http-start',
    'app/http-finish',
    'app/wikipedia-search-start',
    'app/wikipedia-search-finish',
    'app/todo-list',
    'app/todo-list-firebase',
    'app/todos',
    'app/todos-ngrx',
    'app/todos-firebase'
    /** @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',
      'lodash': 'vendor/lodash',
      'main': 'main.js'
    },
    packages: cliSystemConfigPackages
  });

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

typings.json

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  },
  "dependencies": {
    "lodash": "registry:npm/lodash#4.0.0+20160723033700"
  }
}

这是我尝试在其中使用 lodash 的存储库和文件。您可以克隆存储库和 npm install、npm start。然后把下面文件中的lodash import 注释掉，就可以看到报错了。

https://github.com/ryanlangton/angular2-rxjs/blob/master/src/app/http-finish/http-finish.component.ts

Answer 1

请运行

typings install lodash=dt~lodash -G

这将为lodash 安装类型并在相关文件上更新它。如果不是，请手动更新 typings.d.ts 文件，并在类型目录中使用 lodash 定义的全局安装位置。

Eg: /// <reference path="../typings/global/lodash/index.d.ts" />

为了让 typescript 解析纯 JS lib 的外部依赖，我们必须提供类型定义。上述步骤是提供相同的。

您可能需要调整 system.config.ts 文件，因为 lodash 是纯 JS 库，在 lodash 目录中不会有 index.js。

map: {
      lodash: 'vendor/lodash/lodash.js
}

并从包中删除此代码

'lodash': {
  main:'index.js', 
  defaultExtension:'js'
}

或者让你的映射保持原样并调整packages 就像

'lodash': {
      main:'lodash.js', 
      defaultExtension:'js'
    }

详情see