[Ionic 3.0.0-beta.3] TypeError: undefined is not a function

[peterpeterparker]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[ X] 3.x

I'm submitting a ... (check one with "x")
[ X] bug report

Current behavior:
First I report most probably a bug, I won't say it's one but I really I really spent hours to be sure I followed correctly the upgrade guides and examples.

When I set the root page, push, setRoot, modal.create a page with her string value (like nav.push('LoginPage') instead of nav.push(LoginPage)) I always end up facing following error:

ERROR TypeError: undefined is not a function
    at Array.map (native)
    at webpackAsyncContext (http://localhost:8100/build/main.js:60267:34)
    at loadAndCompile (http://localhost:8100/build/main.js:102804:36)
    at NgModuleLoader.load (http://localhost:8100/build/main.js:102769:83)
    at ModuleLoader.load (http://localhost:8100/build/main.js:73792:44)
    at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:42370:39)
    at DeepLinker.getComponentFromName (http://localhost:8100/build/main.js:42353:25)
    at getComponent (http://localhost:8100/build/main.js:50072:23)
    at convertToView (http://localhost:8100/build/main.js:50090:16)
    at NavControllerBase.push (http://localhost:8100/build/main.js:57945:103)
    at Nav.ngAfterViewInit (http://localhost:8100/build/main.js:67442:25)
    at callProviderLifecycles (http://localhost:8100/build/main.js:11383:18)
    at callElementProvidersLifecycles (http://localhost:8100/build/main.js:11358:13)
    at callLifecycleHooksChildrenFirst (http://localhost:8100/build/main.js:11342:17)
    at checkAndUpdateView (http://localhost:8100/build/main.js:12360:5)

Expected behavior:
Well no error ;)

Steps to reproduce:
Like I said, in every navigation with string value I face the above reported error

Related code:

If you wish, I could grant you access to my private project repo.

Note also that that error was previously reported there: #10961

My app.module.ts:

  @NgModule({
      declarations: [
          MyApp,

       // Child-components
   ],
   imports: [
       BrowserModule,
       HttpModule,
       IonicModule.forRoot(MyApp, {
        scrollAssist: false,
        autoFocusAssist: false,
        tabsHideOnSubPages: true,
        menuType: 'overlay'
    }),
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: exportTranslateStaticLoader,
                deps: [Http]
            }
        }
    ),
    IonicStorageModule.forRoot(),
    LoginPageModule // Lazy loading, load only first page
   ],
   exports: [
       TranslateModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
       MyApp
   ],
   providers: [
       // My providers and ,
       {
           provide: Http,
           useFactory: customHttpInterceptor,
           deps: [XHRBackend, RequestOptions]
       }
   ]

})
export class AppModule {
}

LoginPageModule:

   import {NgModule} from '@angular/core';
  import {IonicPageModule} from 'ionic-angular';
  import {LoginPage} from './login';

  import {TranslateModule} from '@ngx-translate/core';

  @NgModule({
      declarations: [
          LoginPage
      ],
      imports: [
          IonicPageModule.forChild(LoginPage),
          TranslateModule.forChild()
      ]
  })
  export class LoginPageModule {
  }

app.component.ts:

 rootPage: any = 'LoginPage';

or in another page

 this.app.getRootNav().setRoot('APage');

= same results

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.0-beta.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.3 Build version 8E162

[peterpeterparker]

I'm betting this error comes because of my child-components and pipes not properly loaded.

Gonna try to improve that according @mhartington nice answer https://forum.ionicframework.com/t/ionic-3-0-0-beta/84540/57

[mhartington]

So just to add a bit here.

In your root ngModule, you have

IonicStorageModule.forRoot(),
    LoginPageModule // Lazy loading, load only first page
   ],
   exports: 

Were you include LoginPageModule in the main bundle.
In this case, it's not going to be lazy-loaded.

So

 this.app.getRootNav().setRoot('APage');

Will not work.
You either need to remove the LoginPageModule from the root module, or import the component like you would before lazy-loading was introduced.

[peterpeterparker]

@mhartington Thx for the answer. Yep if I import the "login" component like I did before lazy-loading was introduce, this component is loaded. But once that page is displayed, if I call from there another page with the page name to lazy load it, I face the error.

this.app.getRootNav().setRoot('APage');

=> Uncaught (in promise): TypeError: undefined is not a function

I guess I get that error because the page could not be compiled on the fly, which is most probably due to a mistake from my side, but who knows...if I found the solution, of course gonna close the issue asap.

[peterpeterparker]

Well I converted the starter-app the same way I converted my app and everything's worked. Also added sub-component in the starter app the same way I converted my sub-component, still worked....weird

[peterpeterparker]

Same error: ionic-team/ionic-app-scripts#848

[peterpeterparker]

The fix applied by @danbucholtz in the linked issue of app-scripts solved my issue, thx a lot!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.