IonicPage direct URL access

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!

Author: Fantashit

1 thought on “IonicPage direct URL access

Comments are closed.