Question

将Angular升级到7.2.6后，我可以使用ng build成功构建，但是当我运行ng test时，出现以下错误。我尝试调整styles.css文件中angular.json的路径，但仍然收到相同的错误。我不知所措。我也在使用Ionic 4。

ERROR in multi ./styles.css
Module not found: Error: Can't resolve '/Users/zsoflin/Documents/GitHub/Layer/styles.css' in '/Users/zsoflin/Documents/GitHub/Layer'
resolve '/Users/zsoflin/Documents/GitHub/Layer/styles.css' in '/Users/zsoflin/Documents/GitHub/Layer'
  using description file: /Users/zsoflin/Documents/GitHub/Layer/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zsoflin/Documents/GitHub/Layer/package.json (relative path: ./styles.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/zsoflin/Documents/GitHub/Layer/styles.css.js doesn't exist
      as directory
        /Users/zsoflin/Documents/GitHub/Layer/styles.css doesn't exist
[/Users/zsoflin/Documents/GitHub/Layer/styles.css]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.ts]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.tsx]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.mjs]
[/Users/zsoflin/Documents/GitHub/Layer/styles.css.js]
 @ multi ./styles.css styles[0]

我的package.json依赖项：

"dependencies": {
    "@angular/animations": "^7.2.6",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.6",
    "@angular/core": "^7.2.6",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.2.6",
    "@angular/http": "^7.2.6",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.6",
    "@angular/platform-browser-dynamic": "^7.2.6",
    "@angular/pwa": "^0.13.1",
    "@angular/router": "^7.2.6",
    "@angular/service-worker": "^7.2.6",
    "@capacitor/android": "^1.0.0-beta.17",
    "@capacitor/cli": "^1.0.0-beta.17",
    "@capacitor/core": "^1.0.0-beta.17",
    "@capacitor/ios": "^1.0.0-beta.17",
    "@firebase/app-types": "^0.3.4",
    "@firebase/messaging": "0.3.4",
    "@ionic-native/core": "^5.0.0-beta.22",
    "@ionic-native/firebase": "^5.2.0",
    "@ionic-native/splash-screen": "^5.2.0",
    "@ionic-native/status-bar": "^5.2.0",
    "@ionic/angular": "^4.0.2",
    "@ionic/ng-toolkit": "1.1.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/stripe": "^5.0.25",
    "angular2-text-mask": "^9.0.0",
    "angular2-uuid": "^1.1.1",
    "angularfire2": "^5.1.1",
    "core-js": "^2.5.3",
    "firebase": "^5.8.4",
    "firebaseui": "^3.5.2",
    "hammerjs": "^2.0.8",
    "ionicons": "^4.5.5",
    "ng-animate": "^0.3.4",
    "ng-pipes": "^0.1.2",
    "ng-stripe-checkout": "^1.0.4",
    "ngx-color": "^2.0.5",
    "ngx-device-detector": "^1.3.5",
    "ngx-papaparse": "^3.0.0",
    "ngx-stripe": "^6.0.0-rc.0",
    "node-sass": "^4.10.0",
    "rxjs": "6.4.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.7.5",
    "@angular-devkit/build-angular": "^0.13.3",
    "@angular-devkit/core": "^0.7.5",
    "@angular-devkit/schematics": "^0.7.5",
    "@angular/cli": "^7.3.3",
    "@angular/compiler": "^7.2.6",
    "@angular/compiler-cli": "^7.2.6",
    "@angular/language-service": "^7.2.6",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.5.8",
    "codelyzer": "^4.4.4",
    "css-loader": "^2.1.0",
    "firebase-tools": "^6.4.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "modules": "^0.4.0",
    "protractor": "^5.4.1",
    "style-loader": "^0.23.1",
    "ts-node": "^7.0.1",
    "tslint": "~5.11.0",
    "typescript": "^3.2.4"
  }

我的test config文件中的angular.json：

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              "src/main-sw.js",
              "src/firebase-messaging-sw.js",
              "src/manifest.webmanifest"
            ]
          }
        },

Answer 1

似乎正在尝试从architect> build> options> styles（angular.json）获取样式。只需将样式复制到Architect> test > options>样式，然后再次运行测试即可。它对我有用！

尝试执行ng test时在multi styles.css中接收到“ ERROR”

1 个答案: