[英]Angular2 - Angular-CLI installing lodash - Cannot find module
Mac OSX El capitan | Mac OSX El capitan | angular-cli: 0.1.0 |
angular-cli:0.1.0 | node: 5.4.0 |
节点:5.4.0 | os: darwin x64
os:darwin x64
I try to install a 3rd party npm module according to the angular-cli wiki: https://github.com/angular/angular-cli/wiki/3rd-party-libs but fail. 我尝试根据angular-cli wiki安装第三方npm模块: https : //github.com/angular/angular-cli/wiki/3rd-party-libs但是失败了。 I've been struggling with this for days now and would greatly appreciate any help.
我几天来一直在努力奋斗,非常感谢任何帮助。
Steps to get the error: 获取错误的步骤:
ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save
angular-cli-build.json: 角-CLI-build.json:
module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); };
ng build
(lodash gets correctly added in dist/vendor) ng build
(lodash在dist / vendor中正确添加)
system-config.ts: 系统config.ts:
/** Map relative paths to URLs. */
const map: any = {
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const packages: any = {
'lodash': {
format: 'cjs'
}
};
(all according to spec in https://github.com/angular/angular-cli/wiki/3rd-party-libs ) Note - I've tried all config settings I can think of here, all giving the same result. (全部根据https://github.com/angular/angular-cli/wiki/3rd-party-libs中的规范)注 - 我已经尝试了我能想到的所有配置设置,都给出了相同的结果。
lodashtest3.component.ts: import * as _ from 'lodash';
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: more information according to comments below 编辑:根据下面的评论更多信息
dist/index.html: 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>
With the stable release and current angular-cli (1.0.0-beta.15), it's simply adding the npm package plus type definitions 有了稳定版本和当前的角度cli(1.0.0-beta.15),它只是添加了npm包加上类型定义
npm install lodash --save
npm install @types/lodash --save-dev
For early versions such as 1.0.0-beta.15 , the next is necessary. 对于早期版本,例如1.0.0-beta.15 ,下一个版本是必要的。 It should not be required for current versions:
当前版本不应该要求:
Add the library to the angular-cli.json
to list of global scripts (add "../node_modules/lodash/lodash.js"
to the list apps[0].scripts
). 将库添加到
angular-cli.json
到全局脚本列表(将"../node_modules/lodash/lodash.js"
添加到列表apps[0].scripts
)。
See https://github.com/angular/angular-cli#global-library-installation 请参阅https://github.com/angular/angular-cli#global-library-installation
FWIW, as of today ( 1.0.0-beta.26
), adding the scripts
entry is not necessary anymore. FWIW,截至今天(
1.0.0-beta.26
),不再需要添加scripts
条目了。
Simply add the proper entries to package.json
using: 只需使用以下命令将适当的条目添加到
package.json
:
npm i --save lodash
npm i --save-dev @types/lodash
Then, in your TypeScript code, use: 然后,在您的TypeScript代码中,使用:
import * as _ from 'lodash';
The code will run just fine. 代码运行得很好。
In my case, actually adding the scripts
entry was causing issues. 在我的情况下,实际添加
scripts
条目导致问题。
[ updated answer ] After the new version of angular-cli (1.0.0-beta.15):
[ 更新的答案 ] 在新版本的
angular-cli (1.0.0-beta.15):
just add 加上
npm install lodash --save
npm install @types/lodash --save-dev
then add the library to the angular-cli.json to list of global scripts(add "../node_modules/lodash/lodash.js"
to the list apps[0].scripts
). 然后将库添加到angular-cli.json到全局脚本列表(将
"../node_modules/lodash/lodash.js"
添加到列表apps[0].scripts
)。
and in your component where you want to use , try this way 并在您想要使用的组件中,尝试这种方式
declare var _:any;
@Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
before : angular-cli (1.0.0-beta.15):
之前:
angular-cli (1.0.0-beta.15):
add this line in src/index.html 在src / index.html中添加此行
<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
and in your component where you want to use , try this way 并在您想要使用的组件中,尝试这种方式
declare var _:any;
@Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
I tried straight away , it worked for me 我马上尝试了,它对我有用
In order to support 3rd party libraries in Angular CLI and System.js, you have to specify them manually on system.config.ts
and angular-cli-build.js
. 为了支持Angular CLI和System.js中的第三方库,您必须在
system.config.ts
和angular-cli-build.js
上手动指定它们。 I've answered it here with example for lodash
and also other dependencies. 我在这里用
lodash
和其他依赖项的例子回答了它。
As of 4/15/2017 with @angular/cli 1.0.0: 截至4/15/2017 @ @ angular / cli 1.0.0:
You need to be very specific about which versions you install otherwise the TypeScript bindings will give all sorts of failures. 您需要非常具体地了解您安装的版本,否则TypeScript绑定将提供各种类型的失败。 What I did is update my devDependencies as follows in
package.json
: 我所做的是在
package.json
更新我的devDependencies,如下所示:
"@types/lodash": "ts2.0"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.