Angular2 - Угловая CLI установка lodash - Не удается найти модуль

Question

Mac OSX El capitan | angular-cli: 0.1.0 | узел: 5.4.0 | os: darwin x64

Я пытаюсь установить сторонний модуль npm согласно викторине углового-cli: https://github.com/angular/angular-cli/wiki/3rd-party-libs, но не удается. Я боролся с этим в течение нескольких дней и очень ценю любую помощь.

шаги, чтобы получить ошибку:

ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save

угловой кли-build.json:

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; ng build (lodash получает добавлено в Dist/поставщика)

системы -config.ts:

/** Map relative paths to URLs. */ 
const map: any = { 
    'lodash': 'vendor/lodash/lodash.js' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'lodash': { 
    format: 'cjs' 
    } 
}; 

(все согласно спецификации в https://github.com/angular/angular-cli/wiki/3rd-party-libs) Примечание. Я пробовал все настройки конфигурации, о которых я могу думать здесь, все они дают одинаковый результат.

lodashtest3.component.ts: import * as _ from 'lodash';

ng build

Could not start watchman; falling back to NodeWatcher for file system events. 
Visit http://ember-cli.com/user-guide/#watchman for more info. 
Build failed. 
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: 
Error: Typescript found the following errors: 
    /Users/danielmattsson/git/lodashtest3/tmp/broccoli_type_script_compiler-input_base_path-g2lDIaq6.tmp/0/src/app/lodashtest3.component.ts (2, 20): Cannot find module 'lodash'. 
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19) 
    at BroccoliTypeScriptCompiler.build (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21 
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17) 
    at lib$rsvp$$internal$$publish (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11) 
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9) 
    at nextTickCallbackWith0Args (node.js:456:9) 
    at process._tickCallback (node.js:385:13) 

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31) 
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10) 
    at BroccoliTypeScriptCompiler (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49) 
    at Angular2App._getTsTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:280:18) 
    at Angular2App._buildTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:101:23) 
    at new Angular2App (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:42:23) 
    at module.exports (/Users/danielmattsson/git/lodashtest3/angular-cli-build.js:6:10) 
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19) 
    at Class.module.exports.Task.extend.init (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10) 
    at new Class (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12) 
    at Class.module.exports.Task.extend.run (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24 
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11 
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9) 

EDIT: больше информации в соответствии с комментариями ниже

DIST/index.html:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Lodashtest3</title> 
    <base href="/"> 

    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Service worker support is disabled by default. 
     Install the worker script and uncomment to enable. 
     Only enable service workers in production. 
    <script type="text/javascript"> 
    if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('/worker.js').catch(function(err) { 
     console.log('Error installing service worker: ', err); 
     }); 
    } 
    </script> 
    --> 
</head> 
<body> 
    <lodashtest3-app>Loading...</lodashtest3-app> 

    <script src="vendor/es6-shim/es6-shim.js"></script> 
    <script src="vendor/reflect-metadata/Reflect.js"></script> 
    <script src="vendor/systemjs/dist/system.src.js"></script> 
    <script src="vendor/zone.js/dist/zone.js"></script> 

    <script> 
    System.import('system-config.js').then(function() { 
     System.import('main'); 
    }).catch(console.error.bind(console)); 
    </script> 
</body> 
</html> 

Answer 1

С стабильной версией и текущим угловым-кли (1.0.0-beta.15), это просто добавить пакет NPM плюс определение типа

npm install lodash --save 
npm install @types/lodash --save-dev 

Для ранних версий, таких как 1.0.0-бета .15, следующий необходим. Это не должно требоваться для текущих версий:

Добавить библиотеку в angular-cli.json в список глобальных скриптов (добавить "../node_modules/lodash/lodash.js" в список apps[0].scripts).

См https://github.com/angular/angular-cli#global-library-installation

Answer 2

[ обновленный ответ] После новой версии angular-cli (1.0.0-beta.15):

просто добавить

npm install lodash --save 
npm install @types/lodash --save-dev 

затем добавить библиотеку в угловом-cli.json в список глобальных сценариев (добавить "../node_modules/lodash/lodash.js" в список apps[0].scripts) ,

и в компоненте, где вы хотите использовать, попробуйте этот способ

declare var _:any; 

@Component({ 
}) 
export class YourComponent { 
    ngOnInit() { 
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); 
    } 
} 

перед: angular-cli (1.0.0-beta.15):

добавить эту строку в ИПВ/index.html

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

и в вашем компоненте, где вы хотите использовать, попробуйте таким образом

declare var _:any; 

@Component({ 
}) 
export class YourComponent { 
    ngOnInit() { 
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); 
    } 
} 

Я попытался сразу, он работал для меня

Answer 3

Для того, чтобы поддержать 3-библиотеки в угловой CLI и System.js, вы должны указать их вручную на system.config.ts и angular-cli-build.js. Я ответил на это here с примером для lodash, а также другими зависимостями.

Answer 4

FWIW, по состоянию на сегодняшний день (1.0.0-beta.26), добавив scripts записи больше нет необходимости.

Просто добавьте соответствующие записи в package.json с помощью:

npm i --save lodash 
npm i --save-dev @types/lodash 

Затем в коде машинопись, используйте:

import * as _ from 'lodash'; 

код будет работать нормально.

В моем случае фактическое добавление записи scripts вызывало проблемы.

Answer 5

На 4/15/2017 с @ угловым/кли 1.0.0:

Вы должны быть очень конкретной информацией о том, какие версиях вы устанавливаете иначе машинописи привязки дадут все виды отказов. То, что я сделал это обновить мои devDependencies следующим образом в package.json:

"@types/lodash": "ts2.0"