learn about setting up configuration , project structure , files etc to bootstrap an angular 4 app
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.
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 ]
Initialize a package.json [ npm package ] file for our angular 4 app
Installing all the dependencies for our angular 4 app
Add webpack.config.js file [ configuration for webpack ]
Create a src directory to hold our angular app specific files and folders
Populate the src directory with app source code files
Build the app using webpack
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 ::
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.
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.
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 ::
We define different entry points for polyfills , vendor and main ts files , we'll see what they are
when we write our app code.
We've used different plugins for different file types.
With the help of plugins webpack can achieve different things
like packing css , html files etc
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 ::
Initialized our package.json file
Installed all dependencies using npm install
Declared typescript configuration in a file called tsconfig.json
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.