Angular2 CLI working

Question

After the Release of angular CLI, I have decided to work with angular CLI but from very start leads to some confusion which are not cleared yet so hope somewhere here help me out :-

1. In index.html i have found some amazing interpolation syntax of angular, whats the role of these in our app ?

syntax like -

{{#unless environment.production}}
{{/unless}}
{{#each scripts.polyfills}}
<script src="{{.}}"></script>{{/each}}

what does `/` this mean in {{/unless}}
and here `#` in the {{#each ...}} ??

2. when i run command ng g component demo, it creates component in perfact manner but after creating found one file named index.ts for every component, whats the role of index.ts here ?

3. Before CLI i have use gulp task's to perform compilation(*.ts to *.js) , In CLI how and where these action being performed ??

4. whats the role of angular-cli.json file ?

any help would be appericiated, thanks.

Answer 1

1. this commands adds important script-imports e.g. for SystemJS to the final "compiled" index.html (which you will see in the dist folder)
2. This file is created to that src/system-config.ts can access your generated TS-files easily without knowing the name of it. When you look into the index.ts generated, it is just reference to the actual class name.
3. the build is handelt by NPM, have a look into the package.json > scripts-section (https://docs.npmjs.com/misc/scripts)
4. angular-cli.json provides meta-data for angular-cli. Usually you don't have to change anything there

useful ressources:

• https://github.com/angular/angular-cli
• Slack-Channel: http://www.angularbuddies.com/
• Podcast about Angular-CLI: https://devchat.tv/adv-in-angular/089-aia-angular-cli-with-ciro-nunes

Be aware that the cli-Tool is still in beta, so have a good look at open issues on github

Answer 2

The Angular CLI is a rather big project on its own and as their repo states:

project is very much still a work in progress

Angular CLI itself is based on Ember CLI - a multifunctional tool for bootstraping projects, processing and building of resources. For more info head over the either ember cli docs or have a look on some sessions on AngularJS youtube channel

But to answer some of your questions:

1. In index.html i have found some amazing interpolation syntax of angular, whats the role of these in our app ?

What you see is not Angular interpolation but rather a handlebars conditional block that gets processed by ng cli broccoli plugin. In this case, it ensures, that the live reload script is only added if we are not running our app in production mode. The entry file of your app index.html will be processed by compiler, that will in turn invoke any plugins registered by ember/angular cli. One of them will invoke Handlebars compiler - this is useful if you want to add some logic to your template. You could for example display the stage in a footer like so:

<footer>
  {{#if environment.production}}
    <span>We are in production</span>
  {{/if}}
  {{#unless environment.production}}
    <span>We are in development</span>
  {{/unless}}
</footer>

2. whats the role of index.ts here?

This works similar to having an index.html in a folder - it is the default entry point for that folder. In our case, we use it for module resolution. If we want to use any of our components elsewhere, we need to export them. In the importing file, we have to explicitly require/import them. Now, if you have many components in a folder, and you want to import them all, your import statements will quickly get out of hand. So we can just mention all the exported components of our folder inside an index.ts so that the importing component can just do import {Comp1, Comp2, Comp3} from './app' instead of

import { Comp1 } from './app/comp1';
import { Comp2 } from './app/comp2';
import { Comp3 } from './app/comp3';

Note that import {*} from './app' and import {*} from './app/index' are equivalent.

3. ...compilation(*.ts to *.js) , In CLI how and where these action being performed ?

This is performed by broccoli builder employed by angular cli. It essentially chains together different plugins that process specific resources, e.g. typescript plugin will process all files named *.ts into *.js which in turn can be processed by another plugin for example to minify them. If you are using ng serve than the compilation will take place every time your resources change.

4. whats the role of angular-cli.json file ?

It stored the configuration of angular cli itself - whats is the name of your app, where are your sources, how to you name your lazy modules etc. In most cases, you should not have any need to modify it by hand.

Right now, the angular cli documentation is rather flaky on many topics, especially on the architecture of the tool itself. There is a large number of dependencies and as the angular2 still evolves, some integrations do not work as expected(e.g. new router...). If you do not really need the generators, you can explorer other options, as there are many starter packs available on github(angular webpack, angular gulp, etc)

Good luck & happy hacking.