У меня есть приложение Angular5, которое использует Lodash, все это прекрасно работает через WebPack (его Angular5, поэтому WebPack не Angular Cli).
При тестировании появляется ошибка:
TypeError: Невозможно прочитать свойство 'isNil' с неопределенным значением
Это проект Angular 5, в котором я использую WebPack, и вывод перед запуском кармы показывает, что lodash в порядке.
Asset Size Chunks Chunk Names config/spec-bundle.js 19.4 MB 0 [emitted] [big]
config / spec-bundle.js [27] ./node_modules/lodash/lodash.js 540 кБ {0} [встроенный] [33] ./node_modules/@angular/core/esm5/testing.js47,4 кБ {0} [встроенный] [114] ./node_modules/rxjs/Rx.js 9,79 кБ {0} [встроенный] [473] ./config/spec-bundle.js 2,05 кБ {0} [встроенный] [475] ./node_modules/core-js/es6/index.js 5,88 кБ {0} [встроенный] [620] ./node_modules/core-js/es7/reflect.js 510 байт {0} [встроенный] [631]./node_modules/zone.js/dist/zone.js 126 кБ {0} [встроенный] [632] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6,22 кБ {0} [встроенный][633] ./node_modules/zone.js/dist/proxy.js 5,6 кБ {0} [встроенный] [634]./node_modules/zone.js/dist/sync-test.js 1,41 кБ {0} [встроенный] [635] ./node_modules/zone.js/dist/jasmine-patch.js 6,36 кБ {0} [встроенный] [636] ./node_modules/zone.js/dist/async-test.js 3,23 кБ {0} [встроенный] [637] ./node_modules/zone.js/dist/fake-async-test.js 17 кБ {0}[встроенный] [910] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17,8 кБ {0} [встроенный]
Также он правильно импортируется в компонент с использованием
import _ from 'lodash'
Мой конфиг веб-пакета находится здесь:
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
/**
* Webpack Plugins
*/
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const webpack = require('webpack');
/**
* Webpack Constants
*/
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
return {
/**
* Source map for Karma from the help of karma-sourcemap-loader & karma-webpack
*
* Do not change, leave as is or it wont work.
* See: https://github.com/webpack/karma-webpack#source-maps
*/
devtool: 'inline-source-map',
/**
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
/**
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['.ts', '.js'],
/**
* Make sure root is src
*/
modules: [helpers.root('src'), 'node_modules']
},
/**
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*
* 'use:' revered back to 'loader:' as a temp. workaround for #1188
* See: https://github.com/AngularClass/angular-starter/issues/1188#issuecomment-262872034
*/
module: {
rules: [
/**
* Source map loader support for *.js files
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
*
* See: https://github.com/webpack/source-map-loader
*/
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
/**
* These packages have problems with their sourcemaps
*/
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular')
]
},
/**
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
*
* See: https://github.com/s-panferov/awesome-typescript-loader
*/
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
query: {
/**
* Use inline sourcemaps for "karma-remap-coverage" reporter
*/
sourceMap: false,
inlineSourceMap: true,
compilerOptions: {
/**
* Remove TypeScript helpers to be injected
* below by DefinePlugin
*/
removeComments: true
}
},
},
'angular2-template-loader'
],
exclude: [/\.e2e\.ts$/]
},
/**
* Raw loader support for *.css files
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.css$/,
loader: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src/index.html')]
},
/**
* Raw loader support for *.scss files
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.scss$/,
loader: ['raw-loader', 'sass-loader'],
exclude: [helpers.root('src/index.html')]
},
/**
* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* Instruments JS files with Istanbul for subsequent code coverage reporting.
* Instrument only testing sources.
*
* See: https://github.com/deepsweet/istanbul-instrumenter-loader
*/
{
enforce: 'post',
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
include: helpers.root('src'),
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/
]
}
]
},
/**
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'}),
/**
* Plugin: DefinePlugin
* Description: Define free variables.
* Useful for having development builds with debug logging or adding global constants.
*
* Environment helpers
*
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
*
* NOTE: when adding more properties make sure you include them in custom-typings.d.ts
*/
new DefinePlugin({
'ENV': JSON.stringify(ENV),
'HMR': false,
'process.env': {
'ENV': JSON.stringify(ENV),
'NODE_ENV': JSON.stringify(ENV),
'HMR': false,
}
}),
/**
* Plugin: ContextReplacementPlugin
* Description: Provides context to Angular's use of System.import
*
* See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
* See: https://github.com/angular/angular/issues/11580
*/
new ContextReplacementPlugin(
/**
* The (\\|\/) piece accounts for path separators in *nix and Windows
*/
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('src'), // location of your src
{
/**
* your Angular Async Route paths relative to this root directory
*/
}
),
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({
debug: false,
options: {
/**
* legacy options go here
*/
}
}),
],
/**
* Disable performance hints
*
* See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
*/
performance: {
hints: false
},
/**
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: {
global: true,
process: false,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
}
Есть ли другой способ импортировать Lodash?
Приветствия KH