What is the starting point in Angular 2 before calling AppComponent.ts?

Question

I want to to do something at the starting point of angular 2 app but I am unable to get that point. Kindly help me if any one know about this.

Thanks in advance.

Answer 1

Index.html is the start and it continuous main.ts and then its goes with <my-app> and goes on and on

After Index.html, systemjs.config.js is loaded. Which tells which file to run. And in systemjs.config.js, it tells to load main.ts to get started.

packages tells the System loader how to load when no filename and/or no extension

After some research, look at the below systemjs.config.js file. The comments tell what it does and when.

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      //For android Internet
      'moment': 'npm:moment',
      'jquery':'npm:jquery/dist/jquery.js',
      'fullcalendar':'npm:fullcalendar/dist/fullcalendar.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      moment: { main: './moment.js', defaultExtension: 'js' } 
    }
  });
})(this);

Answer 2

APP_INITIALIZER is your friend.

It allows you to execute a piece of code, wait for it to complete, and then continue loading your angular application.

Check how to implement: Angular: How to correctly implement APP_INITIALIZER