将 Angular 升级到 7.2.6 后，我可以使用 ng build 成功构建，但是当我运行 ng test 时，出现以下错误。我已经尝试在我的 angular.json 文件中调整到 styles.css 的路径，但仍然收到相同的错误。我对正在发生的事情不知所措。我也在使用 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"
}
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"
]
}
},
最佳答案
看起来是在尝试从 architect > build > options > styles (angular.json) 获取样式。 只需将样式复制到 architect > test> options > styles 并再次运行测试。 它对我有用!
为了澄清，请确保在您的 angular.json 文件中，您的测试部分中的样式部分与您的构建部分相匹配(或者至少是有效的) 例如 angular.json:
关于angular - 尝试运行 ng 测试时收到 `ERROR in multi styles.css`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54832433/