Understanding Application Files, Angular 2 - Part Three

Article

Hi friends!

In our last article, we have seen that the npm was installed successfully without any errors; which is great. Please do read my previous articles before you go through this one.

We have all the necessary files gathered in our Angular application. Let’s go ahead and understand what they are going to do.

Package.json

Generally, our Angular application requires libraries or modules specified in package.json file. So, whenever we run npm install command prompt, all the dependencies are installed to the folder named node_modules, as shown below.

Now, for our Angular application, we are going to use TypeScript which is nothing but a super script of JS. So, coming back to the script in package.json as shown below.

{
"name": "angular",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}

When mouse over on script, we will see a text “Run by npm start command”. So, when we run this command, it is going to start TypeScript compiler and it is also going to run lite-server which is going to host our application.

And we also going to start TypeScript compiler in watch mode. That means, any change in code is automatically compiled and browser is refreshed.

Then, we have postinstall over in scripts. It means, once we start installing dependencies, install type installs json files.

typings.json

Now, open the typings.json file.

{
"dependencies": {
"zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"
},
"devDependencies": {},
"ambientDependencies": {
"angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",
"node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",
"selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",
"webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"
}
}

It is clearly shown that to install all the dependencies once, we install package.json.

The reason for this is that our application might use JavaScript libraries that the TypeScript compiler can’t recognize. So, we make TypeScript aware of JavaScript libraries when we build application.

Tsconfig.json

This contains the configuration to guide the TypeScript Compiler for generating JavaScript files.

{
"dependencies": {
"zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"
},
"devDependencies": {},
"ambientDependencies": {
"angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",
"node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",
"selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",
"webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"
}
}

You might be wondering why TypeScript generates JS files. This is because our browser can understand only JavaScript. So whenever we write TS code, it has to be converted to the JS code.

Systemjs.config

This deals with loading with modules and default file extensions, as shown in below figure.

(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
defaultExtension: 'js'
},
};
var packageNames = ['@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = {
main: 'index.js',
defaultExtension: 'js'
};
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);

Style.css

This is nothing but style for our HTML.

Index.html

As you can see below, this file is broken into three parts.

First part is with JavaScript libraries.

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

Second part is "Configure System.js".

<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
</head>

Third part is "Display the application"

<body>
<h4>header4 from index.html</h4>
<my-app>Loading...</my-app>
</body>

app Folder

In main.ts, this is where our application is going to start from. We have main.ts and main.js files. Just ignore the JS files because those are the files generated by TypeScript compiler.

In app.Component.ts, we can see selector:”my-app”, It means wherever we find my-app in HTML, it replaces with templates below it.

In our next article, we shall understand how "Hello world" in Angular 2 application actually happens.

Thanks for reading my article, Stay tuned.