27

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%;
}
...
Improve this question
5
  • 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) Commented Jul 20, 2022 at 14:45
  • I solved it, I think it's about my angular.json file. Commented Jul 21, 2022 at 1:16
  • 2
    Would you mind sharing the changes you did in the angular.json file? Commented Jul 28, 2022 at 13:01
  • @Thelopera can you share the solution Commented Sep 8, 2022 at 10:28
  • I new my angular.jsonfile from ng new Commented Sep 10, 2022 at 14:56

8 Answers 8

Reset to default
49

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Amazing. I spent 4 hours yesterday fixing the same weird issue. Disabling the optimization temporarily gave me the exact issue. Thanks a lot!
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 :/
it doesn't give me the exact issues. Though optimization is set to false, same errors are occured.
Thanks a lot! When I disabled the optimization, the terminal shows the correct error files!!!!!
Please try this to solve the issue. stackoverflow.com/questions/71916458/…
14

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
Improve this answer

2 Comments

This solution helped to find out the error in the scss file. Thank you so much for sharing.
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.
5

Run the following command

npx browserslist --update-db
Improve this answer

2 Comments

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
Or if using yarn: yarn dlx browserslist --update-db
2

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'
Improve this answer

Comments

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

Improve this answer

Comments

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.

Improve this answer

Comments

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

Improve this answer

Comments

0

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

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.