20

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

thank you for your help

Thelopera
  • 305
  • 1
  • 2
  • 8

7 Answers7

39

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.

Mistic
  • 1,377
  • 2
  • 13
  • 27
  • 1
    Amazing. I spent 4 hours yesterday fixing the same weird issue. Disabling the `optimization` temporarily gave me the exact issue. Thanks a lot! – Shashank Agrawal Nov 14 '22 at 06:08
  • 1
    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 :/ – Georgi Nov 23 '22 at 09:11
  • 8
    it doesn't give me the exact issues. Though optimization is set to false, same errors are occured. – persec10000 Dec 07 '22 at 17:51
  • Thanks a lot! When I disabled the optimization, the terminal shows the correct error files!!!!! – Evan Jun 13 '23 at 04:49
10

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
persec10000
  • 820
  • 2
  • 10
  • 17
5

Run the following command

npx browserslist --update-db
RicardoVallejo
  • 793
  • 7
  • 11
  • 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 – S. FRAJ Oct 12 '22 at 09:17
  • Or if using yarn: `yarn dlx browserslist --update-db` – crimbo Oct 20 '22 at 00:01
1

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

Abhinandhan reddy
  • 11
  • 2
1

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'
Paul F. Wood
  • 1,453
  • 16
  • 19
0

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.

Mohamed BEN KHOUYA
  • 58
  • 5
0

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

Soso Surguladze
  • 1