Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js
  • 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.

 

 

  • pollyfils.js - compiled junk. see src folder
  • vendor.js - compiled junk. see src folder
  • main.js - compiled junk. see src folder

The src folder

Tomas Katz
Module by Tomas Katz, updated more than 1 year ago

Description

overview