Angular is a library and framework, and as with all frameworks, it aims to make building applications easier. Angular utilizes dependency injection, integrated best practices, and end-to-end tooling, all of which can help resolve development challenges.

Angular projects often use Webpack. At the time of writing, the latest version of Angular in use is Angular 9. An updated version is brought out every year.

Now, let's take a look at how Webpack works when bundling Angular projects or even bolting Angular on to existing projects.

Angular looks for window.jQuery to determine whether jQuery is present. See the following code block for the source code:

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

To add a lodash map, append the existing code with the following:

new webpack.ProvidePlugin({
  _map: ['lodash', 'map']
});

Webpack and Angular work by supplying Webpack with entry files and letting it incorporate the dependencies that lead from those entry points. The entry point file in the following example is the root file of the application—src/main.ts. Let's take a look:

1. We need to use the webpack.config.js file here. Note that this is a single entry-point process:

entry: {
 'app': './src/main.ts'
},

Webpack will now parse the file, inspect it, and traverse its imported dependencies recursively.

2. Make the following changes in src/main.ts:

import { Component } from '@angular/core';
@Component({
 selector: 'sample-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent { }

Webpack will recognize that the @angular/core file is being imported, so this will be added to the dependency list for bundle inclusion. Webpack will open the @angualar/core file and trace its series of import statements until a dependency graph is built from it. This will be built from main.ts (a TypeScript file).

3. These files will then be provided as output to the app.js bundle file that is identified in the configuration:

output: {
 filename: 'app.js'
}

The JavaScript file that contains the source code and dependencies is a single file and the output bundle is the app.js file. This will be loaded later with a JavaScript tag (<script>) in the index.html file.

It is advised that you don't have one giant bundle for everything, for obvious reasons. Therefore, it is recommended that the volatile application code is separated from the more stable vendor code modules.

4. This separation of the application and vendor code is done by changing the configuration so that two entry points are now used—main.ts and vendor.ts—as shown:

entry: {
 app: 'src/app.ts',
 vendor: 'src/vendor.ts'
},
output: {
 filename: '[name].js'
}

Two bundle files are emitted from Webpack by constructing two separate dependency graphs. The first is called app.js, while the second is called vendor.js. Each contains the application code and vendor dependencies, respectively.

In the preceding example, file name: [name] indicates a placeholder that is replaced with entry names by the Webpack plugin, app, and vendor. Plugins are covered in more detail in the next chapter, so if you're stuck, maybe mark this page and come back to it.

5. Now, instruct Webpack of which parts belong to the vendor bundle by adding a vendor.ts file that only imports third-party modules, as in the following code, which shows an example of the contents of vendor.ts:

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';

Note the mention of rxjs. This is a library for reactive programming that aims to make it easier for developers to compose asynchronous code or callbacks.

Other vendors can be imported this way, such as jQuery, Lodash, and Bootstrap. File extensions that can also be imported include JavaScript files (.js), TypeScript files (.ts), Cascading Style Sheets files (.css), and Syntactically Awesome Style Sheets files (.sass).

Angular can be a very complicated framework and is very relevant to web-based applications. However, your particular need may suit single-page applications better, in which case Vue.js would be the preferred option to use for most. Let's take a look at it now.