Achieving webpack bundling for node_modules in Angular 1: A step-by-step guide

Question

Achieving webpack bundling for node_modules in Angular 1: A step-by-step guide

I am facing a challenge as I transition my angular 1 + typescript project build setup from gulp to webpack. The issue lies in bundling the node_modules js files in the correct sequence.

Previously, I relied on bower for client-side dependencies, and the use of gulp's wiredep plugin made it easy to determine the dependency order based on the

bower dependencies section + main section

.

Now with webpack, the approach is different. Rather than relying on specific dependency sections, imported modules play a crucial role in determining the order.

To make this work, I need to transfer all dependencies from bower.json to package.json.

Currently, with typings in use, tsc manages the typings automatically without requiring manual imports for bower packages.

If I understand correctly, to make it compatible with webpack,

a) Should I eliminate typings and directly import the js files within my ts files?

Given that npm js modules typically work with modules, do typings files become unnecessary for webpack?

OR

b) Should I create a separate vendor.ts file where I manually organize the import sequence (for js and css)?

This method may be more tedious compared to using wiredep, but it can enable bundling the vendor files separately using chunks-plugin.

OR

c) Is there another common approach to address this issue?

The transition of angular 1 from gulp to webpack proves to be a challenging task.

angularjs typescript webpack typescript-typings

Answer 1

Answer №1

Importing a module from a TypeScript file that will be loaded by webpack results in the content being pulled from node_modules and bundled into the output file.

index.ts

import * as angular from "angular";

const myApp = angular.module("myApp", []);

myApp.controller("MyController", function PhoneListController($scope) {
  $scope.phones = [
    {
      name: "Nexus S",
      snippet: "Fast just got faster with Nexus S."
    }, {
      name: "Motorola XOOM™ with Wi-Fi",
      snippet: "The Next, Next Generation tablet."
    }, {
      name: "MOTOROLA XOOM™",
      snippet: "The Next, Next Generation tablet."
    }
  ];
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  ...
  <script src="bundle.js"></script>
</head>
<body ng-controller="MyController">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

webpack.config.js

module.exports = {
    entry: "./index.ts",
    output: {
        filename: "./bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ],
        preLoaders: [
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

Add angular, @types/angular, ts-loader, source-map-loader, typescript to your packages.json and run webpack.

All code will be combined into a single file named bundle.js for use in your index.html.

Answer 2

Importing a module from a TypeScript file that will be loaded by webpack results in the content being pulled from node_modules and bundled into the output file.

index.ts

import * as angular from "angular";

const myApp = angular.module("myApp", []);

myApp.controller("MyController", function PhoneListController($scope) {
  $scope.phones = [
    {
      name: "Nexus S",
      snippet: "Fast just got faster with Nexus S."
    }, {
      name: "Motorola XOOM™ with Wi-Fi",
      snippet: "The Next, Next Generation tablet."
    }, {
      name: "MOTOROLA XOOM™",
      snippet: "The Next, Next Generation tablet."
    }
  ];
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  ...
  <script src="bundle.js"></script>
</head>
<body ng-controller="MyController">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

webpack.config.js

module.exports = {
    entry: "./index.ts",
    output: {
        filename: "./bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ],
        preLoaders: [
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

Add angular, @types/angular, ts-loader, source-map-loader, typescript to your packages.json and run webpack.

All code will be combined into a single file named bundle.js for use in your index.html.

Achieving webpack bundling for node_modules in Angular 1: A step-by-step guide

Answer №1

index.ts

index.html

webpack.config.js

Similar questions

In React TS, the function Window.webkitRequestAnimationFrame is not supported

Encountering an error while attempting to set up WebDriverIO with Typescript and Cucumber installation

Exploring the Power of Angular's Redux Implementation with Lazy Loading Strategy

I'm curious, which redux architecture would you recommend for this specific scenario?

Formatting Time in Angular 2 Using Typescript

Testing @microsoft/applicationinsights-web within an Angular project on a local environment

Filtering the length in AngularJS!

Create a package themed with Material UI for export

Delete the option "x" from the kendo combobox

Find the closing of a $modal by observing the backdrop

The behavior of the dynamically generated object array differs from that of a fixed test object array

In order to successfully utilize Node.js, Async.js, and Listeners, one must ensure

Using a javascript component in vue.js with typescript - a step-by-step guide!

Having issues with the JavaScript controller when using ng-include in the code

Executing functionality based on changes in Angular bindings

Using ngModel to retrieve and display only the month, year, and date

Error Interceptor in AngularJS: Retrieving Current User Data from Backend

A guide to seamlessly merging Chart.js with Angular 7 using data sourced from a database

Exploring the Incorporation of String as a Component Identifier in React and TypeScript

Encountering an issue with Typescript Interfaces: property not found