user6509972 user6509972 - 1 month ago 60
TypeScript Question

Property does not exist on type. TypeScript

I built a simple form that has some validation to it in Ionic 2. The form worked fine with ionic serve but wont work with ionic run. I belive the issue is not with ionic but with my type script. Somehow I must not be importing the right thing or not defining the right propertires. Here is my code.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import {Http, Request, RequestMethod } from '@angular/http';


/*
Generated class for the ContactUs page.

See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})

export class Contact {

inputGroup: FormGroup;

buttonDisabled = true;
fullNameError = false;
emailError = false;
subjectError = false;
messageError = false;

constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http) {

this.inputGroup = this.formBuilder.group({
fullName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
email: ['', Validators.compose([Validators.required])],
subject: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
message: ['', Validators.compose([Validators.maxLength(500), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
});

}



adjustButton(){
if(this.inputGroup.controls.fullName.valid == true) {
this.fullNameError = false;
}

if(this.inputGroup.controls.email.valid == true) {
this.emailError = false;
}

if(this.inputGroup.controls.subject.valid == true) {
this.subjectError = false;
}

if(this.inputGroup.controls.message.valid == true) {
this.messageError = false;
}
}

something() {
console.log("Something happened");
}

onClick() {
// if the fullName field is not valid display error
if(!this.inputGroup.controls.fullName.valid) {
this.fullNameError = true;
} else {
this.fullNameError = false;
}




if(!this.inputGroup.controls.email.valid) {
this.emailError = true;
} else {
this.emailError = false;
}

if(!this.inputGroup.controls.subject.valid) {
this.subjectError = true;
} else {
this.subjectError = false;
}

if(!this.inputGroup.controls.message.valid) {
this.messageError = true;
} else {
this.messageError = false;
}
}

ionViewDidLoad() {
console.log('Hello ContactUs Page');
}

}


Then Here is my error log.

01:23:43] ngc: Error: Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:40:30: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:44:30: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:48:30: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:52:30: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:63:31: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:72:31: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:78:31: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:84:31: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:788:41: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:820:41: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:857:41: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:889:41: Property 'message' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1175:43: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1190:43: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1205:43: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1220:43: Property 'message' does not exist on type 'Contact'.
at check (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
at Tsc.typeCheck (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3


[01:23:43] ngc: Compilation failed

[01:23:43] ngc failed: NGC encountered an error
[01:23:43] Error: NGC encountered an error
at ChildProcess.<anonymous> (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@ionic/app-scripts/dist/ngc.js:62:24)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Socket.<anonymous> (internal/child_process.js:334:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:498:12)

Error running ionic app script "build": Error: NGC encountered an error


Can someone please tell me why I am receiving these errors?

Answer

I managed to solve this by not using dot notation to access map properties.

You are using dot notation in your controller, (eg. !this.inputGroup.controls.fullName.valid). I think that is fine, but if you are using dot notation in your template, (eg. *ngIf="inputGroup.controls.fullName"), you will have this problem due to differences between the just in time compiler (JIT) and the ahead of time compiler (AoT). I think ionic serve uses JIT, but ionic build uses AoT.

In your template, change usages to look like this: inputGroup.controls['fullName']

This thread helped me understand the problem.

$ ionic info

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.6.0