Angular compilation error - Invalid selector: %

Whenever I execute npm run build, which in turn runs ng build -c production, the build process completes successfully. However, throughout this process, the command prompt displays a warning message:

Warning: 303 rules skipped due to selector errors:
  0% -> Unmatched selector: %
  20% -> Unmatched selector: %
  53% -> Unmatched selector: %
  40% -> Unmatched selector: %
  43% -> Unmatched selector: %
  70% -> Unmatched selector: %
  80% -> Unmatched selector: %
  90% -> Unmatched selector: %
...

Is there a solution to eliminate this warning?

package.json:

{
  "name": "wepod-clients",
  "version": "3.2.3",
  "scripts": {
    "ng": "ng",
    "start": "node patch.js && ng serve",
    "serve-auth": "ng run wepod-app:serve-auth-standalone:production",
    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
    "server": "npm run build && http-server -p 9090 -c-1 dist",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "node patch.js && ngcc",
    "postbuild": "node post-build.js",
    "prepare": "husky install",
    "build-latest": "git pull origin production && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/cli": "^13.0.1",
    "@angular/common": "^13.0.0",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular-devkit/core": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    ...
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}
angulartypescriptsassangular-cliangular-builder

Answer №1

Upon further investigation, I discovered that angular is phasing out support for IE 11.

There are two approaches to address this issue:

  1. To eliminate support for IE 11 as suggested by tstdplt, remove it from your .browserslistrc or browserslist:
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
  • The use of not is crucial.
  1. To add support, you can compile your project to a lower ECMAScript version using polyfills. Follow the steps outlined in this article.

Answer №2

Have you ever tried inserting the specified code into your ".browserlistrc" configuration file? You can find this file in the main directory of your project.

- Last 1 version of Chrome
- Last 1 version of Firefox
- Last 2 major versions of Edge
- Last 2 major versions of Safari
- Last 2 major versions of iOS
- Firefox ESR
- Internet Explorer 11

I found this solution to be helpful in resolving the issue.

Answer №3

If you're facing an issue with your build configuration, one possible cause could be the optimization flag set to true. In Angular, you have the option to configure optimization through an object as well, allowing for a more detailed investigation into what might be causing the problem. Check out the documentation here:

For my specific case, it turned out that the inlineCritical flag was responsible for the issues in the build output. Upon further investigation, I discovered that a library stylesheet included in the styles array within angular.json was contributing to the problem. Despite not finding a way to exclude or specify certain files for this flag, I decided to temporarily set it to false.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the generic type argument of a class can be unsuccessful due to the specific properties within that class

Why is it that Typescript sometimes fails to infer types in seemingly simple cases? I am trying to understand the behavior behind this. When Typescript's Type Inference Goes Wrong Consider the scenario where we have the following class declarations: ...

typescript

Understanding how to retrieve the value count by comparing strings in JavaScript

In my array object, I am comparing each string and incrementing the value if one letter does not match. If three characters match with the string, then I increase the count value; otherwise, it remains 0. var obj = ["race", "sack", &qu ...

javascriptjqueryarraystypescriptobject

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

While unit testing my components (which are coded using TypeScript along with vue-class-component), I am utilizing Sinon to stub API calls. However, even after adding the stub to the test, the original method is still being invoked instead of returning the ...

typescriptvue.jskarma-runnersinonsinon-chai

What could be causing the sudden appearance of this error message: File C:UsersdAppDataRoaming pm g.ps1 cannot be loaded?

For years, I've been happily using vscode/angular/node/npm without any issues. However, in the last hour or so, I've encountered an error without making any explicit changes. What could have caused the execute permissions, which were previously ...

angularvisual-studio-codenpm

Tips for creating an operation within a JSON document?

Today, I am attempting to customize the appearance of my audiobook list. However, when trying to add an aspectRatio key-value pair to each object in my JSON file, I encountered an error. https://i.stack.imgur.com/Qb3TX.png https://i.stack.imgur.com/qTkmx. ...

arraysjsontypescriptreact-nativeobject

Recommendations for organizing code with respect to models in Angular using TypeScript

Within my C# backend, I structure my entities and entity lists using classes. Any needed functions or methods are simply added to the corresponding class. On the contrary, in Angular/TypeScript examples, models are typically defined as interfaces. This ra ...

angulartypescriptinterface

Can you point me to the location where the 'req' parameter is specified?

I've been exploring a new authentication approach detailed in this article. One issue I'm encountering is locating where the req parameter is declared in the snippet below. It seems like my code won't compile because this parameter isn&apos ...

javascriptangulartypescript

Search for words in a given string that begin with the symbol $ using Angular 2

I am trying to locate words that begin with $. var str = "$hello, this is a $test $john #doe"; var re = /(?:^|\W)\$(\w+)(?!\w)/g, match, results = []; while (match = re.exec(str)) { results.push(match[1]); } The regular expression a ...

regexangulartypescript

The TypeScript error message "Type 'x' cannot be assigned to type 'IntrinsicAttributes & IntrinsicClassAttributes<Class>'" was displayed on the screen

I encountered an issue when trying to pass a class method to a child component in a new code. While it worked perfectly in another code, I am now receiving the following error message: view image here What steps should I take to resolve this error? Do I ...

reactjstypescript

Angular 2 Endgame: HostBinding feature no longer functional

Here is how I used host-binding on a button attribute named "disabled" in the parent component of ng2-RC4: @Component({ selector: "nav-next", template: ` <div class="nav-next-directive" (click)="onClick($event)"> <button color ...

angular

Custom Mui table sizes - personalized theme

By implementing custom sizes for the Table component in Material UI, I have extended the Table size prop with the following declaration: declare module '@mui/material' { interface TablePropsSizeOverrides { relaxed: true large: true } ...

typescriptmaterial-ui

When attempting to run a Typescript Playwright test in Visual Studio Code's debug mode, it inexplicably fails to execute

I am fairly new to TypeScript and Playwright, but I have experience in coding. I believe I have a good understanding of what I am trying to achieve, but I am encountering a problem that I can't seem to figure out. I'm hoping someone can help me. ...

typescriptmacosvisual-studio-codeplaywright

The webpack task has failed because it cannot read the property 'forEach' of an undefined object

Encountering errors during the build process of a jhipster project when running ./gradlew in the project's directory. Starting a Gradle Daemon (subsequent builds will be faster) > Task :webpack > <a href="/cdn-cgi/l/email-protection" class ...

node.jsangularnpmwebpackjhipster

Icon for closing Mui Snackbar

I am facing an issue with my notification component that uses the mui snackbar to display alerts. I want to display multiple notifications stacked vertically, but when I try to close one notification using the "Close" icon, it ends up closing both that o ...

reactjstypescriptmaterial-ui

Angular and TypeScript make a powerful combination when working with the mat-table component

I'm currently working with Angular's mat-table component. One challenge I'm facing is setting a caption for the table. <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id=tbl_suchergebnis> <caption> ...

angulartypescriptcaptionmat-table

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

I am encountering an error with the onChange event while implementing cleave in typescript. TypeScript is throwing an error indicating that 'rawValue' is not present in event.target. Here is my code: import React, { useCallback, useState, useEff ...

javascriptreactjstypescripttypescript-typingscleave

How can I conceal an element upon page load using Ionic framework?

index.component.ts initialize() { // Execute necessary functions after loading this.index.ready().then(() => { if(this.index.is('core')){ // this.menu.enable(false, 'mobileOnlyPages'); }else{ ...

typescriptionic-frameworkionic3

What is the best way to associate dates with a particular ID within a textfield's value?

I am working with an array of objects called dates, and each object in the array looks like this: {id: 9898, date: 10/06/2020}. Within this array, there are multiple objects with the same id, and I want to display dates with the same id in a TextField com ...

reactjstypescriptmaterial-uireact-hookstsx

Is it possible for an object's property specified in a TypeScript interface to also incorporate the interface within its own declaration?

While it may seem like an unusual request, in my specific scenario, it would be a perfect fit. I am working with an object named layer that looks something like this: const layer = { Title: 'parent title', Name: 'parent name', ...

typescripttypes

Use the jqwidgets jxGrid with the checkbox selection mode to enable row selection by checking for any clicks on the row

Currently, I am using a jqxGrid that contains checkboxes. I would like the ability for users to select a row by clicking on any part or column of the row, not just on the checkbox itself. Unfortunately, it seems this feature is not directly supported. Has ...

javascriptangularjqxgrid