Angular 14 Error: Transform failed with 1 error: ERROR: Unterminated string token

For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.

In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.

I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.

{
 ...
 "projects": {
 ...
 "my-project": {
 ...
 "architect": {
 "build": {
 ...
 "options": { 
 ...
 "styles": [
 ...
 "src/scss/style.scss",
 "src/app/components/playlistDetail/playlist-detail.component.scss",
 ...
 ]
 }
 },

Then I could see Sass error as following.

./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
 ╷
89 │ @media screen and(max-width: 767px) {
 │ ^
 ╵
 src\app\components\fan\fan.component.scss 89:26 root stylesheet

Run the following command

npx browserslist --update-db

One fix might be to temporarily set the optimization key to false in the angular.json file. This will help you to see if the real issue is then reported.

If that doesn't change anything, then have a look at your imports. We had an issue whereby one of the paths options within the tsconfig.json file had been used within a scss file:

@import '@shared/scss/core'

But this @shared is ignored for SCSS files by webpack unless you use the TsconfigPathsWebpackPlugin plugin.

The simple solution was to use change it to this instead, bypassing the need for paths in the tsconfig file at all for this SCSS file:

@import 'app/shared/scss/core'

I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.

I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.

I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false

This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve

For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.

for me the error was that i had an $dark-color variable that is undefined.

in angular 14 there was same error here: incorrect:

.user {
 width: calc(100% / 3);
 min-width: 340px;
 float: left;
 @media screen and(max-width: 1100px) {
 width: calc(100% / 2);
 }
 @media screen and(max-width: 735px) {
 width: 100%;
 }
 }

correct:

.user {
 width: calc(100% / 3);
 min-width: 340px;
 float: left;
 @media screen and (max-width: 1100px) {
 width: calc(100% / 2);
 }
 @media screen and (max-width: 735px) {
 width: 100%;
 }
 }

yeah, white space after 'and' resolve problem :)

I got the same error, It resolved for me when I removed comments in my style sheet

• css
• angular
• sass
• node-sass