Angular 7 Tutorial - Create Base Project Structure & Webpack Config

Angular 7 Tutorial - Create Base Project Structure & Webpack Config

In this post, we're going to setup the base project structure and webpack config for an Angular 7 application

Originally published at https://jasonwatmore.com

Steps:

  1. Create project folder
  2. Create package.json
  3. Install Angular 7 Dependencies
  4. Install Angular 7 Dev Dependencies
  5. Create tsconfig.json
  6. Create webpack.config.js
  7. Create src folder
  8. Create app folder
  9. Create Angular App Component template
  10. Create Angular App Component
  11. Create Angular App Module
  12. Create Angular 7 Polyfills File
  13. Create Angular 7 Main (Bootstrap/Launch) File
  14. Create Angular 7 Main Index Html File
  15. Add start script to package.json
  16. Start Angular 7 Application!

Create project folder

You can name it anything you like, I called mine angular-7-tutorial, then open the folder in Visual Studio Code. This might seem like an obvious step but I decided to include every detail of the process from the beginning.

Create package.json

Inside the project folder create a file named package.json. This file contains project configuration information including package dependencies which get installed when you run npm install. More info available at https://docs.npmjs.com/files/package.json.

Open package.json in VS Code, set the name property to the same as the project folder name and set the version property to 1.0.0. It should look something like this:

{

    "name": "angular-7-tutorial",

    "version": "1.0.0"

}

Install Angular 7 Dependencies

Run the following command from the project folder to install and save the npm packages required to run Angular 7 applications:

npm install -save @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] [email protected] [email protected]

The command will download the packages into a node_modules folder and add them to the dependencies property in the package.json file. So next time to install all of the packages you just need to run npm install and it will use the list in package.json.

The package.json should look like this after installing Angular 7 dependencies with the above command:

{

    "name": "angular-7-tutorial",

    "version": "1.0.0",

    "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"

    }

}

Below are details of each of the dependencies and a link to the documentation for each:

  • @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/

Install Angular 7 Development Dependencies

Run the following command from the project folder to install and save the npm packages required to develop, compile and bundle Angular 7 applications:

npm install --save-dev @types/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

The command will download the packages into a node_modules folder and add them to the devDependencies property in the package.json file. So next time to install all of the packages you just need to run npm install and it will use the list in package.json.

The package.json should look like this after installing Angular 7 development dependencies with the above command:

{

    "name": "angular-7-tutorial",

    "version": "1.0.0",

    "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"

    }

}

Below are details of each of the dev dependencies and a link to the documentation for each:

  • @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/

Create tsconfig.json

Inside the project folder create a file named tsconfig.json. This file specifies the compiler options used by the TypeScript compiler to convert TypeScript files into JavaScript that will be understood by browsers.

Open tsconfig.json in VS Code, set target to "es5", emitDecoratorMetadata to true and experimentalDecorators to true. There are many more compiler options available, for a full list see https://www.typescriptlang.org/docs/handbook/compiler-options.html.

The tsconfig.json file should look like this:

{

    "compilerOptions": {

        "emitDecoratorMetadata": true,

        "experimentalDecorators": true,

        "target": "ES5"

    }

}

Below are details of each of the compiler options used:

  • 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.

More info about browser support for JavaScript versions: https://www.w3schools.com/js/js_versions.asp.

Create webpack.config.js

Inside the project folder create a file named webpack.config.js. This file specifies the configuration options used by webpack to compile and bundle an Angular app.

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' })

    ]

}

 Below are details of each of the webpack config options used:

  • 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

Create src folder

Create a src folder in the project folder, this folder will contain all of the source code for the Angular 7 application.

Create app folder

Create an app folder in the src folder, this folder will contain all of the code for the Angular 7 AppModule that you will create shortly.

Angular applications are organised into modules, or in other words, Angular modules are the building blocks of Angular applications. An Angular module is used to group together related Angular components, services, directives etc. The tutorial application will contain a single Angular module (AppModule), as applications grow they can be split into multiple modules for maintainability. For more info on Angular Modules see https://angular.io/guide/architecture-modules

