Ionic 3 - All Imports Are Unused Warning (even Though They Are Being Used)

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 FormBuilde

Solution 1:

Ionic 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.

Solution 2:

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:

{
  "compilerOptions": {
    "noUnusedLocals": true,
.
.
.
}

Just know that the "noUnusedLocals": true will throw errors instead of warnings though...

Hope this helps

Solution 3:

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 classMobileLoginPage{
    public loginForm:FormGroup;

    constructor(public navCtrl: NavController, 
      public navParams: NavParams,
      public formBuilder: FormBuilder) 
      {
          this.loginForm = formBuilder.group({
              mobile: ['', Validators.compose([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-listpadding-rightpadding-left><ion-itemno-padding><ion-inputformControlName="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-itemno-paddingclass="error-message" 
      *ngIf="!loginForm.controls.mobile.valid && loginForm.controls.mobile.dirty"><pion-text>
        Enter Valid Mobile Number
      </p></ion-item></ion-list><ion-rowresponsive-smpadding-rightpadding-left><ion-colclass="otpbutton"><buttoncolor='navbarColor'class="bluebg"ion-buttonblockicon-lefttype="submit" [disabled]="!loginForm.valid"><ion-iconname="phone-portrait"></ion-icon>
            Submit
        </button></ion-col></ion-row></form>