角2 CLI建立與lodash

Question

進口總是導致錯誤 '不能找到模塊lodash'

import _ from 'lodash'; 

角-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' 
     ] 
    }); 
}; 

系統config.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導入以查看發生的錯誤。

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文件，並在類型dir中定義全局安裝位置lodash。

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

對於typecript來解析純JS庫的外部依賴關係，我們必須提供類型定義。以上步驟是提供相同的。

您可能必須調整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