ionic2 Angular -issue with navigation

Question

I am trying to implement a login functionality.

Login.ts

 import {Component} from "@angular/core";
    import {Header} from '../header/header';
    import {AuthenticationService, User} from '../../services/authService'
    import {DetailsPage} from '../details/details';
    import {UserProfilePage} from '../userprofile/userprofile';
    import {NavController,NavParams} from 'ionic-angular';
    import {NgIf} from '@angular/common';




@Component({
  templateUrl: 'build/pages/login/login.html',
  directives:[Header],
  providers: [AuthenticationService],
  styles:[' .login-home { align:center;margin-left:20px;}']
})

export class LoginPage {

   public user = new User('','');
   public errorMsg = '';
   public pageHeader:string;

    constructor(
        private _service:AuthenticationService,private nav: NavController) {
          this.pageHeader="Login"
          this.user = new User('','');
          this.nav = nav;

        }

    login() {
        this.nav.setRoot(DetailsPage);
        this.nav.push(DetailsPage);
        // let loginSucessful = this._service.login(this.user)
        /**  if(loginSucessful !== undefined && loginSucessful == false){
                this.errorMsg = 'Invalid login';
            }*/
    }

}

Details Page is as follow-

import {Component,OnInit} from "@angular/core";
import {Header} from '../header/header';
import {HomePage} from '../home/home';
import {AuthenticationService, User} from '../../services/authService'
import {NavController,NavParams,Platform,Storage,SqlStorage,Toast} from 'ionic-angular';
import {NgIf} from '@angular/common';
import {PersonSO} from '../../services/personSO';



@Component({
  templateUrl: 'build/pages/userprofile/userprofile.html',
  directives:[Header],
  providers: [AuthenticationService]
})
export class DetailsPage implements OnInit{
    public pageHeader:string;
    public storage;
    public people =[];



   constructor(private platform: Platform,private navParams: NavParams,
        private _service:AuthenticationService,private nav: NavController) {
             this.pageHeader="List of user";
              this.platform.ready().then(() => {
                this.storage = new Storage(SqlStorage);
                this.nav = nav;        
            });


        }

   ngOnInit() {    
      this._service.checkCredentials();

  }
    goBack(){
           this.nav.push(HomePage);
    }
   navigateToUserForm(){
          this.nav.push(HomePage);
   }

   edit(person:PersonSO){
        this.nav.push(HomePage,{
         person: person
     });
   }

}

This is working fine if I go to details page to Home page. But while navigating from login page. I am getting below error

11 756293 error Uncaught EXCEPTION: Error in build/pages/login/login.html:17:20 ORIGINAL EXCEPTION: TypeError: Cannot read property 'parameters' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property 'parameters' of undefined at ReflectionCapabilities.parameters (http://localhost:8100/build/js/app.bundle.js:29733:40) at Reflector.parameters (http://localhost:8100/build/js/app.bundle.js:29921:48) at CompileMetadataResolver.getDependenciesMetadata (http://localhost:8100/build/js/app.bundle.js:11007:86) at CompileMetadataResolver.getTypeMetadata (http://localhost:8100/build/js/app.bundle.js:10958:26) at http://localhost:8100/build/js/app.bundle.js:11107:30 at Array.map (native) at CompileMetadataResolver.getProvidersMetadata (http://localhost:8100/build/js/app.bundle.js:11095:26) at CompileMetadataResolver.getDirectiveMetadata (http://localhost:8100/build/js/app.bundle.js:10910:34) at RuntimeCompiler.resolveComponent (http://localhost:8100/build/js/app.bundle.js:14802:47) at NavController.loadPage (http://localhost:8100/build/js/app.bundle.js:46890:24) ERROR CONTEXT:

Please let me know if you have any solution for this.

Unknown Unknown · Accepted Answer · 2016-11-05T09:33:48

pretty sure there is a error here

@Component({
   templateUrl: 'build/pages/login/login.html',

Your templateUrl should not be calling from the build folder.

@Component({
   templateUrl: 'login.html',

You can see how ionic build page structures using the ionic CLI

>_ ionic generate page login

the page then needs to be defined in the app.module.ts file in your app folder.

ionic2 Angular -issue with navigation

1 Answers