使用lodash的Angular 2 CLI构建 [英] Angular 2 CLI build with lodash
问题描述
导入始终会导致错误无法找到模块lodash"
import always results in an error 'cannot find module lodash'
import _ from 'lodash';
angular-cli-build.js
angular-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
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
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"
}
}
这是我要在其中使用lodash的存储库和文件.您可以克隆存储库并进行npm install，npm start.然后取消注释以下文件中的lodash导入以查看发生错误.
Here is the repository and file I'm trying to use lodash in. You can clone the repository and npm install, npm start. Then uncomment out the lodash import in the following file to see the error occur.
推荐答案
请运行
typings install lodash=dt~lodash -G
这将安装lodash的类型并在相关文件上进行更新.如果不能，请在键入dir中使用lodash定义的全局安装位置手动更新typings.d.ts文件.
This will install typings for lodash and update it on relevant files. If it won't then please manually update typings.d.ts file with location of global install of lodash definition in typings dir.
Eg: /// <reference path="../typings/global/lodash/index.d.ts" />
为使Typescript解析纯JS lib的外部依赖关系，我们必须提供类型定义.以上步骤均提供相同的功能.
For typescript to resolve a external dependencies of pure JS lib we have to provide type definition. Above steps are to provide the same.
您可能需要调整system.config.ts文件，因为lodash是纯JS库，并且在lodash目录中没有index.js.
You may have to adjust the system.config.ts file as lodash is pure JS lib and will not have index.js in lodash directory.
map: {
lodash: 'vendor/lodash/lodash.js
}
和从软件包中删除此代码
'lodash': {
main:'index.js',
defaultExtension:'js'
}
或者让您保持映射不变，然后将packages调整为
Alternatively leave you mapping as it is and adjust packages to be like
'lodash': {
main:'lodash.js',
defaultExtension:'js'
}
有关详细信息，请参见
这篇关于使用lodash的Angular 2 CLI构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
