web-dev-qa-db-ja.com

Angular2-Angular-CLIインストールlodash-モジュールが見つかりません

Mac OSX El capitan | angular-cli：0.1.0 |ノード：5.4.0 | os：ダーウィンx64

Angular-cli wikiに従ってサードパーティのnpmモジュールをインストールしようとします： https://github.com/angular/angular-cli/wiki/3rd-party-libs が失敗します。私はこれまで何日もこれに取り組んできましたが、どんな助けにも感謝します。

エラーを取得する手順：

_ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save_

angular-cli-build.json：

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; _ng build_（lodashはdist/vendorに正しく追加されます）

system-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)
_

編集：以下のコメントによる詳細情報

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>
_
angularjslodashsystemjsnpm-installangular-cli
9
Daniel Mattsson

安定版リリースと現在のangular-cli（1.0.0-beta.15）では、npmパッケージとタイプ定義を追加するだけです

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

1.0.0-beta.15などの初期のバージョンでは、次のバージョンが必要です。現在のバージョンでは必要ありません。

ライブラリをangular-cli.jsonに追加してグローバルスクリプトのリストに追加します（"../node_modules/lodash/lodash.js"をリストapps[0].scriptsに追加します）。

https://github.com/angular/angular-cli#global-library-installation を参照してください

26
mfit

FWIW、今日（1.0.0-beta.26）から、scriptsエントリを追加する必要がなくなりました。

以下を使用して、適切なエントリをpackage.jsonに追加するだけです。

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

次に、TypeScriptコードで次を使用します。

import * as _ from 'lodash';

コードは問題なく実行されます。

私の場合、実際にscriptsエントリを追加すると問題が発生しました。

10
Eric Liprandi

[更新された回答] angular-cli (1.0.0-beta.15):の新しいバージョンの後

追加するだけ

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

次に、ライブラリをangular-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));
  }
}
_

before：angular-cli (1.0.0-beta.15):

この行をsrc/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));
  }
}
_

私はすぐに試しました、それは私のために働きました

5
pd farhad

2017年4月15日@ angular/cli 1.0.0以降

インストールするバージョンを非常に具体的に指定する必要があります。そうしないと、TypeScriptバインディングによってあらゆる種類のエラーが発生します。私がやったことは、devDependenciesをpackage.jsonで次のように更新することです。

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

Angular CLIとSystem.jsでサードパーティライブラリをサポートするには、system.config.tsとangular-cli-build.jsで手動で指定する必要があります。回答しました- ここlodashおよびその他の依存関係の例.

2
Urigo