IonicPage direct URL access

[pizzetto]

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

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I want to try the direct url access made available with IonicPage. If I type for instance:

http://localhost:8100/#/login

I get this error:
Runtime Error
undefined is not a function

Stack trace: TypeError: undefined is not a function at Array.map (native) at webpackAsyncContext (http://localhost:8100/build/main.js:81286:34) at loadAndCompile (http://localhost:8100/build/main.js:78129:36) at NgModuleLoader.load (http://localhost:8100/build/main.js:78094:83) at ModuleLoader.load (http://localhost:8100/build/main.js:59126:44) at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:27110:39) at DeepLinker.initViews (http://localhost:8100/build/main.js:27284:21) at Nav.ngAfterViewInit (http://localhost:8100/build/main.js:52767:33) at callProviderLifecycles (http://localhost:8100/build/main.js:11476:18) at callElementProvidersLifecycles (http://localhost:8100/build/main.js:11451:13) at callLifecycleHooksChildrenFirst (http://localhost:8100/build/main.js:11435:17) at checkAndUpdateView (http://localhost:8100/build/main.js:12457:5) at callViewAction (http://localhost:8100/build/main.js:12764:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12710:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12455:5)

Expected behavior:

I expecting to see my login page component with a simple login form. Anyway it was just a test of IonicPage

Related code:
app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, IonicPageModule, NavParams } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage'
import { HttpModule } from "@angular/http";

import { MyApp } from './app.component';
import { HomeModule } from '../pages/home/home.module';
import { ListPage } from '../pages/list/list';
import { LoginModule } from '../pages/login/login.module';
import { DashboardModule } from '../pages/dashboard/dashboard.module';

import { AuthService } from '../providers/auth-service';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
    declarations: [
        MyApp,
        ListPage,
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        IonicPageModule.forChild(MyApp),
        IonicStorageModule.forRoot(),
        HttpModule,
        CommonModule,
        HomeModule,
        LoginModule,
        DashboardModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        ListPage,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler },
        AuthService
    ]
})
export class AppModule { }

login.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { IonicPage, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';


import { AuthService } from '../../providers/auth-service';

import { DashboardPage } from '../dashboard/dashboard';

/**

@IonicPage({
    name: 'login',
    segment: 'login'
})
@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class LoginPage implements OnInit {
    authType: string = "login";
    loginForm: FormGroup;
    constructor(public navCtrl: NavController,
        private auth: AuthService,
        private formBuilder: FormBuilder,
        private navParams: NavParams,
        private toasterCtrl: ToastController,
        private loadingCtrl: LoadingController) {

        console.log(this.navParams);

        this.loginForm = this.formBuilder.group({
            'username': ['', [Validators.required, this.usernameValidator.bind(this)]],
            'password': ['', [Validators.required, this.passwordValidator.bind(this)]]
        });
    }
[...]

Other information:
Based on the IonicPage API Docs should be working.

What am I doing wrong?
thanks!

[jgw96]

Hello, would you mind posting a repo we could use to reproduce this issue? Thanks!

[pizzetto]

@jgw96 Hello there,
sure! Here is it
https://github.com/pizzetto/ionic2-starter

thanks, I appreciate your help

[HalfLegend]

Same problem and same error message.

This issue is very easy to reproduce.

[ChezRD]

Remove page modules from app module definition, and use string containing page classname or name defined in IonicPage deforator according to blog entry on http://blog.ionic.io

[pizzetto]

@ChezRD could you provide some code? I tried to follow your instruction but unfortunately without success

[ChezRD]

@pizzetto you can get example on https://github.com/ChezRD/Ionic3-select-issue
You can see that app.module has only basic imports and declarations. When you use it that way deeplinking generator adds needed function to webpack bundle (this function not included in bundle if there is no need to lazy loading components).

It's less complicated explanation that i can write from my phone.

This question was asked alson on SO and ionic forums, actually on closed issues you can find solution too. There are posts on blog.ionic.io describind deeplinking, lazy loading and migrating to ionic 3, you should read all of them.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!