在移除之后，角度测试仍然需要node-sass。应用程序可以工作，但测试不会运行

Question

我将我的应用程序升级到了Angular 12.2.5

一切都进行得相对顺利，我可以在更新后为我的应用程序提供服务。

然而，当我运行ng test时，它出现了以下错误：

 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"
}
}

Answer 1

好吧，我想我想通了。出于某种原因，这是安装https://github.com/amercier/karma-scss-preprocessor的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的决议，现在不再出现了。

我希望这能帮助到一些人。我在这上面撞墙太久了，哈哈。