Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Angular 11: Production build Error: Expected a pseudo-class or pseudo-element #19561

Closed
Ronak-59 opened this issue Dec 7, 2020 · 5 comments · Fixed by #19568
Closed

Angular 11: Production build Error: Expected a pseudo-class or pseudo-element #19561

Ronak-59 opened this issue Dec 7, 2020 · 5 comments · Fixed by #19568
Labels
area: devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Milestone
Backlog

Comments

@Ronak-59
Copy link

Ronak-59 commented Dec 7, 2020

🐞 bug report

Affected Package

Not exactly sure.

Is this a regression?

This bug did not exist in Angular 6.

Description

Recently upgraded from Angular 6 to Angular 11 incrementally using https://update.angular.io. Everything went smooth and Angular runs locally using ng serve but when trying to build a production-build using ng serve --prod it gives just following error:

Error: Expected a pseudo-class or pseudo-element.

When using ng build --prod --verbose=true, it results in lot of logs similar to:

WARNING in Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt

WARNING in Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt

ERROR in Expected a pseudo-class or pseudo-element.
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--12-1!node_modules/postcss-loader/dist/cjs.js??ref--12-2!node_modules/@angular/material/prebuilt-themes/indigo-pink.css:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  42.5 KiB          
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 73 KiB [entry] [rendered]
     [24IM] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 70.5 KiB {0} [built]
         ModuleConcatenation bailout: Module uses module.id
         single entry !!/Users/ronak/Documents/Pistis/pistis-web/node_modules/css-loader/dist/cjs.js??ref--12-1!/Users/ronak/Documents/Pistis/pistis-web/node_modules/postcss-loader/dist/cjs.js??ref--12-2!/Users/ronak/Documents/Pistis/pistis-web/node_modules/@angular/material/prebuilt-themes/indigo-pink.css  mini-css-extract-plugin
     [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {0} [built]
         [only some exports used: default]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         harmony side effect evaluation ../../../css-loader/dist/runtime/api.js [24IM] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 2:0-82
         harmony import specifier ../../../css-loader/dist/runtime/api.js [24IM] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 3:30-57
    
    LOG from webpack.buildChunkGraph.visitModules
    <t> prepare: 0.013822ms
    <t> visiting: 0.013708ms
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--12-1!node_modules/postcss-loader/dist/cjs.js??ref--12-2!node_modules/@nebular/theme/styles/prebuilt/default.css:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  43.6 KiB          
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 220 KiB [entry] [rendered]
     [Hvlo] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@nebular/theme/styles/prebuilt/default.css 217 KiB {0} [built]
         ModuleConcatenation bailout: Module uses module.id
         single entry !!/Users/ronak/Documents/Pistis/pistis-web/node_modules/css-loader/dist/cjs.js??ref--12-1!/Users/ronak/Documents/Pistis/pistis-web/node_modules/postcss-loader/dist/cjs.js??ref--12-2!/Users/ronak/Documents/Pistis/pistis-web/node_modules/@nebular/theme/styles/prebuilt/default.css  mini-css-extract-plugin
     [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {0} [built]
         [only some exports used: default]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         harmony side effect evaluation ../../../../css-loader/dist/runtime/api.js [Hvlo] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@nebular/theme/styles/prebuilt/default.css 2:0-85
         harmony import specifier ../../../../css-loader/dist/runtime/api.js [Hvlo] ./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/postcss-loader/dist/cjs.js??ref--12-2!./node_modules/@nebular/theme/styles/prebuilt/default.css 3:30-57
    
    LOG from webpack.buildChunkGraph.visitModules
    <t> prepare: 0.014615ms
    <t> visiting: 0.011623ms

Angular version: 11 and Node version: 12.16.3

🌍 Your Environment

Angular Version:


Angular CLI: 11.0.3
Node: 12.16.3
OS: darwin x64

Angular: 11.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            11.0.3
@angular-devkit/schematics      11.0.3
@angular/cdk                    11.0.1
@angular/fire                   6.1.4
@angular/material               11.0.1
@schematics/angular             11.0.3
@schematics/update              0.1100.3
typescript                      4.0.5

Anything else relevant?
This bug did not exist in Angular 6 and we followed all the points in https://update.angular.io but still the production build is failing. Unfortunately, there's no specific file that is referred with the error logs even though verbose=true is mentioned. Dev mode working perfectly.
@JoostK JoostK transferred this issue from angular/angular Dec 7, 2020
@Ronak-59
Copy link
Author

Ronak-59 commented Dec 7, 2020

Thanks @JoostK for transferring this issue to appropriate repository!

@alan-agius4
Copy link
Collaborator

In this case we should produce an error with the offending file path.

@ngbot ngbot bot modified the milestone: needsTriage Dec 7, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Dec 7, 2020
@alan-agius4
Copy link
Collaborator

alan-agius4 commented Dec 8, 2020 •
edited

The error message 'Expected a pseudo-class or pseudo-element.' may suggest a syntax error of pseudo-classes in one of the CSS files.

Example having a space after the : like:

+ ul li:last-child {
- ul li: last-child {

I have a PR in fight to show the file that is causing the error #19568

@alan-agius4 alan-agius4 mentioned this issue Dec 8, 2020
Merged
clydin pushed a commit that referenced this issue Dec 8, 2020
@alan-agius4 @clydin
fix(@angular-devkit/build-angular): add file path in CSS optimization…
d3afdcc 
… exception

Closes #19561
clydin pushed a commit that referenced this issue Dec 8, 2020
@alan-agius4 @clydin
fix(@angular-devkit/build-angular): add file path in CSS optimization…
495bf64 
… exception

Closes #19561

(cherry picked from commit d3afdcc)
@Ronak-59
Copy link
Author

Ronak-59 commented Dec 8, 2020

Thanks, @clydin, and @alan-agius4 for the quick fix. However, I'd like to add that I had to make the same change in the JS file instead of the TS file from the PR commit.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): add file path in CSS optimization exception
2 participants
@Ronak-59 @alan-agius4