-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migration angular 11 -> 12 causing Unknown error from PostCSS plugin #20967
Comments
Look like you might need to delete the lock file.
|
I use yarn. I do not have package-lock.json. Removing yarn.lock breaks yarn. |
How does it break From the errors is looks like the |
I completely rebuild package.json and yarn.lock from scratch. |
Hi, how did you manage to resolve this? I tried everything. Deleted yarn.lack and node_modules. Nothing works. I even made a dependency on postcss@7 but, guess what - same error!!! Please, help. |
I generated a new angular project and copied the package.json and yarn.lock into my existing project. |
Hi, are you able to provide the delta here? |
We're getting this as well. I've tried deleting node_models and package.lock to no avail. It's also only failing for one of our apps in a multi app build. the I can't find any dependencies out side of angular.
The start of the build shows this:
And then later fails with this.
|
This is what helped me: 1st repo - deleted 2nd repo - as above, + had to point |
Hi, Migrated from angular 11 to 12 recently. Fixed few of the broken css files. But then got caught with this same error. Tried everything suggested here(Deleted package-lock.json, node_modules) , Nothing worked. Can anyone help? |
I have a bit similar issue, i got
on each of my scss files, after updating to angular 12 |
@yehorlitsov me too |
Same issue for me. Tried deleting package-lock.json and node_modules, also tried forcibly installing |
The issue seems to be related to the file .browserslistrc, renamed from browserlist during the upgrade migration. |
I have the same issue as @pietschy and .browserslistrc has nothing to do with it. EDIT: Fixed it for me! |
Hi @alexhelsana, my issue was also a scss compile problem, one of the material functions was returning null in some cases (but I never got to the bottom of it) but was able to work around it. I did raise another issue for it here: #21055 |
I was able to fix this issue by downgrading autoprefixer version to 9.0.0
|
This worked for me. I had a similiar erorr where I'd get an error due to Kendo themes crashing the build with syntax error. |
Yep, I can confirm the .browserlistrc fix from @phillwatson corrects the problem in my case to. Thanks @phillwatson! |
Same for me: Updating the .browserlistrc file solved the problem. I had tried a bunch of other things, some of which are talked about here, before finding this discussion. Thanks @phillwatson! |
While creating a .browserlistrc file solved the issue during runtime, building still fails for me. I didn't have autoprefixer as a dependency before, and adding it didn't make a difference. I removed both node_modules and my yarn.lock file as well. |
Updating the > npm ls autoprefixer
+-- @angular-devkit/[email protected]
| `-- [email protected]
| `-- [email protected] |
Adding .browserslistrc also worked for me. I also had to rename browserslist so it wouldn't get picked up during ng serve. |
This solved my problem, thanks @phillwatson @chaintip |
npm i browserslist@latest |
This solved my problem, |
Worked for me also. This is the default
|
This solution worked for me. Thanks @freshekt |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
I have migrated from Angular 11 to Angular 12.
I use Angular Material.
After the migration a 'ng serve' generates many errors:
Secondly additional errors are reported:
I see in yarn.lock that
"@angular-devkit/[email protected]": has dependencies:
postcss "8.3.0"
postcss-import "14.0.1"
postcss-loader "5.2.0"
postcss-preset-env "6.7.0"
I have installed the latest node: v14.17.0 (mentioned in #20903)
I have deleted the node_modules and downloaded all package.
I have no clue what is wrong.
Anyone any idea?
Angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"platform-ui": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/style"
]
},
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "platform-ui:build"
},
"configurations": {
"production": {
"browserTarget": "platform-ui:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "platform-ui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles",
"src/assets/style",
"src/assets/style/font",
"src/assets/style/overrides",
"src/assets/style/mixins",
"src/assets/style/variables"
]
},
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": []
}
}
}
},
"platform-ui-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "platform-ui:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "platform-ui",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": "e7857621-5b3e-4805-8f2d-f407b5402ed0"
}
}
package.json:
{
"name": "ui-client",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",
"test": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@angular/animations": "12.0.2",
"@angular/cdk": "12.0.2",
"@angular/common": "12.0.2",
"@angular/compiler": "12.0.2",
"@angular/core": "12.0.2",
"@angular/forms": "12.0.2",
"@angular/material": "12.0.2",
"@angular/platform-browser": "12.0.2",
"@angular/platform-browser-dynamic": "12.0.2",
"@angular/platform-server": "12.0.2",
"@angular/router": "12.0.2",
"@fortawesome/fontawesome-free": "5.15.3",
"@turf/turf": "5.1.6",
"ag-grid-angular": "25.2.0",
"ag-grid-community": "25.2.1",
"angular-pipes": "10.0.0",
"aws-sdk": "2.907.0",
"classlist.js": "^1.1.20150312",
"js-yaml": "3.14.1",
"jsts": "2.0.8",
"lodash-es": "4.17.21",
"moment": "2.29.1",
"ngx-clipboard": "14.0.1",
"ngx-toastr": "13.2.1",
"normalize-scss": "^7.0.0",
"rxjs": "6.6.7",
"tslib": "^2.0.0",
"vkbeautify": "^0.99.3",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "12.0.2",
"@angular/cli": "12.0.2",
"@angular/compiler-cli": "12.0.2",
"@angular/language-service": "12.0.2",
"@types/core-js": "2.5.4",
"@types/jasmine": "3.7.4",
"@types/js-yaml": "3.12.1",
"@types/lodash": "4.14.169",
"@types/node": "15.3.0",
"@types/vkbeautify": "0.99.2",
"codelyzer": "6.0.2",
"jasmine-core": "3.7.1",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-htmlfile-reporter": "0.3.8",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "1.6.0",
"karma-parallel-2": "0.3.2",
"license-checker": "25.0.1",
"protractor": "~7.0.0",
"ts-node": "^8.10.2",
"tslint": "6.1.3",
"typescript": "4.2.4",
"webpack-bundle-analyzer": "4.4.2"
}
}
The text was updated successfully, but these errors were encountered: