Angular 4 School

How to create an Angular 4 app from Scratch

learn about setting up configuration , project structure , files etc to bootstrap an angular 4 app

getting started with angular
Before we start!
This tutorial assumes that you're already aware of what angular 4 is and have already done some beginner stuff with angular 4. If not then please consider going through our Angular 4 Tutorial Series first where we've presented a complete beginner friendly series of angular 4 tutorials.
  1. Angular 4 Tutorial Series for Beginners
In this 2-part tutorial , we'll see how to bootstrap a minimal angular 4 app , yes you heard that right. We'll try to use only the basic files and build the app without using @angular/cli though we'll still use webpack for building our app. Please note that the idea of this tutorial is to gain a deeper understanding of the angular 4 framework , we still encourage the use of automated tools like @angular/cli for building real world apps.
Here's what we're going to do

part-1 [ this part ]

  1. Initialize a package.json [ npm package ] file for our angular 4 app
  2. Installing all the dependencies for our angular 4 app
  3. Add tsconfig.json [ typescript compiler configuration ]
  4. Add webpack.config.js file [ configuration for webpack ]
  5. part -2

  6. Create a src directory to hold our angular app specific files and folders
  7. Populate the src directory with app source code files
  8. Build the app using webpack
  9. Serve the app using NGINX
After performing the above steps , we should have a minimal working angular 4 app and more importantly a deeper understanding of how things work under the hood.
Step-1 Declare a Package
The very first thing we need to do is to move to the location where we're going to create our experimental angular project for this tutorial. Just choose any location on your machine and open a terminal with path pointing to that location. Now when you're inside that directory , just execute the following command ::

npm init 
Upon executing the above command , you'll be presented with a few questions including the app for your name , we've chosen to call our app ngZygote , you can give any name you like and choose default answer for other questions by simply hitting enter. Once done , there'll be a file package.json created for you. Now open that file and add 2 sections to it viz dependencies and devDependencies . As the name suggests , you're listing your dependencies here to be installed later on.

  "name": "ngzygote",
  "version": "1.0.0",

  "dependencies": {
    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "angular2-template-loader": "^0.6.2",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.18",
        "core-js": "^2.5.1"
  "devDependencies": {
    "@types/angular": "^1.6.32",
    "@types/node": "^8.0.31",
    "awesome-typescript-loader": "^3.2.3",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "raw-loader": "^0.5.1",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"



Step-2 Install the dependencies
We already listed our dependencies in the package.json file above , now to install all these dependencies , we simply need to run the following command ::

npm install 

This command installs all the dependencies listed in our package.json file.
Step-3 Add tsconfig.json file
Create a new file tsconfig.json in the same directory as above to declare configuration to be used by typescript compiler and add the following content to the file.

  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
  "compileOnSave": true,
  "exclude": [

Step-4 Add webpack config file
Webpack is a module bundler , it basically looks for import statements in our app and bundles all the dependencies into distributable chunks. And by using webpack.config.js , we specify different configurations required by webpack like entry point , destination , plugins etc. Just create a file webpack.config.js and add the following content to it.

var webpack = require('webpack'); 
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        polyfills: './src/polyfills.ts',
        vendor: './src/vendor.ts',
        app: './src/main.ts'
    output: {
        path: path.resolve( __dirname + '/dist'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    resolve: {
    extensions: ['.ts', '.js']
  module: {
      rules: [
        test: /\.ts$/,
        loaders: [
            loader: 'awesome-typescript-loader',
            options: { configFileName: path.resolve(__dirname + '/tsconfig.json') }
          } , 'angular2-template-loader'
        test: /\.html$/,
        loader: 'html-loader'

        test: /\.css$/,
        loader: 'raw-loader'
  plugins: [
      new HtmlWebpackPlugin({
    template: 'src/index.html'


Note that webpack.config.js is where we define a roadmap on how our app shall be built. Note the following points about the above file ::
  1. We define different entry points for polyfills , vendor and main ts files , we'll see what they are when we write our app code.
  2. We've used different plugins for different file types.
  3. With the help of plugins webpack can achieve different things like packing css , html files etc
  4. Note that webpack is using awesome-typescript-loader which itself uses tsc under the hood to compile typescript to es5 i.e. the target we mentioned in the tsconfig.json file
What we've done so far
So in this tutorial , we did the following ::
  1. Initialized our package.json file
  2. Installed all dependencies using npm install
  3. Declared typescript configuration in a file called tsconfig.json
  4. Declared webpack configuration in a file called webpack.config.js
In a way , we've done all the configuration related part in this section , so in the next part of our tutorial , we'll setup src directory and add code for our app. Not only this we'll also see how to serve the app using Nginx. Hope you're enjoying this angular 4 tutorial.

More from RISHABH.IO

developed & nourished with by