Setting up our Angular 4 project from scratch

- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/seed-ng4-and-unit-tests

1. Inside your usual working folder of choice, create a folder for the new angular-4 project.
   I am using Windows and my project folder is at C:\working\TS-NG4\momentz4ever-web-ng4.

2. Open terminal/command prompt with admin privileges.

3. Move to the project folder on the command prompt

cd C:\working\TS-NG4\momentz4ever-web-ng4

4. Initialize the folder with package.json using the below command:

npm init

5. Answer the prompted questions and confirm the entered information in the end. This would initialize the folder with package.json.

6. Install the minimum required packages for starting with an angular-2/4 application.

npm install --save @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/forms @angular/router @angular/http rxjs zone.js core-js

7. Install typescript, tslint and few required type definitions

npm install --save-dev typescript tslint @types/node

8. Install Webpack, webpack-dev-server and some of the webpack loaders and plugins that we are anticipating to use with webpack:

npm install --save-dev webpack webpack-dev-server html-webpack-plugin extract-text-webpack-plugin raw-loader css-loader style-loader sass-loader node-sass url-loader file-loader awesome-typescript-loader angular2-template-loader

9. Create a tsconfig file for our project using the below command:

tsc --init

10. The above command would create tsconfog.json file under the project’s root folder.
Open the project folder in your web editor and update tsconfig.json as below:

11. Add tslint.json under the project root folder ( You can copy the file contents from here. )

12. Creating the root app component :
- under the project’s root folder, create a folder src.
- create a new folder named components inside src.
- create a sub-folder app inside components.
- inside this src\components\app folder, create file app.component.ts :

.\src\components\app\app.component.ts

13. Create app.component.html inside the src\components\app folder:

<h1>Welcome to Momentz4Ever</h1>
<h3>Hello from app component</h3>

14. Create app.module.js inside the .\src\components\app folder:

.\src\components\app\app.module.ts

15. Create polyfills.js under the src folder:

./src/polyfills.ts

16. Create main.ts under the src folder:

./src/main.ts

17. Create index.html under the src folder:

18. Initializing Webpack:
Add a folder named ‘webpack’ in the project’s root folder and under this folder, add a file — webpack.config.js.

./webpack/webpack.config.js

19. In package.json , add a script named build to start webpack-dev-server, as below:

"scripts": {
  "test": "test",
  "build": "webpack-dev-server --config webpack/webpack.config.js"
}

20. Now run the above added build from command prompt to start webpack-dev-server

npm run build

21. The above command should build the application package and start the application on localhost, port 9000 as we specified in the devServer settings of webpack config.
Open the url http://localhost:9000 and below html should be seen.

Yay!!! 👏 We got our Angular 4 app set up and running.

As our next task, we will setup unit-tests for our project using karma-jasmine configuration.