Can't bind to 'navPush' since it isn't a known property of 'a'

Question

I have an Ionic/Angular2 app and I am testing it with Jasmine. But when I run them I am getting the error

Can't bind to 'navPush' since it isn't a known property of 'a'

These are my imports

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { async } from '@angular/core/testing';

import { SignIn } from './sign-in.component'

and this is my beforeEach

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ SignIn ],
      providers: [{provide: SignIn}],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [ReactiveFormsModule]
 });

    fixture = TestBed.createComponent(SignIn);
    signInComponent = fixture.componentInstance;
});

Here is where I use 'a'

<a [navPush]="signUp" class="link-class">Not a member? Sign up now</a>

edit

The component:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Http } from '@angular/http';
import { AlertController } from 'ionic-angular';
import { ValidateEmail, ValidatePassword } from '../../../controller/custom-validations';
import { UserProfile } from '../../../models/user-profile';
import { UserHome } from '../userHome/user-home.component';

//Template used for the page which the user will use to log in
@Component({
  selector: 'page-sign-in',
  templateUrl: 'sign-in.component.html'
})

//Class used for the sign in of the member in the system
export class SignIn {
  signInForm: FormGroup;      
  signUp = SignUp;

  //Form used for the member to access the system
  constructor(public navCtrl: NavController, formBuilder: FormBuilder, private http: Http, public alertCtrl: AlertController) {
    this.signInForm = formBuilder.group({
      'email': [null, Validators.compose([Validators.required, ValidateEmail()])],
      'password': [null, Validators.compose([Validators.required, ValidatePassword()])],
    });
  }

I have seen similar questions, like this

You no doubt added `CUSTOM_ELEMENTS_SCHEMA` in response to an earlier error message you received. But what you actually should have done was included the Component/Directive where `navPush` is actually defined. Where is that? — Neil Lunn, May 21 '17 at 02:24
So you should have something like `beforeEachProviders()` with the relevant `NavController` init etc in it. — Neil Lunn, May 21 '17 at 02:29
I added CUSTOM_ELEMENTS_SCHEMA because I was getting the same error, but with tags . NavPush is defined in NavController from 'ionic-angular' — Lucas Oliveira, May 21 '17 at 02:33
I didn't import navPush, but I import NavController in component.ts — Lucas Oliveira, May 21 '17 at 02:51
Try `NO_ERRORS_SCHEMA` instead of `CUSTOM_ELEMENTS_SCHEMA` or add NavPush directive to declarations array — yurzui, May 21 '17 at 05:54
That's worked yurzi! I put NavPush in declarations and NavController in providers. Thank you so much — Lucas Oliveira, May 21 '17 at 13:56
Now with Ionic 4 you can try Angular's router: [Ionic 4 routing and navigation guide](https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/) — Gustavo Santamaría, May 26 '19 at 22:21

Can't bind to 'navPush' since it isn't a known property of 'a'

0 Answers0