Error: The loader in .css didn't return a string in Angular 12.1.1

Question

I have created a new project but whenever I am compiling getting the 2 below error messages:

Error: Module not found: Error: Can't resolve 'C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/authentication/authentication.component.css' in 'C:\Users\Avishek\Documents\practice\frontend'

and

Error: The loader "C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/authentication/authentication.component.css" didn't return a string.

I have never faced this type of issue before even few days back I created a project with the same angular version still did not get. Below is my tsconfig.json & package.json files respectively.

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"
  }
}

Please help out what type of issue is this and how can I solve it.

Answer 1

The problem in my case was that my project was configured to use scss files but that I had copied some code from a sample that used css files. So in one of my components I had:

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

The css file in the stypeUrls property was the cause of the error.

Answer 2

My project location was setup in a folder that had special character in the path. Hence the angular project build could not reach the .css file. The following is the before and after I altered the folder path

before  G:\Projects\C#\WebAPIProject\FrontEnd\AngularUI 
after   G:\Projects\CSharp\WebAPIProject\FrontEnd\AngularUI

I figured this out, when I tried to click the file path that was provided in the terminal window as the one that was causing the error and then click the prompt that says 'open file in editor'. This didn't open the file in the editor.