Why am I missing angular-cli-build.js? Do I have to use it?

Question

I am trying to build a webpage using angular2, Firebase 3 SDK and angularfire2. I have recently gotten to all of these frameworks or SDKs. So I have some difficulties understanding all the functions in files like systemjs.config, typings.json, tsconfig.json,packages.json and etc. I think for now I got some understanding about these files, but I'm not confident enough to configure all of them for my project. I followed the angular2 Tour of Heroes tutorial successfully and now Im trying to transform that angular2 Tour of Heroes web page to my own web page. Currently I am trying to use Firebase 3.0 sdk instead of liteserver and in-memory-data.service, so I decided to look into angularfire2 to work with Firebase easier. I was watching several youtube videos (for example 1st and 2nd) about angularfire2 and also was reading the setup guide for angularfire2 on github and I noticed that they all are mentioning angular-cli-build.js file when setting up their projects. I have looked through my files and can't find it here. my file-structure looks like this

project
|-app
| |-html
| | |-.
| | |-all html files(templates)
| | |-.
| |-js
| | |-.
| | |-all js and map files(generated by typescript)
| | |-.
| |-css
| | |-.
| | |-all css files for templates
| | |-.
| |-.
| |-all ts files
| |-.
|-node_modules
|-typings
|-gitignore
|-index.html
|-package.json
|-README.json
|-styles.css
|-systemjs.config.js
|-tsconfig.js
|-typings.js

My question is should I be using angular-cli-build? and if yes, why am I missing this file even though I have followed the official tutorial? (first link)

Thank you! If more information is needed for an answer, I am happy to provide it.

P.S. I'm am also happy to take any advices considering angular2 and firebase 3.0 sdk.

Answer 1

I don't have the reputation to comment on your answer, but I thought that angular-cli-build.js is no longer in use now that Angular-CLI is using WebPack instead of Broccoli. (I'm still pretty new to this as well, just picking up Angular-CLI at the start of this week)

Answer 2

First of all I had to remember the meaning of CLI. CLI runs for command-line interface. In my words angular-cli is just bunch of commands that help you throughout development in testing, moving to production, generating routes and components and organising your application. Angular-CLI works on Webpack instead of Broccoli, both of which help you organise your code.

I found a good explanation for the motive of using the Webpack or other module bundlers. This is from Webpack webpage.

Today’s websites are evolving into web apps:

More and more JavaScript is being used. Modern browsers are offering a wider range of interfaces. Fewer full page reloads → even more code in a page. As a result there is a lot of code on the client side!

A big code base needs to be organized. Module systems offer the option to split your code base into modules.

After reading all of this I decided that I should try angular-CLI too. As I had already created a project before making this decision, I had to search a bit more to configure everything correctly. I found the solution on this github post.

So If you want to add angular-cli-build.js (meaning angular-cli) to already existing project. You should run these commands.

cd yourproject
npm install angular-cli
ng init --source-dir app

by saying --source-dir you tell angular-cli where to look for the source code files. I guess angular-cli works integrated with systemjs, because I didn't have to indicate where my js,html,css files are, since I had done it in systemjs before using angular-cli. So the only thing you have to indicate is where to find your TypeScript files.