CODEWITHSUNDEEP
javascriptangulartypescriptnpmangular-cli
avishekdr
avishekdr

Reputation: 1068

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

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.

Upvotes: 18

Views: 41344

Answers (7)

Prasanna S
Prasanna S

Reputation: 61

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.

Upvotes: 6

user2001
user2001

Reputation: 1

Just change the directory in the templateUrl to yourcomponent.html and write html in that directory

Upvotes: -1

Jihed Ben Zarb
Jihed Ben Zarb

Reputation: 37

i solved this problem by checking the path pricesily because i was working on projects and there were many files , so my path was needing an additional /.. /

Upvotes: 1

Haenah
Haenah

Reputation: 51

Just misspelling your styleUrls

use scss instead of css

enter image description here

Upvotes: 5

Zamman Asif
Zamman Asif

Reputation: 1

For Me I already dont have scss or CSS file in my folder so I just remooved the line styleUrls: [ './hero-detail.component.scss' ]

It worked for me.

Upvotes: 0

Terrance Khumalo
Terrance Khumalo

Reputation: 71

If your using SCSS in your project change your styleUrls from:

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

To:

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.scss' ] //Notice
})

That worked for my project

Upvotes: 1

Neutrino
Neutrino

Reputation: 9604

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.

Upvotes: 44

Related Questions