Create Angular App Component template

Create a file named app.component.html in the /src/app folder and copy the below HTML code into it.

The App Component template contains the HTML for the App Component that you will create in the next step. For now it will just contain a simple hello message that will display when we test our Angular 7 app. For more info on Angular templates see https://angular.io/guide/architecture-components#templates-and-views

It should look like this:

<h1>Hello Angular 7!</h1>

Create Angular App Component

Create a file named app.component.ts in the /src/app folder and copy the below TypeScript code into it.

An Angular component is a class that contains the logic to control a piece of the UI. A class becomes an Angular component when it is decorated with the @Component decorator. For more info on Angular components see https://angular.io/guide/architecture-components

The App Component contains the logic required to interact with and support the App Component template, at the moment the App Component template doesn't require any logic so the class is empty.

The @Component decorator contains two parameters, the selector: 'app' parameter tells Angular to inject an instance of this component wherever it finds the <app></app> HTML tag. The templateUrl: 'app.component.html' parameter tells Angular where to find the HTML template for this component.

It should look like this:

import { Component } from '@angular/core'; 

@Component({ selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent {}

Create Angular App Module

Create a file named app.module.ts in the /src/app folder and copy the below TypeScript code into it.

An Angular module is a class used to group together related Angular components, services, directives etc. A class becomes an Angular module when it is decorated with the @NgModule decorator. For more info on Angular Modules see https://angular.io/guide/architecture-modules.

It should look like this:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

 

import { AppComponent } from './app.component';

 

@NgModule({

    imports: [BrowserModule],

    declarations: [AppComponent],

    bootstrap: [AppComponent]

})

export class AppModule { }

 Below are details of each of the @NgModule parameters used:

  • The imports: [BrowserModule] parameter tells Angular to import the BrowserModule into this module, which makes the components, directives and pipes in BrowserModule available to all components in the AppModule. The BrowserModule includes core functionality for running Angular applications in different supported browsers.
  • The declarations: [AppComponent] parameter declares that the AppComponent belongs to this module and makes it available to all other components and templates within this module.
  • The bootstrap: [AppComponent] parameter tells Angular to bootstrap the AppComponent when the AppModule is bootstrapped. For more info on Angular bootstrapping see https://angular.io/guide/bootstrapping.

Create Angular 7 Polyfills File

Create a file named polyfills.ts in the /src folder and copy the below TypeScript code into it.

Some features used by Angular 7 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 7 application works across all major browsers.

import 'core-js/features/reflect'; 
import 'zone.js/dist/zone';

Create Angular 7 Main (Bootstrap/Launch) File

Create a file named main.ts in the /src folder and copy the below TypeScript code into it.

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);

Create Angular 7 Main Index Html File

Create a file named index.html in the /src folder and copy the below HTML code into it.

The main index.html file is the initial page loaded by the browser that kicks everything off. Webpack bundles all of the javascript files together and injects them into the body of the index.html page so the scripts get loaded and executed by the browser.

Angular injects the AppComponent into the <app>Loading...</app> tag because it matches the selector defined in the component metadata. The Loading... message is the default text displayed until Angular has finished booting up.

<!DOCTYPE html>

<html>

<head>

    <base href="/" />

    <title>Angular 7 Tutorial</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

 

    <!-- bootstrap css -->

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

    <app>Loading...</app>

</body>

</html>

Add start script to package.json

Open package.json in VS Code and the following start script below the version property:

"scripts": {

  "start": "webpack-dev-server --mode development --open"

}

The start script is run with the command npm start. This script will start the webpack-dev-server in development mode and automatically open the browser with the --open argument.

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"

    }

}

Start Angular 7 Application!

Run the command npm start from the project root folder (where the package.json is located) to launch the Angular 7 application.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example


angular webpack

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Add global CSS styles to Angular with Webpack

The below steps show how to add a global LESS / CSS stylesheet to your Angular application using Webpack.

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.