typescript 错误:.css中的加载程序没有返回Angular 12.1.1中的字符串

ccgok5k5  于 2023-02-13  发布在  TypeScript
关注(0)|答案(6)|浏览(122)

我已经创建了一个新项目,但每当我编译得到2下面的错误消息:
错误:未找到模块:错误:无法解析"C:\用户\Avishek\文档\实践\前端"中的"C:/用户/Avishek/文档/实践/前端/src/应用程序/页面/管理/身份验证/身份验证.组件. css"
以及
错误:加载程序"C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/身份验证/身份验证组件。
我从来没有遇到过这种类型的问题之前,甚至几天前,我创建了一个项目与相同的Angular 版本仍然没有得到。下面是我的tsconfig.jsonpackage.json文件分别。

    • 系统配置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
  }
}
    • 包. 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"
  }
}

请帮助解决这是什么类型的问题,以及如何解决它。

qojgxg4l

qojgxg4l1#

在我的例子中,问题是我的项目被配置为使用scss文件,但我从一个使用css文件的示例中复制了一些代码。

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

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

dluptydi

dluptydi2#

只是拼错了你的styleUrls
使用scss代替css

pgccezyw

pgccezyw3#

如果在项目中使用SCSS,请将styleUrls从:

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

收件人:

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

对我的项目很有效

xkrw2x1b

xkrw2x1b4#

我通过检查路径来解决这个问题,因为我正在处理项目,有很多文件,所以我的路径需要一个额外的/../

lmvvr0a8

lmvvr0a85#

对我来说,我已经没有scss或CSS文件在我的文件夹中,所以我只是removed行styleUrls:[. "/英雄-详细信息.组件. scss "]
对我很有效。

omjgkv6w

omjgkv6w6#

只需将templateUrl中的目录更改为yourcomponent.html并在该目录中写入html即可

相关问题