Angular 14 错误：转换失败，出现 1 个错误：错误：未终止的字符串标记

Question

运行 ngserve 时，我得到以下结果：

*./src/main.ts - 错误：模块构建失败 （来自./node_modules/@ngtools/webpack/src/ivy/index.js） ../.component.scss:17:100:错误：未终止的字符串标记

*./src/polyfills.ts` - 错误：模块构建失败 （来自./node_modules/@ngtools/webpack/src/ivy/index.js） ../.component.scss:17:100:错误：未终止的字符串标记

这个有角度的版本

    角度 CLI：14.0.6
    节点：16.16.0
    包管理器：NPM 8.14.0
    操作系统：win32 x64
    
    角度：14.0.6
    
    套餐版本
    -------------------------------------------------- --------
    @Angular-devkit/建筑师0.1400.6
    @Angular-devkit/build-Angular 14.0.6
    @Angular-devkit/核心 14.0.6
    @angular-devkit/schematics 14.0.6
    `@角度/cdk 14.0.5`
    @角度/材料14.0.5
    @nguniversal/express-engine 7.1.1
    @schematics/角度14.0.6
    `rxjs 6.6.7`
    打字稿 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

对于登陆那里的任何人，请在 angular.json 文件中临时设置

optimization: false

。这将允许看到真正的错误。

就我而言，这是不受支持的样式表导入。但它可能是 Webpack sass-loader 抛出的任何错误。

Answer 2

我在 angular.json->projects->project name->architect->build->options->styles 中添加了 scss 文件的“路径/名称”，如下所示，然后我可以找到确切的 scss 问题。

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

然后我可以看到 Sass 错误如下。

./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

Answer 3

运行以下命令

npx browserslist --update-db

Answer 4

我将 Angular 项目从 5.2 升级到 14，我看到了这个错误，并且没有显示错误来自哪个文件。

我在

optimization: false

文件中尝试了

angular.json

，但由于升级将

.angular-cli.json

转换为

angular.json

并且 json 结构似乎是错误的，因此它不起作用。

我使用 Angular 创建了一个新的示例项目，并将

angular.json

文件从那里移动到升级后的项目文件夹，然后更改了

optimization: false

这次显示的错误特定于行和文件名。我解决了项目 css 文件中的这些错误，并且能够执行

ng serve

Answer 5

一个解决方法可能是暂时将

optimization

文件中的

false

键设置为

angular.json

。这将帮助您查看是否报告了真正的问题。

如果这没有改变任何事情，那么请查看您的导入。我们遇到了一个问题，即

paths

文件中的

tsconfig.json

选项之一已在 scss 文件中使用：

@import '@shared/scss/core'

但是对于 SCSS 文件，webpack 会忽略这个

@shared

，除非您使用

TsconfigPathsWebpackPlugin

插件。

简单的解决方案是使用将其更改为此，完全绕过此 SCSS 文件的

paths

文件中的

tsconfig

的需要：

@import 'app/shared/scss/core'

Answer 6

对于仍然存在此问题的任何人，您可以在 angular.json 文件中设置

optimization: false

并重建以查看真正的错误及其详细信息，然后将

optimization: true

放回去。

对我来说，错误是我有一个未定义的 $dark-color 变量。

Answer 7

在 Angular 14 中也有同样的错误： 不正确：

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

正确：

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

是的，“and”后面的空格解决了问题:)