Después de migrar mi proyecto angular 6 a 12. Recibo múltiples advertencias en la terminal
si en angular.json configuro la optimización: configuración falsa, entonces todos los problemas se resuelven, pero no quiero hacer estos cambios, solo debería ser cierto.
con optimización: cierto, estoy recibiendo todas estas advertencias: -
El mismo código anterior funcionaba bien sin ninguna advertencia.
assets/.../variables.scss - Warning: Css Minimizer Plugin: > assets/.../variables.scss:6:0: warning: Unexpected "$" 6 │ $color-normal-gray:#8a8a8a; ╵ ^ assets/.../global.scss - Warning: Css Minimizer Plugin: > assets/.../global.scss:285:2: warning: Expected identifier but found "." 285 │ .dropdown-menu{ ╵ ^ assets/.../global.scss - Warning: Css Minimizer Plugin: > assets/.../global.scss:255:6: warning: Expected identifier but found "*" 255 │ *background-color: #d9d9d9; ╵ ^ assets/.../master.scss - Warning: Css Minimizer Plugin: > assets/.../master.scss:567:8: warning: Expected ":" but found "{" 567 │ circle { ╵ ^Mi Package.json está a continuación:
"dependencies": { "@angular/animations": "^12.2.3", "@angular/cdk": "^12.2.2", "@angular/common": "^12.2.3", "@angular/compiler": "^12.2.3", "@angular/core": "^12.2.3", "@angular/forms": "^12.2.3", "@angular/http": "^7.2.16", "@angular/material": "^12.2.3", "@angular/platform-browser": "^12.2.3", "@angular/platform-browser-dynamic": "^12.2.3", "@angular/router": "^12.2.3", "@fortawesome/fontawesome-free": "^5.15.4", "@ngrx/store": "^6.1.0", "@okta/okta-angular": "^3.0.1", "@okta/okta-auth-js": "^4.7.1", "angular-datatables": "^0.6.4", "angular-image-slider": "0.0.8", "autobind-decorator": "^2.4.0", "bootstrap": "^4.6.0", "core-js": "^2.5.4", "file-saver": "^2.0.2", "gulp-cli": "^2.3.0", "json-bigint": "^1.0.0", "jsrsasign": "^10.3.0", "lodash": "4.17.10", "ng-simple-slideshow": "^1.2.4", "ng2-scroll-to-el": "^1.2.1", "ng2-search-filter": "^0.4.7", "ngx-filter-pipe": "^2.1.2", "ngx-logger": "3.3.11", "ngx-order-pipe": "^2.0.1", "ngx-pagination": "^3.2.0", "pagination": "file:src/app/packages/pagination-0.0.1.tgz", "rxjs": "7.3.0", "rxjs-compat": "^6.3.2", "sass": "^1.36.0", "single-spa": "^5.9.2", "single-spa-angular": "^5.0.2", "systemjs": "^6.8.3", "true-case-path": "^1.0.3", "tslint": "^6.0.0", "xlsx": "^0.17.1", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-builders/custom-webpack": "^12.1.1", "@angular-devkit/build-angular": "^12.2.2", "@angular-eslint/builder": "12.3.1", "@angular-eslint/eslint-plugin": "12.3.1", "@angular-eslint/eslint-plugin-template": "12.3.1", "@angular-eslint/schematics": "12.3.1", "@angular-eslint/template-parser": "12.3.1", "@angular/cli": "^12.2.2", "@angular/compiler-cli": "^12.2.3", "@angular/language-service": "^12.2.3", "@ng-bootstrap/ng-bootstrap": "^10.0.0", "@types/bootstrap": "^4.1.2", "@types/jasmine": "2.8.6", "@types/jasminewd2": "2.0.3", "@types/lodash": "4.14.110", "@types/node": "14.6.2", "@typescript-eslint/eslint-plugin": "4.28.2", "@typescript-eslint/parser": "4.28.2", "await": "^0.2.6", "cheerio": "^1.0.0-rc.2", "codelyzer": "~4.2.1", "eslint": "^7.26.0", "font-awesome": "^4.7.0", "fs-promise": "^2.0.3", "gulp": "^4.0.2", "gulp-inline-css": "^3.3.0", "gulp-inline-source": "^4.0.0", "htmlhint-ng2": "0.0.13", "husky": "^1.3.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "^6.3.4", "karma-chrome-launcher": "^2.2.0", "karma-coverage-istanbul-reporter": "^2.1.1", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "karma-junit-reporter": "^1.2.0", "mediaquery-text": "1.0.7", "ng-bullet": "^1.0.3", "protractor": "^5.4.2", "puppeteer": "^1.14.0", "sonar-scanner": "^3.1.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "tslint-sonarts": "^1.9.0", "typescript": "^4.3.5" }en mi caso fueron dos (!) CssMinimizerPlugins dentro de singleSpaWebpackConfig.optimization.minimizer/ uno apuntando solo a css y otro apuntando a css|scss|sass|less|styl
He comprobado la configuración del webpack angular 11 y no tiene CssMinimizerPlugins para css|scss|sass|less|styl
también he comprobado el ayudante de singleSpaAngularWebpack. y no agrega este plugin
mi solución para excluir CssMinimizerPlugins para css|scss|sass|less|styl:
singleSpaWebpackConfig.optimization.minimizer = singleSpaWebpackConfig.optimization.minimizer .filter(plugin => plugin.constructor.name !== 'CssMinimizerPlugin' || plugin.options?.test?.toString().indexOf('less') === -1);También me enfrenté a este problema. Parece que hubo algunos cambios en ng serve . Ahora la compilación de producción es la configuración predeterminada.
Debe agregar las opciones de desarrollo en el nodo de compilación y servicio en angular.json
// >> projects[YOUR_PROJECT_NAME].architect.build.configurations "configurations": { "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true }, // >> projects[YOUR_PROJECT_NAME].architect.serve "serve": { "defaultConfiguration": "development", "configurations": { "development": { "browserTarget": "YOUR_PROJECT_NAME:build:development" },Yo tuve el mismo problema. Debe cambiar la importación de 'assets/.../variables.scss' a './assets/.../variables.scss'. En mi caso estaba en styles.scss pero puede estar en cada archivo .scss.
Intente deshabilitar el motor Ivy en el archivo tsconfig.json :
En caso de que esté utilizando algún paquete obsoleto que no sea compatible con Ivy.
"angularCompilerOptions": {"enableIvy": false}O, intentémoslo ejecutando los siguientes comandos uno por uno:
En caso de que esté actualizando Angular 6 a Angular 12 directamente, podría haber algunos problemas.
ng update @angular/core@7 @angular/cli@7 --force ng update @angular/core@8 @angular/cli@8 --force ng update @angular/core@9 @angular/cli@9 --force ng update @angular/core@10 @angular/cli@10 --force ng update @angular/core@11 @angular/cli@11 --force ng update @angular/core@12 @angular/cli@12 --forceO bien, ejecute simplemente el siguiente comando:
ng update @angular/core --forceEstaba teniendo el mismo problema, descubrí que, en mi caso, la configuración de activos en angular.json era la culpable. Compruebe este fragmento de código de la configuración:
"architect": { "build": { "builder": "ngx-build-plus:build", "options": { "aot": true, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico" ] } } Dentro de la carpeta src/assets había un montón de código de hoja de estilo, scss , less , css y parece que el Minificador de CSS simplemente intenta manejar todo lo que hay allí como CSS simple. La solución es eliminar de estos activos cualquier hoja de estilo no procesada y simplemente dejarla en la configuración de styles en angular.json . Eso funcionó para mí, ¡espero que te ayude a ti también!
En mi opinión, el problema proviene de los archivos de configuración relacionados con la arquitectura single-spa-angular , aunque el error simplemente dice que:
¡Estoy tratando de minimizar los archivos Sass css en su proyecto, pero se desconoce la sintaxis! ¡Quizás no sepa nada sobre la sintaxis de los archivos Sass!
Como no podemos reproducir el problema y encontrar el origen de la advertencia en plataformas SPA con varios archivos de configuración es un trabajo difícil, pero hay una manera directa de encontrar el problema o reproducir el proyecto en su propia máquina de inmediato. está comparando o bifurcando el repositorio single-spa-angular que está hecho para Angular 12. La migración de Angular 6 a 12 tiene algunas trampas en sí misma, sin embargo, también está tratando de mantener dicha biblioteca con comportamientos ocultos.
Como ya se dijo, el complemento espera CSS y no SCSS como entrada: https://webpack.js.org/plugins/mini-css-extract-plugin/
El angular.json habría sido bastante relevante...
En mi package.json node-sass faltaba.
Entonces, después de instalar la última versión de node-sass
todos mis errores relacionados con CSS se resolvieron, por favor intente y manténganos informados.
¡Esta solución debería funcionar!
npm install node-sass@latestSu problema está relacionado con el procesamiento del archivo scss. Este problema se detalla en el 67607413 . En breve, si los archivos scss se eliminan o se omiten de la carpeta de activos, este problema se resolverá. Preferí omitir los archivos SCSS.
"assets": [ "src/favicon.ico", { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.scss"], "output": "/assets/" }, ... ]