angular - Varför är en lokal variabel inte tillgänglig i en Angular2-komponent från Chromes debugger?


Jag slösade precis några timmar på detta, men jag vill förstå varför.

Jag importerade Lodash till mitt Angular2-projekt och det var inte tillgängligt i min komponent när jag inspekterade från en brytpunkt i Chrome-debuggern. Men sedan använde jag det i ett console.log('lodash version:', _.VERSION); uttalande, och magiskt nog var det där (hela tiden?). Och nu är det synligt i Chrome-debuggern.

Vad händer bakom kulisserna här?

import { Component } from '@angular/core';
import { ionicBootstrap, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from './pages/home/home';

import * as _ from "lodash";
console.log('0. lodash version:', _.VERSION);
/* 
 * _ is available here in the Chrome debugger 
 */

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    /*
     * _ is NOT available here in Chrome debugger unless I uncomment line below
     * VM1073:1 Uncaught ReferenceError: _ is not defined(…)
     */
    // console.log('1. lodash version:', _.VERSION);
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);