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%;
}
...

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.

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