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

Question

When running ng serve I have this result:

*./src/main.ts - Error: Module build failed (from./node_modules/@ngtools/webpack/src/ivy/index.js) ../.component.scss:17:100: ERROR: Unterminated string token

*./src/polyfills.ts` - Error: Module build failed (from./node_modules/@ngtools/webpack/src/ivy/index.js) ../.component.scss:17:100: ERROR: Unterminated string token

This angular version

    Angular CLI: 14.0.6
    Node: 16.16.0
    Package Manager: NPM 8.14.0
    OS: win32 x64
    
    Angular: 14.0.6
    
    Package                         Version
    ---------------------------------------------------------
    @angular-devkit/architect       0.1400.6
    @angular-devkit/build-angular   14.0.6
    @angular-devkit/core            14.0.6
    @angular-devkit/schematics      14.0.6
    `@angular/cdk                   14.0.5`
    @angular/material               14.0.5
    @nguniversal/express-engine     7.1.1
    @schematics/angular             14.0.6
    `rxjs                           6.6.7`
    typescript                      4.6.4

/.component.scss

input[type=text]:disabled {
  color: black;
}

.search-row {
  .form-group > label {
    font-size: 1.1em !important;
      color: black;
  }
}

.mat-table {
  th.mat-header-cell {
    font-size: 1.1em !important;
      color: black;
  }
}//<< here line 17.


#block {
  margin: 0% 10%;
}
...

Meadors

What does line 17 from ../.component.scss look like? (There are some strange string tokens in your posted information that make me uncomfortable, but are probably unrelated. *./src/polyfills.ts[string token] Error: Module build failed, for example) – Lemuelah

I solved it, I think it's about my angular.json file. – Meadors

Would you mind sharing the changes you did in the angular.json file? – Vaunt

@Meadors can you share the solution – Paradies

I new my angular.jsonfile from ng new – Meadors

Answer 1

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.

Jitters

Amazing. I spent 4 hours yesterday fixing the same weird issue. Disabling the optimization temporarily gave me the exact issue. Thanks a lot! – Electorate

Thanks for the hint .... I think we hit some Angular compiler bug - hiding the root cause of the problem. After doing your trick I found that my SCSS has a bad import :/ – Caraviello

it doesn't give me the exact issues. Though optimization is set to false, same errors are occured. – Grandaunt

Thanks a lot! When I disabled the optimization, the terminal shows the correct error files!!!!! – Lifework

Please try this to solve the issue. #71916958 – Wheelwright

Answer 2

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

Grandaunt

This solution helped to find out the error in the scss file. Thank you so much for sharing. – Cacophonous

This was the effective solution to diagnose the real issue in my case. Line 17 of my .scss file in my error was whitespace between two scss rules, and deleting and re-adding the whitespace didn't help. When I plugged my stylesheets into the styles property, it turned out I hadn't properly updated all my scss stylesheet imports after renaming a higher-level folder. – Gile

Answer 3

Run the following command

npx browserslist --update-db

My

Latest version: 1.0.30001418 Installed version: 1.0.30001418 caniuse-lite is up to date caniuse-lite has been successfully updated No target browser changes – Damask

Or if using yarn: yarn dlx browserslist --update-db – Betulaceous

Answer 4

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'

Breadth

Answer 5

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

Suellensuelo

Answer 6

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.

Essonite

Answer 7

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 :)

Oberon