Package.json
The file which defines your project. Lists all its dependencies, for both dev environment and production environment, that should be installed with npm install.
it also specifies node scripts to run in the different life cycles of the project. such scripts are:
- install - goes over dependencies and installes them
- preinstall - node script to run prior to running the install script.
- postinstall - node script to run after installation of node modules finished.
- uninstall - remove all node modules
- preuninstall - run script before uninstall operation
- postuninstall - run script after uninstall.
You can also define your own scripts to use with in these scripts. for example:
"build" : "node rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall" : "build"
In the above example we wrote a new script called build where we first run node rimraf dist which clears the "dist" folder, then we run webpack --config config/webpack.prod.js --progress --profile --bail which runs the webpack compiler with a specified path to its config file (this process will refill the dist folder).
Then we use the new build script inside the postinstall script. this will have the effect of the project building right after the install process finishes.
devDependencies
When specifying dependencies in you package json you should do that in two properties the dependencies property and the devDependencies property.
The devDependency object is different than the dependencies object by that that it will only install using the install command, it will not install when passing the --production flag to the install command, or when installing a package using the npm install "$package" command thus providing an install environment for development.
In the devDependencies object you should define test-packages for testing, transpiles for your project, development servers, and other packages you need for development purposses only.
- app folder
- assets folder
- environment folder
- index.html
- main.ts
- polyfills.ts
- vendor.ts
app folder
The folder that holds the project. should contain the app.module at its root, which is bootstrapped by the main.ts file in the src folder root.
main.ts
webpack should get at-list one entry point path from where to start the execution of compiling, this path should be to the main.ts file which should bootstrap the application.
When webpack reads this file it sees the module being bootstrapped, then it start iterating over the modules dependencies and their dependencies chunking the files together in order and regarding the webpack.config rules.
An example of a minimal main.ts file should look something like this:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
You can see this file can be also used to do some definitions on the compiling process, in this case using enableProdMode from angulars core module.
FOOTNOTE! READ ABOUT enableProdMode
it then traverses the AppModule module to get further dependencies, chunking them together, resulting in a big main.js which will be included in the final index.html file located in the dist folder.
vendor.ts
Here you can chunk together common dependencies, or framework dependencies that are prevailent troughout the application, into one file that will be loaded prior to the application file. When passing the path to this file in the entry point in the webpack config, you should do that before specifying the path to the main.ts file, this way the compiler will recognize dependencies already loaded into the vendor.js chunk, and will ignore them when traversing trough the module dependencies of main.ts.
example:
// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// jquery
import 'jquery';
all of the above dependencies will loaded into one chunk in the vendor.js file and will be ignored from being loaded into the main.js chunk.
polyfills.ts
Polyfills in angular are few lines of code which make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers.
Polyfills.ts was provided by angular to help you do away with need to specifically setup everything.
