Search Posts

Category: webpack

Webpack 3.0: How can I exclude node_modules from build?

how to Webpack 3.0: How can I exclude node_modules from build? I tried to add ‘target:node’ to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have ‘target:web’ but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin): var path = require(“path”); var webpack = require(“webpack”); module.exports = { target:’web’, devServer: { contentBase: path.join(__dirname, “build”), compress: true, port: 9000 }, node: […]

Webpack 3.0: how to resolve Unknown option: direct.presets – error?

I am trying to create a webpack build for my angularjs app. I am getting this error: ERROR in ./client/app/app.js Module build failed: ReferenceError: [BABEL] E:berty_devmyappclientappapp.js: Unknown option: direct.presets at Logger.error (E:berty_devmyappnode_modulesbabel-corelibtransformationfilelogger.js:58:11) at OptionManager.mergeOptions (E:berty_devmyappnode_modulesbabel-corelibtransformationfileoptionsoption-manager.js:126:29) at OptionManager.init (E:berty_devmyappnode_modulesbabel-corelibtransformationfileoptionsoption-manager.js:216:10) at File.initOptions (E:berty_devmyappnode_modulesbabel-corelibtransformationfileindex.js:147:75) at new File (E:berty_devmyappnode_modulesbabel-corelibtransformationfileindex.js:137:22) at Pipeline.transform (E:berty_devmyappnode_modulesbabel-corelibtransformationpipeline.js:164:16) at transpile (E:berty_devmyappnode_modulesbabel-loaderindex.js:12:22) at E:berty_devmyappnode_modulesbabel-loaderlibfs-cache.js:140:16 at ReadFileContext.callback (E:berty_devmyappnode_modulesbabel-loaderlibfs-cache.js:27:23) at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13) @ multi (webpack)-dev-server/client?http://localhost:9000 ./client/app/app.js webpack: Failed to compile. I am trying to use the […]

Angular Hybrid, how to load templateUrl’s

I have an AngularJS/Angular hybrid build. For templateUrl’s I’m using ngtemplate-loader for AngularJS and angular2-template-loader for Angular. The issue I’m having is loading the right templates depending on the Angular version. I can differentiate the html by naming convention. AngularJS files are fileName.html, whereas Angular files are fileName.component.html. For ngtemplate-loader I have: { test: /.(html)$/, exclude: [/.(^(?!.*.component.html).*.html$)/], use: [{ loader: ‘ngtemplate-loader’, options: { prefix: ‘/’, relativeTo: path.resolve(__dirname, ‘./js/askuity/angular’) } }, { loader: ‘html-loader’ }], } […]

How to resolve issue with webpack& happypack build?

I am running webpack 1.12.15 with happypack. My config file looks like this: var WebpackNotifierPlugin = require(“webpack-notifier”); // var path = require(‘path’); // var bourbon = require(‘node-bourbon’).includePaths; var neat = require(‘node-neat’).includePaths; var autoprefixer = require(‘autoprefixer’); var animatePath = __dirname + “/node_modules/animatewithsass”; var autoprefixer = require(‘autoprefixer’); var moment = require(‘moment’); const HappyPack = require(‘happypack’); module.exports = { eslint: { configFile: “.eslintrc” }, devtool: “sourcemap”, plugins: [ new WebpackNotifierPlugin(), new HappyPack({ loaders: [ ‘babel?presets[]=es2015’ ] }) ], […]

Error: You should use the $window service instead of the default window object

I am trying to use jQuery inside angular controller but I am getting above error here is my package.json { “dependencies”: { “angular”: “^1.6.2”, “angular-animate”: “^1.6.8”, “angular-aria”: “^1.6.8”, “angular-material”: “^1.1.5”, “angular-messages”: “^1.6.8”, “angular-ui-router”: “1.0.0-beta.3”, “jquery”: “^3.2.1” }, “devDependencies”: { “@types/angular”: “^1.6.6”, “@types/angular-mocks”: “^1.5.9”, “@types/angular-ui-router”: “^1.1.36”, “@types/jquery”: “^2.0.40”, “angular-mocks”: “^1.6.2”, “autoprefixer”: “^6.7.3”, “babel-core”: “^6.23.1”, “babel-eslint”: “^7.1.1”, “babel-loader”: “^6.3.2”, “babel-plugin-istanbul”: “^4.0.0”, “babel-polyfill”: “^6.23.0”, “babel-preset-es2015”: “^6.22.0”, “browser-sync”: “^2.18.8”, “browser-sync-spa”: “^1.0.3”, “css-loader”: “^0.26.1”, “del”: “^2.2.2”, “es6-shim”: “^0.35.3”, “eslint”: “^3.19.0”, […]

I can’t import ngResource into my App

I have an app made with Angular and NodeJS, and I can’t import the angular library ngResource into my app. These are the steps I did: 1: in command line I input npm install –save angular-resource 2: in app.js: import angular from ‘angular’; import ngResource from ‘angular-resource’; import uiRouter from ‘angular-ui-router’; import Components from ‘./components/components’; angular.module(‘myApp’, [ uiRouter, Components, ngResource ]) .component(‘homePage’, HomeComponent) .service(‘AirportsService’, AirportsService) .service(‘CheapFlightService’, CheapFlightService) and after doing that, I get this error […]

Deploy To Heroku Breaks App (Node, Yarn, Webpack 3, Angular 1.6)

I’ve been learning Webpack to transition from Bower. I’ve built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get “Internal Server Error” when run on Heroku. Deploys fine, though, and works perfectly in localhost. In my research, I’ve learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem. Heroku logs blame ejs, but I doubt that is […]

Uploading JS Bundle to Azure corrupts the file

I am manually uploading a bundle file into an Azure Web App Service using Kudu. I usually deploy it automatically, but I have received a notice that the site is not working due to an unexpected character in the Bundle JS file. Surprisingly, the file becomes “corrupt” also when I upload it by hand. The Bundle is generated by Webpack and these are the relevant lines: /***/ (function(module, exports) { angular.module(“dirApp”).factory(“userService”, function ($http, $q, dirConfig) […]

How to dynamically load an asset (pdf) in an angular app using webpack?

I am trying to load a pdf into my angular app running on webpack dev server using HTML <object> tag with data attribute. Since the pdf path is generated at run time and is absolute like C:test.pdf. It is not loaded into the UI but rather console logs the error – Not allowed to load local resource: file:///C:/test.jpeg However the production build of the app which doesn’t run on hosting server but as static html […]

watch changes for incremental build using webpack and gulp for angular 5 app – AOT

In order to compile my angular app AOT, I’m using webpack and gulp. I noticed that the watch step of webpack is not working so well, sometimes work and sometimes not, and when it work the files are not being updated on the site. Please see the code bellow and tell me if there is anything I can do with minimum changes? or should I have to write something new? packages.json { “name”: “my-app”, “version”: […]

Next Page »