Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 906
Sufyan Ahmad Avatar asked Mar 06 '17 11:03

Sufyan Ahmad


People also ask

What is the starting point of Angular project?

Once Angular found the file it starts looking for the main node. The value of the main node is a file path that Angular is looking for - the main. ts under src folder. This is the main entry point.

What is the main ts in Angular?

TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety and tooling. Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration.

What is the first file executed in Angular?

html: This is the entry file which holds the high level container for the angular application. main. ts: As defined in angular. json file, this is the main ts file that will first run.


1 Answers

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);
like image 187
Smit Avatar answered Sep 28 '22 23:09

Smit