Angular 14 Error: Transform failed with 1 error: ERROR: Unte

Question

当运行ng server时，我得到以下结果:

*。/src/主要。ts -错误:模块构建失败(从/node_modules/@ngtools webpack/src/常春藤/index.js)/.component.scss:17:100: ERROR: unended string token

*。/src/polyfills。ts ' -错误:模块构建失败(从/node_modules/@ngtools webpack/src/常春藤/index.js)/.component.scss:17:100: ERROR: unended string token

这个有棱角的版本

Angular 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/图表14.0.6"@angular/cdk                    14.0.5"@angular/材料                14.0.5安装7.1.1 @nguniversal/express-engine@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

对于降落在那里的人，暂时在你的角中设置optimization: false。json文件。将允许看到真正的错误。

在我的例子中，它是不支持的样式表导入。但它可以是Webpack sass-loader抛出的任何错误。

Answer 2

我添加了" path/name ";在angular.json->projects->project name ->architect->build->options->styles中，我可以找到确切的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) {
│                          ^
╵
srcappcomponentsfanfan.component.scss 89:26  root stylesheet

Answer 3

执行以下命令

npx browserslist --update-db

Answer 4

我将angular项目从5.2升级到14，我看到了这个错误，但它没有显示错误来自哪个文件

我在angular.json文件中尝试了optimization: false，但它没有工作，因为升级将.angular-cli.json转换为angular.json和json结构似乎是错误的。

我用angular创建了一个新的示例项目，并将angular.json文件从那里移动到升级的项目文件夹，然后更改optimization: false

这次显示的错误与行和文件名有关。我在项目css文件中解决了这些错误，并能够做到ng serve

Answer 5

一种修复方法可能是在angular.json文件中将optimization密钥临时设置为false。这将帮助您查看是否报告了真正的问题。

如果这没有改变任何东西，那么看看您的导入。我们遇到了一个问题，即tsconfig.json文件中的paths选项之一已在scss文件中使用:

@import '@shared/scss/core'

但是webpack会忽略SCSS文件的@shared，除非你使用TsconfigPathsWebpackPlugin插件。

简单的解决方案是使用将其更改为这样，完全绕过tsconfig文件中paths对这个SCSS文件的需求:

@import 'app/shared/scss/core'

Answer 6

对于仍然有这个问题的人，你可以在你的angular中设置optimization: false。. json文件并重新构建以查看详细的真实错误，然后将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%;
}
}

是的，空格后的'和'解决问题:)