Angular Dependencies

 @angular/common
Common angular directives including NgIf, NgClass, NgForOf and pipes
including AsyncPipe, UpperCasePipe, LowerCasePipe. Also includes the
Angular HttpClient in the @angular/common/http subfolder.
Docs: https://angular.io/api/common

 @angular/compiler
Angular template compiler, used by @angular/platform-browser-dynamic to
convert templates to JavaScript code that can run in the browser.

 @angular/core
As the name suggests, these are the core services, utilities and functionality
required by all Angular applications.
Docs: https://angular.io/api/core

 @angular/forms
Includes providers and directives for building both template-driven and
reactive forms.
Docs: https://angular.io/api/forms

 @angular/platform-browser
Includes core functionality for running Angular applications in different
supported browsers.
Docs: https://angular.io/api/platform-browser

 @angular/platform-browser-dynamic
Includes providers and methods to compile, bootstrap and run Angular apps
dynamically in the browser using JIT compilation.
Docs: https://angular.io/api/platform-browser-dynamic

 @angular/router
Implements routing features which enable navigation between different routes
(url paths) in an Angular application and mapping routes to different
components.
Docs: https://angular.io/guide/router
 core-js
A collection of polyfills that add support for features required by Angular that
aren’t natively supported yet in several browsers.
Docs: https://github.com/zloirock/core-js

 rxjs
Reactive Extensions Library for JavaScript, including an implementation of
Observables which are returned by many Angular APIs and used throughout
the Angular framework for handling asynchronous events.
Docs: https://angular.io/guide/rx-library

 zone.js
Implements Zones for JavaScript, used by Angular for running change
detection processes when native js operations raise events.
Docs: https://github.com/angular/zone.js/

Angular DevDependencies
 @types/node
Contains TypeScript type definitions for Node.js.
Docs: https://www.npmjs.com/package/@types/node

 angular2-template-loader
A webpack loader that replaces templateUrl and styleUrls declarations in
Angular components with corresponding require statements in order to inline
the html and styles. Depends on raw-loader for loading html and css files.
Docs: https://github.com/TheLarkInn/angular2-template-loader

 html-webpack-plugin
Injects webpack bundled JavaScript into an html template to be run in the
browser.
Docs: https://webpack.js.org/plugins/html-webpack-plugin/

 raw-loader
A webpack loader that enables importing text files such as html templates and
 css stylesheets. Used to load Angular html component templates and convert
them into JavaScript code.
Docs: https://www.npmjs.com/package/raw-loader

 ts-loader
A webpack loader that loads TypeScript files and compiles/transpiles them
into JavaScript using the command-line typescript compiler.
Docs: https://www.npmjs.com/package/ts-loader

 typescript
The command-line TypeScript compiler that converts TypeScript files into
JavaScript.
Docs: https://www.typescriptlang.org/docs/home.html

 webpack
A JavaScript module bundler that can be extended with loaders to handle
other file types (e.g. TypeScript, HTML, CSS) and plugins to perform other
tasks such as injecting generated JS bundles into an HTML template (html-
webpack-plugin).
Docs: https://webpack.js.org/concepts

 webpack-cli
The webpack command line interface, it is required to use webpack from the
command line.
Docs: https://webpack.js.org/api/cli/

 webpack-dev-server
A local development server for running and testing webpack applications, it
provides automatic live reloading when a file is updated.
Docs: https://webpack.js.org/configuration/dev-server/

Web Pack Configuration

Webpack is a powerful module bundler. A bundle is a JavaScript file that

incorporates assets that belong together and should be served to the client in a response to
a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any
other kind of file.

Webpack roams over your application source code, looking for import statements, building a
dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can
preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS
files.

1. Tsconfig.json
The tsconfig.json file should look like this:

{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES5"
}
}

 emitDecoratorMetadata
This options tells the TypeScript compiler to save type information from
Angular components as metadata in the output JavaScript. The type
information is used by Angular to support dependency injection.
For a more detailed explanation: http://nicholasjohnson.com/blog/how-
angular2-di-works-with-typescript/.

 experimentalDecorators
Enables the experimental Decorator feature of TypeScript. A Decorator is a
special kind of declaration that can be attached to a class, method, accessor,
property, or parameter, and are written as @Decorator. Angular uses
decorators to declare what a class is
(e.g. @Component, @NgModule, @Directive) and provide configuration
metadata about the class.
List of all decorators in Angular core
package: https://angular.io/api/core#decorators.

 target
Specifies the JavaScript/ECMAScript target version that the TypeScript will be
 compiled to. "ES5" is currently the latest version which is supported by all
modern browsers.

2. webpack.config.js
 Webpack is a JavaScript module bundler that can be extended with loaders to
handle other file types (e.g. TypeScript, HTML, CSS) and plugins to perform
other tasks such as injecting generated JS bundles into an HTML template
(html-webpack-plugin). More info available at the official webpack docs
website: https://webpack.js.org/concepts.
 Open webpack.config.js in VS Code and copy the following config:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader']
},
{
test: /\.(html|css)$/,
use: 'raw-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
]
}
  entry
Specifies the entry point/s for webpack to begin. Webpack will find all of the
direct and indirect dependencies of the entrypoint file to include in the output
JavaScript bundle/s for the Angular application. If not set the default value
is ./src/index.js, for this Angular app it is set to ./src/main.ts.
Docs: https://webpack.js.org/concepts/entry-points/.

 resolve.extensions
Sets the list of extensions that webpack will use when attempting to resolve
the location of module dependencies. Used to find the files for imported
Angular modules and components.
Docs: https://webpack.js.org/configuration/resolve/#resolveextensions.

 module.rules
Module rules are configured to tell webpack to transform specified files using
loaders before adding them to the output bundle. The test property sets
which file/s to transform and the use property sets which loader/s will do the
transforming.
The first above rule tells webpack to transform TypeScript (*.ts) files with
the ts-loader and angular2-template-loader. The second rule tells
webpack to transform HTML (*.html) & CSS (*.css) files with the raw-
loader.
Docs: https://webpack.js.org/concepts#loaders

 plugins
Plugins are used to extend the functionality of webpack to perform a wide
range of tasks. The HtmlWebpackPlugin above injects the JavaScript bundle
output from webpack into the specified html template (./src/index.html) to
be run in the browser. Docs: https://webpack.js.org/concepts#plugins

3. Main.ts
The main file is the entry point used by Angular to bootstrap/launch the application's
root module (AppModule) in the browser.

It calls bootstrapModule(AppModule); on platformBrowserDynamic() to

compile and bootstrap AppModule in the browser with JIT compilation. For more info
on Angular bootstrapping see https://angular.io/guide/bootstrapping.
import './polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-

dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

The updated package.json should now look like this:

{
"name": "angular-7-tutorial",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --mode development --open"
},
"dependencies": {
"@angular/common": "^7.2.13",
"@angular/compiler": "^7.2.13",
"@angular/core": "^7.2.13",
"@angular/forms": "^7.2.13",
"@angular/platform-browser": "^7.2.13",
"@angular/platform-browser-dynamic": "^7.2.13",
"@angular/router": "^7.2.13",
"core-js": "^3.0.1",
"rxjs": "^6.4.0",
"zone.js": "^0.9.0"
},
"devDependencies": {
"@types/node": "^11.13.5",
"angular2-template-loader": "^0.6.2",
"html-webpack-plugin": "^3.2.0",
"raw-loader": "^1.0.0",
 "ts-loader": "^5.3.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}