I get error ".form-floating>~label" in ng build

Question

I try to run command "ng build" in my Angular app next i get:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...4 rules skipped due to selector errors:
  .form-floating>~label -> Did not expect successive traversals.
  .form-floating>~label -> Did not expect successive traversals.
  .form-floating>~label -> Did not expect successive traversals.
  .form-floating>~label -> Did not expect successive traversals.
✔ Index html generation complete.

I use [email protected]. I saw what is it in documentation but I didn't use these bootstrap class in my app. I have some inputs, labels etc like this:

     <form #authForm="ngForm" (ngSubmit)="onSubmit(authForm)" *ngIf="!isLoading">
            <div class="form-group">
                <label for="email" class="col-12 mb-3">E-Mail:</label>
                <input type="email" class="col-12 mb-3" id="email" ngModel name="email" required email />
            </div>
            <div class="form-group">
                <label for="password" class="col-12 mb-3">Password:</label>
                <input type="password" class="col-12 mb-3" id="password" ngModel name="password" required
                    minlength="6" />
            </div>
            <div *ngIf="error" class="text-center">
                <p [ngStyle]=" { 'color' : 'red' }">{{ error }}</p>
            </div>
            <button class="btn-login" type="submit" [disabled]="!authForm.valid"> {{ isLoginMode ? 'Login' : 'Sign Up'
                }}</button>
            <button class="btn-login" type="button" [disabled]="!authForm.valid" (click)="onSwitchMode()">Switch to {{
                isLoginMode ? 'Sign Up' :
                'Login' }}</button>
        </form>

I don't know what can I do with this to resolve the problem.

Answer 1

Warning: This is not a proper solution, but merely a workaround to silence the warning.

---

I've been also dealing with this issue, and from what I've gathered, it's an error on the part of Angular itself.

Try looking into angular.json, and replace "optimization": true with

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
},

As seen here and here. If it's a dev build, you may replace it with "optimization": false altogether.