Search Posts

Category: webpack

.Net Core Angular 4 – Duplicate app component on bundle rebuilding

My project is using the Visual Studio .Net-Core AngularJS Template (i.e with the app.module.shared.ts,app.module.browser.ts,app.module.server.ts files) I was having a strange issue whereby whenever I made changes a new <app> element was being added to my DOM, and the old <app> element wasn’t being removed. If I refreshed the page it all went back to normal. Source: AngularJS

Webpack + Typescript + Angularjs – System.Register (Webpack Warning)

I have the following setup: Webpack v3.6.0 Typescript v2.5.2 AngularJS v1.4.8 I’m trying to import a constant file into my service: // const.ts const TEST_CONSTANT = { names: [ ‘const1’ ] }; default export TEST_CONSTANT; // service.ts import TEST_CONSTANT from ‘const’; // tsconfig.json { “compilerOptions”: { “module”: “commonjs”, “moduleResolution”: “node”, “target”: “es5”, “noImplicitAny”: false, “sourceMap”: true }, “include”: [ “src/**/*” ], “exclude”: [ “**/*.spec.ts”, “bower_components”, “node_modules”, “dist”, “test” ] } I’m using awesome-typescript-loader: […] { […]

webpack angular project in production

Im an using webpack angular project and have successfully able to generate the bundle and inject it into the index.html file. But in browser i can see the addition Webpack FOLDER in the source tab that has old code unless i clear the browser cache i cannot find the latest code. However there are generated bundles and styles but my pages dont take these files, they are taking code from the webpack folder. Im attaching […]

Webpack-dev-server hot reloading JS/HTML changes AngularJS

My project directory Structure is : mcdist <build output folder> – assets index.html – css main.css – js app.js lib.js – ng-app <all HTML Files> – images src – images 1.png 2.png – javascripts – ng-app – components 1.js – directives 2.js – filters 3.js – stylesheets 1.scss 2.scss index.html app.js node_modules webpack.config.js package.json My webpack.config looks like this : var path = require(‘path’); var webpack = require(‘webpack’); var config = { entry: { app: […]

Visual Studio 2017 Webpack Hot Module Replacement DotNetCore IIS AppPool Permissions [HMR]

I’ve been using VS 2017 Preview’s Angular template to build out a SPA and ran in to a bit of a problem with HMR. Firstly, [HMR] works like a champ in any web configuration ( project and IIS Express ) with the exception of IIS. When running in IIS, VS tooling creates a Web.config with a wrapper class for attaching to the web process ( including just in case it’s relevant ): <?xml version=”1.0″ encoding=”utf-8″?> […]

How to build unified $templateCache when migrating AngularJS 1.x project from gulp & bower to webpack 3

Have a large AngularJS 1.6 project (~120 JS files), which is currently built through gulp/bower. Looking to migrate over to using yarn & webpack, and we would prefer not to have to modify our project files just to implement webpack. Each of our AngularJS component JS files are wrapped in a IIFE, so they are already out of the global scope. One of our gulp steps uses the gulp-angular-templatecache module, which collects all of our […]

Webpack3 multiple css files from a single entrypoint

I am working on a legacy angularjs application that I have recently implemented Webpack as a build step. I use the css-loader in conjunction with the ExtractTextPlugin and it works fine. But the css file got too big! My problem is that the app is a single page application, so there is only a single entry file on my webpack config. And I wish I could generate a single css file for each file I […]

Import angular-actioncable in angular 1.x with ES6

I have a angular 1.x project with ES6. And I would like to import a js library called angular-actioncable. However, I failed to import it. Firstly, I use webpack, so I can import the npm module directly. In my app.js file, I import the ngActionCable library: … import ngMdDataTable from ‘angular-material-data-table’ import ngUiRouter from ‘@uirouter/angularjs’ import ngActionCable from ‘angular-actioncable’ … And then, I added the module into my app module: export default angular .module(‘app’, [ […]

can’t import ui-select in angularjs and ES6

I’m trying to import ui-select in my js file using yarn and webpack than import it in my module as follow. import ngSanitize from ‘angular-sanitize’; import uiselect from ‘ui-select’; import ‘ui-select/dist/select.css’; export default angular.module(‘app.module’, [ /** … **/ ngSanitize, ‘ui.select’ /** … **/ ]) but When I check my generated css file I can see that the CSS was correctly imported however not the js.(there is no issue on my webpack config as I can […]

Next Page »