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.

Koan

Answer 1

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.

Cedric

Answer 2

I got the same error:

Caused by adding bootstrap css to angular.json styles instead of directly importing it in css.

Don't do this [angular.json]:

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Do this instead [styles.scss]:

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import '../node_modules/bootstrap-icons/font/bootstrap-icons.min.css';

Gaselier

It didn't work for me: I don't have any bootstrap css in angular.json styles array and I do have @import 'bootstrap/scss/bootstrap'; in styles.css but still having those "warning errors" (using bootstrap 5.2.3 and ng-bootstrap 14.1.0 + angular 15.2.8) – Ivyiwis

@Ivyiwis I was only able to come to this solution because my project was practically empty. Sometimes the only way to figure stuff out in these insanely complicated environments is to start from nothing where the build works and then add stuff until it doesn't. In a perfectly clean solution, my answer works. My guess is if this doesn't work, you got some random thing doing something random -- god knows where. – Gaselier

I am still having this warning with Angular 18.1.0, Bootstrap 5.3.3, and ngx-bootstrap 18.0.2. – Cynosure