Angular 2 CLI bauen mit lodash

Question

import immer in einem Fehler resultiert 'kann nicht Modul lodash finden'

import _ from 'lodash'; 

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

system 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" 
    } 
} 

Hier ist das Repository und die Datei, die ich versuche, lodash zu verwenden. Sie können das Repository klonen und npm install, npm starten. Entfernen Sie den lodash-Import in der folgenden Datei, um den Fehler zu sehen.

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

Answer 1

Bitte führen Sie

typings install lodash=dt~lodash -G 

Dies wird Typisierungen für lodash installieren und auf den relevanten Dateien aktualisieren. Wenn dies nicht der Fall ist, aktualisieren Sie bitte manuell die typings.d.ts Datei mit dem Speicherort der globalen Installation von lodash Definition in typings dir.

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

Für typescript zum Auflösen einer externen Abhängigkeiten von reinem JS lib müssen wir Typdefinition bereitstellen. Die obigen Schritte sollen das Gleiche bereitstellen.

Möglicherweise müssen Sie die Datei system.config.ts anpassen, da lodash reine JS-Bibliothek ist und keine index.js im Verzeichnis lodash hat.

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

und entfernen dieser Code von Paketen

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

Alternativ lassen Sie Mapping, wie es ist, und stellen packages wie see