title: Cannot read property '_getPortal' of undefined in ionic 2 Unit testing
body: <p>I am a beginner to ionic 2 unit testing. I followed angular 2 documentation (<a href="https://angular.io/docs/ts/latest/guide/testing.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/testing.html</a>) to test my ionic 2 application with karma and jasmine. </p>
  
  <p>But now I am stuck in an error called </p>
  
  <blockquote>
    <p>'Cannot read property '_getPortal' of undefined'</p>
  </blockquote>
  
  <p>here is my <code>LocationSearchModal.ts</code> file</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, ViewController } from 'ionic-angular';
  import { Location } from '../../services/domain/Location';
  import { LocationService } from '../../services/LocationService';
  import { LoadingController } from 'ionic-angular';
  
  @Component({
    selector: 'location-search-modal',
    templateUrl: 'location-search-modal.html'
  })
  export class LocationSearchModal {
    locationList: Array&lt;Location&gt; = new Array&lt;Location&gt;();
    selectedLocation: number;
    temp: any = "test";
  
    constructor(public navCtrl: NavController, public locationService: LocationService, public viewController: ViewController, public loadingController: LoadingController) {
      this.filterLocationsForString();
    }
  
    filterLocations(event: any): void {
      const searchString: string = event.target.value;
      this.filterLocationsForString(searchString);
      console.log(this.filterLocationsForString(searchString));
    }
  
    filterLocationsForString(searchString?: string) {
      let loader = this.loadingController.create({
        content: "loading"
      });
      loader.present();
      this.locationService.getLocationsForLikeSearchString(searchString)
        .subscribe((result) =&gt; {
          loader.dismissAll();
          this.locationList = result
        });
      console.log(this.locationList);
    }
  
    closeLocationSearch() {
      this.locationService.getLocationById(this.selectedLocation)
        .subscribe((location) =&gt; this.viewController.dismiss(location[0]));
    }
  
  }
  </code></pre>
  
  <p>and I used service called locationService.ts there and this is that service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Location } from './domain/Location';
  
  import { DatabaseAccessor } from  '../database/DatabaseAccessor';
  import { Observable } from 'rxjs/Rx';
  
  @Injectable()
  export class LocationService {
    locationList:Array&lt;Location&gt; = new Array&lt;Location&gt;();
  
    constructor(public databaseAccessor: DatabaseAccessor) {}
  
    getLocationsForLikeSearchString(searchString: string) : Observable&lt;Array&lt;Location&gt;&gt; {
      const searchValue = (searchString == null) ? '%' : searchString.trim() + '%';
      return &lt;Observable&lt;Array&lt;Location&gt;&gt;&gt; Observable.fromPromise(this.databaseAccessor.runSelectQuery(Location, new Location(), 'WHERE name LIKE ?', [searchValue]));
    }
  
    getLocationById(id: number): Observable&lt;Location&gt; {
      return &lt;Observable&lt;Location&gt;&gt; Observable.fromPromise(this.databaseAccessor.runSelectQuery(Location, new Location(), 'WHERE id = ?', [id]));
    }
  
    saveLocations(locations: Array&lt;Location&gt;){
      this.databaseAccessor.runInsertBatchQuery(Location.prototype, locations);
    }
  
  
  }
  </code></pre>
  
  <p>Finally, I wrote a <code>spec.ts</code> file to unit testing and here is that,</p>
  
  <pre><code>import { ComponentFixture, async } from '@angular/core/testing';
  import { LocationSearchModal } from './LocationSearchModal';
  import { LocationService } from '../../services/LocationService';
  import { TestUtils } from '../../test';
  import { TestBed } from '@angular/core/testing';
  import { App, NavController, Platform, Config, Keyboard, Form, IonicModule, GestureController, ViewController, LoadingController }  from 'ionic-angular';
  import { ConfigMock } from '../../mocks';
  import { TranslateModule } from 'ng2-translate';
  import { DatabaseAccessor } from  '../../database/DatabaseAccessor';
  
  let comp: LocationSearchModal;
  let fixture: ComponentFixture&lt;LocationSearchModal&gt;;
  let instance: any = null;
  
  describe('LocationSearchModal', () =&gt; {
  
    beforeEach(async(() =&gt; {
  
      TestBed.configureTestingModule({
        declarations: [LocationSearchModal], // declare the test component
        providers: [App, Platform, Form, Keyboard, NavController, GestureController, LoadingController, LocationService, DatabaseAccessor,
          { provide: ViewController, useClass: class { ViewController = jasmine.createSpy("viewController"); } },
          { provide: Config, useClass: ConfigMock },
        ],
        imports: [
          IonicModule,
          TranslateModule.forRoot(),
        ],
      });
      fixture = TestBed.createComponent(LocationSearchModal);
      comp = fixture.componentInstance;
    }));
  
    console.log(comp);
    it('Testing Location Component', () =&gt; {
      expect(comp.temp).toBe('test');
    })
  });
  </code></pre>
  
  <p>when I am running the following error comes from the terminal. 
  (my unit testing configuration are correct and I tested it with another simple .spec.ts file)</p>
  
  <blockquote>
    <p>the error</p>
  </blockquote>
  
  <pre><code>SUMMARY:
  ✔ 1 test completed
  ✖ 1 test failed
  
  FAILED TESTS:
    LocationSearchModal
      ✖ Testing Location Component
        Chrome 54.0.2840 (Linux 0.0.0)
      Failed: Error in ./LocationSearchModal class LocationSearchModal_Host - inline template:0:0 caused by: Cannot read property '_getPortal' of undefined
      TypeError: Cannot read property '_getPortal' of undefined
          at App.present (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/ionic-angular/components/app/app.js:78:0 &lt;- src/test.ts:2091:35)
          at Loading.present (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/ionic-angular/components/loading/loading.js:31:0 &lt;- src/test.ts:38779:26)
          at LocationSearchModal.filterLocationsForString (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/src/pages/location-search/LocationSearchModal.ts:9:4184 &lt;- src/test.ts:18993:4170)
          at new LocationSearchModal (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/src/pages/location-search/LocationSearchModal.ts:9:3407 &lt;- src/test.ts:18993:3391)
          at new Wrapper_LocationSearchModal (/DynamicTestModule/LocationSearchModal/wrapper.ngfactory.js:7:18)
          at _View_LocationSearchModal_Host0.createInternal (/DynamicTestModule/LocationSearchModal/host.ngfactory.js:16:35)
          at _View_LocationSearchModal_Host0.AppView.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/view.js:84:0 &lt;- src/test.ts:52350:21)
          at _View_LocationSearchModal_Host0.DebugAppView.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/view.js:294:0 &lt;- src/test.ts:52560:44)
          at ComponentFactory.create (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/src/linker/component_factory.js:152:0 &lt;- src/test.ts:32035:36)
          at initComponent (webpack:/media/dilanka/Stuff/CODE%20BASE/Inspection/Unit%20Testing/Inspection-Rewrite/~/@angular/core/bundles/core-testing.umd.js:855:0 &lt;- src/test.ts:7416:53)
  </code></pre>