为什么我无法在angular2中导入lodash [英] why I am not able to import lodash in angular2
问题描述
我正在使用angular2 rc1中的angular-cli进行开发.
I am using angular-cli in angular2 rc1 for development.
我已经通过npm安装了lodash node_module,并使用以下命令在systemjs中对其进行了配置:
I have installed lodash node_module through npm and configured it in systemjs using following:
system.config.ts
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'ng2-dnd',
'ng2-bootstrap',
'moment',
'lodash',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
if(barrelName=='ng2-dnd'){
cliSystemConfigPackages[barrelName] = { main: 'ng2-dnd' };
}else if (barrelName == 'ng2-bootstrap') {
cliSystemConfigPackages[barrelName] = { main: 'ng2-bootstrap' };
}else if (barrelName == 'lodash') {
cliSystemConfigPackages[barrelName] = { main: 'lodash' };
}else if (barrelName == 'moment') {
cliSystemConfigPackages[barrelName] = { main: 'moment' };
}else{
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',
'main': 'main.js',
'ng2-dnd': 'vendor/ng2-dnd',
'ng2-bootstrap':'vendor/ng2-bootstrap',
'moment':'vendor/moment',
'lodash':'vendor/lodash'
},
meta: {
lodash: { format: 'amd' }
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
我只想指出其他node_modules正常工作,例如moment,ng2-bootstrap等. angular-cli-build.js
I would just like to note that other node_modules are working correctly i.e. moment,ng2-bootstrap etc. angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
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/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'ng2-dnd/**/*.js',
'ng2-bootstrap/**/*.js',
'moment/*.js',
'lodash/*.js'
]
});
};
在配置lodash node_module之后,我从目录dist\vendors\lodash
after this configuration of lodash node_module, I am importing it from the directory dist\vendors\lodash
在我的app.component中,我将其导入为:
in my app.component i am importing it as :
import _ from 'lodash';
但是我遇到了以下错误:
But I am getting below error:
找不到模块"lodash"
Cannot find module 'lodash'
有什么解决方案吗? 预先感谢
any solutions? thanks in advance
推荐答案
我可以建议您一种解决方法,直到他们获得对第三方库的更好支持.它对我有用:)
I can suggest you a workaround until they get better support for 3rd party libs. It worked for me :)
在您的angular-cli-build.json中,确保它保持这种方式
In your angular-cli-build.json , make sure it remains like this way
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'lodash/**/*.js'
]
});
};
并在您的system-config.ts中:
and in your 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'
}
};
在您的src/index.html中添加此行
in your src/index.html add this line
<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
现在在您要使用lodash的组件中,以这种方式编写
now in your component where you want to use lodash , write this way
declare var _:any;
@Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
这篇关于为什么我无法在angular2中导入lodash的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!