typescript - Angular-rakennus - Sovittamaton valitsin: %

Kun suoritan npm run build, joka suorittaa ng build -c production, rakennus suoritetaan odotetusti. Mutta komentokehote täyttyy tällä varoituksella:

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: %
...

Kuinka ratkaista tämä varoitus?

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",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/platform-server": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@types/video.js": "^7.3.27",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bowser": "^2.11.0",
    "buffer": "^6.0.3",
    "bundle-loader": "^0.5.6",
    "compare-version": "^0.1.2",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.5.0",
    "hammerjs": "^2.0.8",
    "https-browserify": "^1.0.0",
    "jalali-moment": "^3.3.10",
    "lottie-web": "^5.7.13",
    "lzutf8": "^0.6.0",
    "net": "^1.0.2",
    "ng-gallery": "^5.1.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-device-detector": "^1.5.2",
    "ngx-doughnut-chart": "0.0.4",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-lottie": "^7.0.4",
    "ngx-owl-carousel-o": "^3.1.1",
    "ngx-skeleton-loader": "^2.10.1",
    "ngx-toastr": "^12.1.0",
    "os-browserify": "^0.3.0",
    "podchat-browser": "^10.14.13",
    "rxjs": "^6.6.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls": "0.0.1",
    "ts-ebml": "^2.0.2",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "video.js": "^7.15.4",
    "videojs-record": "^4.5.0",
    "zone.js": "~0.11.4"
  },
  "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",
    "@egjs/hammerjs": "^2.0.17",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "colors": "^1.4.0",
    "git-tag-version": "^1.3.1",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "http-server": "^14.0.0",
    "husky": "^7.0.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "4.4.4",
    "zip-dir": "^2.0.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

Vastaus #1

Haun jälkeen huomasin, että Angular lopettaa tuen IE 11:lle.

On kaksi tapaa kohdata tuo asia:

  1. Poista tuki IE 11:lle kuten tstdplt mainitsi .browserslistrc tai browserslist-tiedostosta:
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.
  • not on olennainen.
  1. Lisää tuki kääntämällä projektisi alemmalle ECMAScript-versiolle polyfillien avulla. Voit seurata tämän artikkelin mainitsemia vaiheita.

Vastaus #2

Voit yrittää selvittää, mikä kokoonpanon ominaisuus aiheuttaa ongelman. Minulle selvisi, että se on optimointilippu, kun se on asetettu arvoon true. Angularin avulla optimointia voidaan määrittää myös objektin kautta, ei vain boolean-lipun avulla - tämän avulla voit tutkia tarkemmin, mikä näistä vaiheista aiheuttaa ongelman. Löydät dokumentaation täältä: https://angular.dev/reference/configs/workspace-config#optimization-configuration

Minulle se on inlineCritical-lippu, joka aiheuttaa build-tuloksen. Tutkimuksen aikana huomasin, että yksi kirjastoista tyylitiedostoista, joka on lisätty styles-taulukkoon angular.json-tiedostossa, aiheuttaa ongelman. Valitettavasti en ole löytänyt vaihtoehtoa sulkea pois tai määrittää tutkittavia tiedostoja tälle lipulle, joten päätin asettaa sen toistaiseksi epätodeksi.

Aiheeseen liittyviä artikkeleita