search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

Angular 14 build fails when importing css in source code from node modules #23273

Closed thaoula closed 2 years ago

thaoula commented 2 years ago

🐞 Bug report

Command (mark with an x)

Is this a regression?

Yes, this worked in Angular 13.3.10 and prior Yes, the previous version in which this bug was not present was: .... ### Description A clear and concise description of the problem... We are utilising 3rd party components Froala Editor and Fullcalendar where we import there css files in source code like the following - In the case of Froala we do the following ``` import 'froala-editor/css/plugins/draggable.css'; import 'froala-editor/css/plugins/table.css'; ``` In the case of Fullcalendar they may be doing inside their own component and the following issue has been added their repo - https://github.com/fullcalendar/fullcalendar/issues/6869 When running ng build you receive the following build error that look like the following - ``` ./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ``` ## 🔬 Minimal Reproduction

🔥 Exception or Error

Error




./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

./node_modules/froala-editor/css/plugins/table.css:7:0 - Error: Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

🌍 Your Environment




Angular CLI: 14.0.0
Node: 18.2.0 (Unsupported)
Package Manager: npm 8.9.0 
OS: darwin arm64

Angular: 14.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.0
@angular-devkit/build-angular   14.0.0
@angular-devkit/core            14.0.0
@angular-devkit/schematics      14.0.0
@angular/cdk                    13.0.0
@schematics/angular             14.0.0
rxjs                            7.5.5
typescript                      4.6.2

Anything else relevant?

alan-agius4 commented 2 years ago

This is expected and is one of the breaking changes in version 14 and pointed out in our release page.

We now issue a build time error when importing a CSS file as an ECMA module. This is non standard and Webpack specific feature and as such this feature was never supported by the Angular CLI.

oBusk commented 2 years ago

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

Hamarhu commented 2 years ago

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

Thank you! This was helpfull!

salimchemes commented 2 years ago

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here https://github.com/angular/angular-cli/issues/12552 but since importing css throws now an error they wont work anymore Thanks

oBusk commented 2 years ago

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here https://github.com/angular/angular-cli/issues/12552 but since importing css throws now an error they wont work anymore Thanks

I don't have solution for that. If anyone has a solution for it, I'd be happy to hear. But går us, those files are changed so rarely that i think it's fine

salimchemes commented 2 years ago

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here #12552 but since importing css throws now an error they wont work anymore Thanks

I don't have solution for that. If anyone has a solution for it, I'd be happy to hear. But går us, those files are changed so rarely that i think it's fine

I finally ended up adding a post build script to generate hashed files (with https://www.npmjs.com/package/hasha) https://github.com/angular/angular-cli/issues/12552#issuecomment-760508489

Then added a validation to consume hashed file when is a production build. Otherwise use not hashed ones.

To summarize

  1. added post build script is going to generate css hashed files and avoid caching issues
  2. added a validation to use these files when it is a production build
Delagen commented 2 years ago

@alan-agius4 I think it must be reopened because it is stable SASS functionality. When you compile static SASS files (specified in styles in angular.json) it has to work as documented.

alan-agius4 commented 2 years ago

It does work as documented unless there is a mistake, as such if you think it is incorrectly documented please provide a link where the docs are not correct.

Importing a Sass/CSS file inside your TypeScript/JavaScript file like an ECMA module is no not a standard functionality and as such this part is not supported.

Delagen commented 2 years ago

@alan-agius4 Yes. Sorry. Is is bug of @fullcalendar library

angular-automatic-lock-bot[bot] commented 2 years ago

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.