Lesson 4 – The main component and component loading

The first file that Angular 2 loads is main.ts which is defined in the script contained in the HTML file (in the System.import command – it is the only parameter). This can really be called anything and can live anywhere but, for my purposes (and Bucky’s) I’ve put it in the typescript folder under the app folder (which, also can be called anything but “app” seems to be the convention so I’ll go with it).

The main.ts file contains a single command (along with a couple of import references, notably to the component that we created in Lesson 3 and to the Angular 2 core library, itself):

bootstrap (AppComponent)

See the code

where AppComponent is the name of the component that we exported in the component file. Again, this can be called anything, so long as it’s consistent but, as this is the main application component AppComponent seems like an apt name.

A quick note, here. Those of you who are familiar with my coding practices in the past (and I doubt any of you are) I’m a bigger fan of the underscore ideology over mixed-case when it comes to naming things in code. I’m a big fan of readability in code (and a lot of that will come across as I develop this application) and I don’t think that mixed-case is very readable. YouWouldThinkIWasCrazyIfIStartedWritingLikeThis in this journal but if_I_wrote_like_this it would be much easier to read. Well, 99% of the programming community disagrees with me so, with a few exceptions, I’ll be using the mixed-case convention, here.

Another place where I disagree with the programming community at large has to do with the placement of parentheses. I prefer to have a space before them whereas most programmers(and especially the ones who blog a lot)prefer to not have spaces. Well, this is just outright poor writing. Even worse, some programmers put spaces after the opening parenthesis and before the closing one( like this )which is crazy!

Anyway, back to the code.

The two import directives included in the video import two different things: the first one imports the bootstrap module (not to be confused with “bootstrap” the css framework which I’ll work my way through in a later series) which loads up the main application component.

The second is a reference to the AppComponent that we created in Lesson 3. Bucky makes a good point, here. Anything from the Angular 2 library (I’m tired of writing “Angular 2” every time I need to so I’m going to call it A2 from now on) does not have any pathing – it defaults to the node_modules folder. Our own references need to be pathed (using “./” if they’re in the same folder as the component that’s calling it). Forgetting this tidbit is not recommended.

In the HTML file (index.html) the script tags are added. Bucky’s version has more than the version provided by Ibrahim – I don’t know which ones we’ll be using but in keeping with “keep it simple” I’m using Ibrahim’s references. As some point I’ll chop a few out and see where it falls down so that I can get an even more concise listing.


This is a script command (System.config) that includes a module loader (SystemJS) which automatically loads our JavaScript files without us having to individually list each one in its own <script></script> tags. This is the main stumbling block I came across when I was trying to create an MVC version. My post on Stack Overflow details this problem – I still haven’t figured it out the solution so if anyone has a suggestion then please let me know. For the moment I’ve decided to scratch the MVC version in favour of the flat, file based model that we all know and love from the early (pre-MVC) days of web development, but I would like to get this solved at some point and will get back to you on that one.

Update: a solution has been posted but I still can’t seem to get it working (I think the solution provider is on the right track so I’ll give it another shot and will back back to you).

Anyway, the packages attributes tells SystemJS (the package loader) what to do when a new package is requested. This includes a defaultExtension which specifies an extension to use for requested files. Because of this, whenever a file is referred to in an import component (by the way, I use the term “component” and “directive” interchangeably when referring to these “components” but “component” is the correct term) the file extension is not included because SystemJS fills it in from this command.

There’s no explanation for the “format” property in Bucky’s presentation. Maybe he’ll get to that later. If not then it’s probably not to hard to find a description.

Finally, there’s a System.import command which is simply the starting point, telling A2 which file to load first (in our case app/javascript/main.js).

See the code



Leave a Reply

Your email address will not be published. Required fields are marked *