错误：.css 中的加载器未在 Angular 12.1.1 中返回字符串

Posted 2023-03-13

【中文标题】错误：.css 中的加载器未在 Angular 12.1.1 中返回字符串

【英文标题】：Error: The loader in .css didn't return a string in Angular 12.1.1

【发布时间】：2021-11-07 21:59:04

【问题描述】：

我创建了一个新项目，但每当我编译时都会收到以下 2 条错误消息：

错误：找不到模块：错误：无法解析 'C:\用户\Avishek\Documents\practice\frontend'

和

错误：加载程序“C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/authentication/authentication.component.css”没有返回字符串。

在几天前我从未遇到过此类问题，我创建了一个具有相同角度版本的项目仍然没有得到。下面分别是我的tsconfig.json & package.json 文件。

tsconfig.json

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": 
      "@directive/*": ["src/app/core/directives/*"],
      "@guard/*": ["src/app/core/guards/*"],
      "@interceptor/*": ["src/app/core/interceptors/*"],
      "@pipe/*": ["src/app/core/pipes/*"],
      "@service/*": ["src/app/core/services/*"],
      "@custom-validator/*": ["src/app/core/validators/*"],
      "@model/*": ["src/app/core/models/*"],
      "@store/*": ["src/app/core/store/*"],
      "@feature/*": ["src/app/features/*"],
      "@page/*": ["src/app/pages/*"],
      "@shared/*": ["src/app/shared/*"]
    
  ,
  "angularCompilerOptions": 
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false
  

package.json

  "name": "project",
  "version": "1.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~12.1.1",
    "@angular/cdk": "^12.2.4",
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/material": "^12.2.4",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@kolkov/angular-editor": "^1.2.0",
    "@ngxs/store": "^3.7.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/cli": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  

请帮忙看看这是什么类型的问题，我该如何解决。

【问题讨论】：

app.component.css 遇到同样的错误。我的应用程序甚至没有 app.component.css，因为我使用的是 scss 文件。

【参考方案1】：

我的问题是我的项目配置为使用scss 文件，但我从使用css 文件的示例中复制了一些代码。所以在我的一个组件中，我有：

@Component(
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
)

stypeUrls 属性中的css 文件是导致错误的原因。

【讨论】：

是的，我发现了，但即使我解决了它，它仍然给我一个错误。我如何修复是一件非常有趣的事情，我使用 CSS 作为我的样式格式创建了一个新项目，然后将我的 app 文件夹放入其中。现在 BOOM 一切都运行良好?。