Ionic 3 - All imports are unused warning (even though they are being used)

Question

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!

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

Answer 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

Answer 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 class MobileLoginPage {
    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-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>