Search Posts

Category: webpack

webpack production build failure

I am trying to build the application code using webpack -p I am getting the below error. ERROR in ./node_modules/html-loader!./app/Common/templates/tooltipTemplate.html Module build failed: Error: Parse Error: <div style=”margin-top: 7px;display: inline-block;color: #383B55;font-family: “FedraSansStd-Book”; font-size: 15px; font-weight: 300; line-height: 20px;”>{{FinancialAttributeRow.financialFigureDescription}}</div><span ng-click=”closeTooltip();”style=”float:right; color : #007272;cursor:pointer;}”>x</span> <div style=”height:20px;”></div> <span ng-click=”addRow(FinancialAttributeRow)” ng-if=”command == ‘add'” style=”cursor : pointer; color: #007272; font-family: “FedraSansStd-Book”; font-size: 12px; font-weight: 300; line-height: 15px;”> + ADD TO HIGHLIGHTS </span> <span ng-click=”removeRow(FinancialAttributeRow)” ng-if=”command == ‘remove'” style=”cursor : pointer; […]

Webpack ES6 less import vairables and mixings are undefined

I’m using ES6, angularjs, less and webpack to create my application. In my scenario I would love to use ES6 import syntax in order to load less/css styles. So, if I create two less files: test1.less @bg: #ffffff; test2.less .test-class {background-color: @bg;} then I imported less files in the application module import angular from ‘angular’; import ‘./test1.less’; import ‘./test2.less’; export default angular.module(‘vt.shared’, []).name; I’m getting the error that @bg is not defined. Does that mean […]

Phantomjs "Module X not available!" when trying to render a AngularJS webpage

I spent a couple hours trying to find an issue that gave me any clues to solve my issues, but couldn’t find anything relevant. I am working on some SEO for a website (I’m no SEO specialist, am currently taking some courses and reading lots of articles on it), and one thing that I found out was the “Fetch and Render” as Google on Google Search Console. However the website, which has loads of AngularJS […]

ngModel controller, $$updateEventHandler is undefined

i’m currently porting the development environment from gulp to webpack with out angularjs and react hybrid app. the application is huge. 10mb of files at the moment. but i am currently encountering some issues. this line: this.$$updateEventHandler = this.$$updateEventHandler.bind(this); which is inside the main angular.js file. and the error is state like this: TypeError: Cannot read property ‘bind’ of undefined at ngModel.controller.NgModelController (angular.js:29413) which I interpreters as $$updateEventHandler is the one that is not defined, […]

AngularJs 1.7 Data inside es6 component not available on template file

I just create the project AngularJs 1.7 and webpack 4 with ES6 class on component and module setup. this is my app main module. // Core Styles import ‘./styles/main.scss’; // Core Angular import angular from ‘angular’; import { AppComponent } from “./app.component”; import CommonModule from ‘./modules/common/common.module’; import PackagesModule from ‘./modules/packages/packages.module’; import PackagesService from “./services/packages.service”; // These all export the module name // import ngAnimateModuleName from ‘angular-animate’; const dependencies = [ // ngAnimateModuleName, ]; […]

How to apply webpack for the angularjs?

I am new to angularjs and webpack. I had been working in angularjs with following folder structure: app js app.js controller.js service.js directive.js routes.js abc.js xyz.js templates home.html faq.html abc.html xyz.html bcd.html assets css bootstrap.css style.css abc.css js bootstrap.js tether.js popper.js wow.js jquery.js abc.js img a.jpg b.jpg font as.ttf index.html package.json serve.js I have searched through multiple tutorials but could not find an example that fits my requirement. Can somebody help me bundle using webpack […]

From jQuery to Webpack, NPM, Angular, SASS, Gulp, ES6, etc

I am not sure how to ask this to be honest, but I’ll give it a shot. So for many years I had worked with HTML, CSS, jQuery and PHP. Without a tertiary education I taught myself web development many years ago and was eventually able to earn a living and kind of get out of a bad situation and build a slightly better life. In essence, I got into web development out of a […]

Cannot point to the right bundles because of the base

I have a mean-stack website, and in index.html I have <base href=”/1/” />. I am trying to follow this to integrate the ESM version of the Monaco Editor by using plain webpack. I can successfully generate all the bundle files in dist folder. Now, in app.js I add app.use(express.static(path.join(__dirname, ‘dist’))); and in index.html I add <script src=”/app.bundle.js”></script>. As a result, loading the webpage loads well http://localhost:3000/app.bundle.js which points well to the right file. However, when […]

__webpack_require__ is not defined – angularjs

I keep getting the following error in my project: So here is info about my setup: I am using AngularJS 1.6.x, webpack 4.8.x and babel-core 6.26.x Here is my webpack.config.js: const path = require(‘path’); const CleanWebpackPlugin = require(‘clean-webpack-plugin’); module.exports = { context: path.resolve(__dirname, ‘./src’), resolve: { extensions: [‘.js’, ‘.html’, ‘scss’, ‘css’] }, entry: [ ‘babel-polyfill’, ‘./app’ ], plugins: [ //Clean dist new CleanWebpackPlugin([‘./src/dist’], { ‘verbose’: true }) ], output: { publicPath: ‘/src/dist/’, path: path.resolve(__dirname, ‘./src/dist’), […]

Next Page »