cannot use angular-moment under webpack #108
Comments
|
You can make the module work by using this webpack config in your source code: and using webpack's imports-loader loader. The trick is setting the |
|
@kumarharsh thanks for the help on this issue. i'm new to webpack but am running into this issue, unfortunately. could you give me an example of where the 'angular-moment' key needs to go in a config file and a little explanation on it? thanks in advance. |
|
@kumarharsh i've resolved the issue on my end by adding this: module: {
loaders: [
...
{test: /[\/]angular\.js$/, loader: "exports?angular"}
]
} |
|
Should be fixed here: angular-moment/angular-moment.js Line 651 in 8b34525 Please check and report back! Thanks :) |
|
Webpack still hits the first part: And breaks with the same error message of The compiled WEBPACK shows this: Which means it's definitely executing the first function instead of the second. |
|
Hi, I also get the same error even after upgrading to 1.0.0-beta.2 `Uncaught TypeError: angular.module is not a function. |
|
Same here on 1.0.0-beta.2 |
|
Alright, I want to get this fixed for Can you please check whether switching the order of the i.e. if (typeof module !== 'undefined' && module && module.exports) {
angularMoment(require('angular'), require('moment'));
module.exports = 'angularMoment';
} else if (typeof define === 'function' && define.amd) {
define(['angular', 'moment'], angularMoment);
} else {
angularMoment(angular, (typeof global !== 'undefined' ? global : window).moment);
} |
|
I've pasted your code and got the same error. I managed to get it working with this if (typeof module !== 'undefined' && module && module.exports) {
angularMoment(angular, moment);
module.exports = 'angularMoment';
} else if (typeof define === 'function' && define.amd) {
define(['angular', 'moment'], angularMoment);
} else {
angularMoment(angular, (typeof global !== 'undefined' ? global : window).moment);
} |
|
@luisfontes thanks a million! can you please paste your webpack configuration? or even better, make a small gist / github repo that reproduces this? Thanks! |
Here is my webpack.config.js file if it helps:
```
{
entry: {
app: './src/app.js'
},
output: {
filename: 'app.js'
},
watch: watch,
devtool: (process.env.NODE_ENV === 'production') ? 'source-map' : 'inline-source-map',
module: {
preLoaders: [{test: /\.js$/, exclude: [/node_modules/, /bower_components/], loader: 'jshint'}],
loaders: [
{test: /\.js$/, exclude: [/node_modules/, /bower_components/], loader: 'babel', query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true,
presets: ['es2015', 'stage-0', 'stage-1', 'stage-2'],
plugins: ['transform-es2015-modules-commonjs']
}},
{test: /\.css$/, loader: 'style!css!postcss'},
{test: /\.json$/, exclude: [/node_modules/, /bower_components/], loader: 'json'},
{test: /[\/]angular\.js$/, exclude: [/bower_components/], loader: 'exports?angular'}
]
},
postcss: [autoprefixer({ browsers: ['last 2 version'] })],
plugins: [
new BowerWebpackPlugin({
exclude: [
/.*angular*/,
/.*angular-cookies*/,
/.*angular-sanitize*/,
/.*angular-resource*/,
/.*angular-messages*/,
/.*angular-translate*/,
/.*angular-touch*/,
/.*angular-mocks*/,
/.*jquery*/,
/.*bootstrap-sass-official\/.*\.js/,
/.*bootstrap\.css/,
/.*awesome-bootstrap-checkbox*/,
/.*font-awesome*/,
/.*\.less/
],
searchResolveModulesDirectories: false
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
moment: 'moment'
}),
new webpack.DefinePlugin({
ENV_TEST: (JSON.stringify(process.env.NODE_ENV) === 'test') ? true : false
}),
new webpack.DefinePlugin({
APP_VERSION: JSON.stringify(require('./package.json').version)
})
],
resolve: {
root: path.resolve('./src'),
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.json', '.css']
}
};
```
Resolves urish#108
Fix the module export for webpack Resolves urish#108
|
Facing this exact same issue in other angular modules as well (angular-moment, angular-storage, angular-translate), even angular itself! All errors are on the line where Webpack replaces the define statement (as stated by @voor above). This is my webpack.config. I've installed all modules via npm and |
|
have the same problem. |
|
+1 |
|
+1 |
|
+1 |
|
Got it working by applying exports-loader to angular.js file. It is the same solution as @cbfx has suggested. No need to inject webpack.config.js: |
|
This is not working for me regardless of the workarounds in this ticket. I am not using loaders. I am using the loaders directly in the require statement: I have tried the loaders in the webpack config, I have also tried with and without imports?angular on angular-moment. The project I am working on is using a pretty old version of angular. I have also tried updating angular and that does not work either. It is currently using Angular 1.2.20, I would prefer to not have to introduce other breaking changes. But I have tried updating all of my bower and npm packages completely. This did not help either. I am currently using these packages: bower: NPM: |
|
Update: This is the only config that worked for me (only relative parts shown): |
|
This is not working for me regardless of the commit |
|
This is still happening for me using version 1.0.0 the following code snippet appears to be the problem Not sure why its always |
I'm running an angular app under webpack-dev-server that includes moment and angular moment. My basic config file stars as:
I get a javascript error when angular-moment loads that "angular.moment" is not a function.
I investigated this and found that, for some reason, when angular-moment is intializing, the passed in value for angular is an empty object (not null/undefined but an empty object). I fixed the problem in my local source for angular-moment by adding a check for an empty angular object at which point I assign angular the value of window.angular (which does exist). This fixes the issue, but, as is, angular-moment will not work with my app otherwise...
My modification:
before the line #20 in angular-moment.js v0.9.0, I insert this block
The text was updated successfully, but these errors were encountered: