模块构建失败（来自 ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js）

Question

ng 服务错误更新后 angular 11 到 12，具有以下详细信息：

    ./src/app/ngx-admin-lte/src/layouts/login/login.component.ts-1.css!=!./node_modules/@ngtools/webpack/src/loaders/inline-resource.js!./src/app/ngx-admin-lte/src/layouts/login/login.component.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
    SyntaxError
    
    (1:1) /home/hp/Drive1/Project/Angular/iworklist/src/app/ngx-admin-lte/src/layouts/login/login.component.ts Unknown word
    
    > 1 | ./login.css
        | ^

login.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-layout-login',
  styles: ['./login.css'],
  templateUrl: './login.component.html'
})
export class LayoutLoginComponent implements OnInit, OnDestroy {

  constructor( ) { }

  public ngOnInit() {
    window.dispatchEvent( new Event( 'resize' ) );
    document.body.className = 'hold-transition login-page';
  }

  public ngOnDestroy() {
    document.body.className = '';
  }
}

login.css（空）：

package.json:


    {
      "name": "iworklist",
      "version": "0.1.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~12.2.16",
        "@angular/cdk": "~12.2.13",
        "@angular/common": "~12.2.16",
        "@angular/compiler": "~12.2.16",
        "@angular/core": "^12.2.16",
        "@angular/forms": "~12.2.16",
        "@angular/localize": "^12.2.16",
        "@angular/material": "^12.2.13",
        "@angular/material-moment-adapter": "^12.2.13",
        "@angular/platform-browser": "~12.2.16",
        "@angular/platform-browser-dynamic": "~12.2.16",
        "@angular/router": "~12.2.16",
        "@ng-select/ng-select": "^7.4.0",
        "@types/crypto-js": "3.1.39",
        "admin-lte": "2.3.11",
        "ag-grid-angular": "^25.1.0",
        "ag-grid-community": "^25.1.0",
        "ag-grid-enterprise": "^25.1.0",
        "angular-highcharts": "^12.0.0",
        "big.js": "^6.0.3",
        "bn-ng-idle": "^1.0.1",
        "bootstrap": "^3.4.1",
        "core-js": "^3.9.1",
        "crypto-js": "3.1.8",
        "font-awesome": "^4.7.0",
        "highcharts": "^8.2.2",
        "ionicons": "^3.0.0",
        "jquery": "^3.6.0",
        "jquery-slimscroll": "^1.3.8",
        "moment": "^2.29.1",
        "rxjs": "^6.6.6",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.5"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~12.2.16",
        "@angular/cli": "^12.2.16",
        "@angular/compiler-cli": "~12.2.16",
        "@angular/language-service": "~12.2.16",
        "@types/jasmine": "~3.6.0",
        "@types/jasminewd2": "^2.0.8",
        "@types/node": "^12.20.6",
        "codelyzer": "^6.0.0",
        "jasmine-core": "~3.10.1",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~6.3.17",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.7.0",
        "postcss-loader": "~3.0.0",
        "protractor": "~7.0.0",
        "ts-node": "~7.0.0",
        "tslint": "~6.1.0",
        "typescript": "~4.3.5"
      }
    }

有人可以帮我解决这个错误吗？

Answer 1

终于修好了。

使用与组件(ts) 名称相同的名称。示例：
将 login.css 重命名为 login.component.css

Example

模块构建失败（来自 ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js）

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js)

sass

npm

typescript

webpack

angular