I am getting the following error when trying to run a prod build using the following
ionic cordova build browser --prod
Getting lot of warnings in the terminal like
FormBuilder is declared but never used
Even though in my code I am importing it and using it e.g.
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
public form: FormGroup;
constructor(
private formBuilder: FormBuilder
) {
setForm(){
this.form = this.formBuilder.group({
password: ['', Validators.required],
password2: ['', Validators.required]
});
}
Has anyone had a similar problem? My guess it would be something to do with an npm package update.
Any advice would be great.
Thanks!
I am getting the following error when trying to run a prod build using the following
ionic cordova build browser --prod
Getting lot of warnings in the terminal like
FormBuilder is declared but never used
Even though in my code I am importing it and using it e.g.
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
public form: FormGroup;
constructor(
private formBuilder: FormBuilder
) {
setForm(){
this.form = this.formBuilder.group({
password: ['', Validators.required],
password2: ['', Validators.required]
});
}
Has anyone had a similar problem? My guess it would be something to do with an npm package update.
Any advice would be great.
Thanks!
Share Improve this question asked Jun 26, 2017 at 12:02 user2085143user2085143 4,2327 gold badges42 silver badges71 bronze badges 3-
Remember that you should delete your
node_modules
folder after updating the project to Ionic3, then runnpm install
again. With the new CLI these warnings will be more aggressive, prepare yourself. – dlcardozo Commented Jun 26, 2017 at 14:37 - Thanks for the response. I have deleted them and re-installed many times now. Updated to Ionic 3 a while back and didn't have this issue, only starting occurring recently. – user2085143 Commented Jun 26, 2017 at 15:30
- I have the same issue, any help? – Eusthace Commented Jun 27, 2017 at 1:30
3 Answers
Reset to default 10Ionic 3.3.0 (2017-05-24) removed the usage of legacy file 'src/declarations.d.ts' as mentioned in the changelog. Removing 'declarations.d.ts' from the src/ folder fixes the unused imports warning.
For more info check out the GitHub issue.
I have the same issue and this is because tslint 5.0 changed how it checks unused variables.
You can suppress the warnings by changing the rules of the tslint.json file. I changed the "no-unused-variable" from true to false so it will look something like this:
{
"rules": {
"no-duplicate-variable": true,
"no-unused-variable": [
false
]
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
Of course this will suppress all warnings about unused variables but at anytime you can revert it to true to see if there are any other unused variables.
You can also add the following variable "noUnusedLocals": true to the tsconfig.json file:
{
"pilerOptions": {
"noUnusedLocals": true,
.
.
.
}
Just know that the "noUnusedLocals": true will throw errors instead of warnings though...
Hope this helps
Working form with my ionic 3 App:
import {FormBuilder, FormGroup, Validators } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-mobile-login',
templateUrl: 'mobile-login.html',
})
export class MobileLoginPage {
public loginForm:FormGroup;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public formBuilder: FormBuilder)
{
this.loginForm = formBuilder.group({
mobile: ['', Validators.pose([Validators.required,Validators.pattern('[0-9 ]*'),
Validators.maxLength(10),Validators.minLength(10)])]
});
}
}
Seems issue you are using another function setForm()
in constructor.
mobile-login.html
<form [formGroup]="loginForm" (submit)="submitMobile()" novalidate>
<ion-list padding-right padding-left>
<ion-item no-padding>
<ion-input formControlName="mobile" type="tel"
placeholder="Enter Mobile" minlength="10" maxlength="10"
[class.invalid]="!loginForm.controls.mobile.valid && loginForm.controls.mobile.dirty">
</ion-input>
</ion-item>
<ion-item no-padding class="error-message"
*ngIf="!loginForm.controls.mobile.valid && loginForm.controls.mobile.dirty">
<p ion-text>
Enter Valid Mobile Number
</p>
</ion-item>
</ion-list>
<ion-row responsive-sm padding-right padding-left>
<ion-col class="otpbutton">
<button color='navbarColor' class="bluebg" ion-button block icon-left type="submit" [disabled]="!loginForm.valid">
<ion-icon name="phone-portrait"></ion-icon>
Submit
</button>
</ion-col>
</ion-row>
</form>