我把我的应用升级到Angular 12.2.5
一切都进行得相对顺利，更新后我可以使用我的应用程序了。
然而，当我运行ng测试时，它出现了以下错误:
Error: Cannot find module 'node-sass'
它看起来来自karma -scss预处理器，特别是在它们的源代码中，我发现
var _nodeSass = require('node-sass');
我的理解是，Angular 12是为了使用新的sass实现(dart-sass)而构建的，而不是node-sass。至少当我更新并删除node-sass时，错误是这样说的。
我试着寻找其他scss预处理器插件，但所有的项目都被放弃了，一段时间没有更新。
有人能解决这个问题吗?是否有某种配置设置我需要改变?
我的Karma配置如下:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function(config) {
config.set({
basePath: '../..',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-scss-preprocessor')
],
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox', '--headless', '--window-size=1920,1080']
},
ChromeHeadless1920: {
base: 'ChromeHeadless',
flags: ['--window-size=1920,1080']
}
},
files: [
{ pattern: 'node_modules/jquery/dist/jquery.min.js', watched: false, included: true, nocache: false },
{ pattern: 'projects/shared-library/src/assets/css/styles.scss', included: true, watched: true },
{
pattern: 'projects/shared-library/src/assets/css/tinymce-custom-styling.css',
watched: true,
included: true
},
{ pattern: 'node_modules/@angular/cdk/overlay-prebuilt.css', included: true, watched: true },
{ pattern: 'node_modules/leaflet/dist/leaflet.css', included: true, watched: true },
{
pattern: 'node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css',
included: true,
watched: true
},
{
pattern: 'projects/shared-library/src/assets/icons/**',
watched: false,
included: false,
nocache: false,
served: true
},
// Commented the assets folder, as we only need the tinymce plugin which is included below
// {
// pattern: 'projects/shared-library/src/assets/**/*.js',
// watched: false,
// included: true,
// nocache: false,
// served: true
// },
// Only including the tinymce file, since we don't need anything else from there for the tests
// { pattern: 'node_modules/tinymce/**/*.*', watched: true, included: false, served: true },
{
pattern: 'projects/shared-library/src/assets/tinymce.min.js',
watched: true,
included: true,
served: true
},
{
pattern: 'node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css',
included: true,
watched: false
}
// { pattern: 'node_modules/tinymce/themes/**', watched: true, included: false, served: true },
// { pattern: 'node_modules/tinymce/plugins/**', watched: true, included: false, served: true }
],
proxies: {
'/assets/': '/base/projects/shared-library/src/assets/',
'/tinymce/': '/base/node_modules/tinymce/'
},
preprocessors: {
'projects/shared-library/src/assets/css/styles.scss': ['scss']
},
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
scssPreprocessor: {
options: {
includePaths: ['node_modules'],
importer: require('node-sass-tilde-importer')
}
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/shared-library'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: true,
browsers: ['Chrome', 'ChromeHeadlessCI', 'ChromeHeadless1920'],
singleRun: false,
restartOnFileChange: true
});
};
到目前为止，我尝试安装node-sass，它确实开始运行，但它破坏了实际的应用程序，因为node-sass不能处理新的语法。我还更新了强迫您使用新语法的材料，所以我不能回到node-sass。
提前感谢您的任何帮助或建议!
这是我的package.json
{
"name": "-shared-library",
"version": "0.0.0",
"scripts": {
"preinstall": "npx npm-force-resolutions",
"ng": "ng",
"start": "npm run get-lib-version && ng serve -o",
"serve-mac": "npm run get-lib-version && node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve",
"serve-mac-ngrok": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --disable-host-check",
"build-lib": "ng build -shared-library",
"build-tester": "ng build ui-tester --prod",
"build-watch": "ng build -shared-library --watch",
"test": "ng test --browsers Chrome --code-coverage",
"test-ci": "ng test --browsers ChromeHeadlessCI --code-coverage --watch=false",
"test-watch": "ng test --watch",
"lint": "ng lint",
"e2e": "ng e2e",
"npm-pack": "cd dist/-shared-library && npm pack",
"package": "npm run get-lib-version && npm run build-lib && npm run npm-pack",
"build-pack": "npm run package && npm run build-tester",
"all": "npm run package && npm run start",
"get-lib-version": "./replace-lib-version",
"precommit": "run-s format:fix lint && ng test --watch=false",
"format:fix": "pretty-quick --staged",
"format:check": "prettier --config ./.prettierrc --list-different "projects/-shared-library/src/lib/**/*{.ts,.js,.json,.scss,.html,.scss}"",
"format:lib": "prettier --config ./.prettierrc --write "projects/-shared-library/src/lib/**/*{.ts,.js,.json,.scss,.html,.scss}"",
"sonar": "sonar-scanner"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.5",
"@angular/cdk": "^12.2.5",
"@angular/common": "~12.2.5",
"@angular/compiler": "~12.2.5",
"@angular/core": "~12.2.5",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.2.5",
"@angular/localize": "^12.2.5",
"@angular/material": "^12.2.5",
"@angular/material-moment-adapter": "^12.2.5",
"@angular/platform-browser": "~12.2.5",
"@angular/platform-browser-dynamic": "~12.2.5",
"@angular/router": "~12.2.5",
"@cloudinary/angular-5.x": "^1.3.3",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@tinymce/tinymce-angular": "^4.2.0",
"@types/file-saver": "^2.0.1",
"angular-resize-event": "^2.1.0",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"cloudinary-core": "^2.11.3",
"core-js": "^2.5.4",
"dhtmlx-gantt": "file:packages/gantt_7.0.1_ultimate",
"file-saver": "^2.0.2",
"fp-ts": "^2.9.5",
"googleapis": "^64.0.0",
"jquery": "^3.4.1",
"leaflet": "^1.7.1",
"leaflet.markercluster": "^1.4.1",
"lodash-es": "^4.17.21",
"moment": "^2.29.1",
"ng2-pdf-viewer": "7.0.1",
"ngx-ui-switch": "^11.0.1",
"popper.js": "^1.16.0",
"postcss-loader": "^4.0.4",
"rxjs": "~6.6.3",
"scroll-into-view-if-needed": "^2.2.24",
"smoothscroll-polyfill": "^0.4.4",
"tinymce": "5.0.15",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.5",
"@angular/cli": "~12.2.5",
"@angular/compiler-cli": "~12.2.5",
"@angular/language-service": "~12.2.5",
"@types/jasmine": "^3.6.1",
"@types/jasminewd2": "~2.0.8",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"husky": "^2.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-scss-preprocessor": "^4.0.0",
"ng-packagr": "^12.2.1",
"node-sass-tilde-importer": "^1.0.2",
"npm-force-resolutions": "0.0.3",
"npm-run-all": "^4.1.5",
"prettier": "^1.17.0",
"pretty-quick": "^1.10.0",
"protractor": "~7.0.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
},
"resolutions": {
"webpack": "^5.0.0"
}
}
好了，我想我弄明白了。出于某种原因，这是正在安装的业力-scss预处理器https://github.com/amercier/karma-scss-preprocessor
我最终发现了这个:https://www.npmjs.com/package/@alasdair karma-scss-preprocessor
我安装了这个包，并把它替换到我的karma配置中。
config.set({
basePath: '../..',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-scss-preprocessor')
],
注:我也降级到webpack 4，因为我得到这个错误:错误:此源的内容和映射不可用(只支持size())
但是只在第一个ng构建中。如果我杀了它，再运行一次，它会起作用的。现在它不再出现了，因为我删除了webpack 5的分辨率。
我希望这能帮助别人。我在这个问题上已经碰壁太久了，哈哈。