angular-cli: coverage-istanbul-loader cannot find javascript source maps

šŸž Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • [ x ] test
  • e2e
  • generate
  • add
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

No

Description

When enabling the codeCoverage for ng test the test will not run and crash because it cannot find the source maps of our javascript files. We are in the process of converting our angularjs to angular.

I think the problem will be fixed if we convert all our js files to ts. But that introduces more errors than files. We have over 2000 javascript files.

šŸ”¬ Minimal Reproduction

šŸ”„ Exception or Error




ERROR in ./src/main/javascript/structure/cases/hv-plan/hv-plan.module.js
Module build failed (from ./node_modules/coverage-istanbul-loader/lib/index.js):
Error: An error occurred while trying to read the map file at C:\Users\p289718\Projects\flow\flow-ui\src\main\javascript\structure\cases\hv-plan\hv-plan.module.js.map
Error: ENOENT: no such file or directory, open 'C:\Users\p289718\Projects\flow\flow-ui\src\main\javascript\structure\cases\hv-plan\hv-plan.module.js.map'
    at readFromFileMap (C:\Users\p289718\Projects\flow\flow-ui\node_modules\coverage-istanbul-loader\node_modules\convert-source-map\index.js:40:11)
    at new Converter (C:\Users\p289718\Projects\flow\flow-ui\node_modules\coverage-istanbul-loader\node_modules\convert-source-map\index.js:47:32)
    at Object.exports.fromMapFileComment (C:\Users\p289718\Projects\flow\flow-ui\node_modules\coverage-istanbul-loader\node_modules\convert-source-map\index.js:110:10)
    at Object.exports.fromMapFileSource (C:\Users\p289718\Projects\flow\flow-ui\node_modules\coverage-istanbul-loader\node_modules\convert-source-map\index.js:122:22)
    at Object.default_1 (C:\Users\p289718\Projects\flow\flow-ui\node_modules\coverage-istanbul-loader\lib\index.js:28:45)
 @ ./src/main/javascript/structure/structure.module.ts 228:0-58 230:101-113
 @ ./src/main/javascript/app/app.angularjs.module.ts
 @ ./src/main/javascript/flow-tests.ts

šŸŒ Your Environment





     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ā–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.0-rc.14
Node: 12.10.0
OS: win32 x64

Angular: 9.0.0-rc.14
... cli, common, compiler, compiler-cli, core, language-service
... platform-browser, platform-browser-dynamic, router, upgrade
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.24
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.24
@angular-devkit/core              8.3.24
@angular-devkit/schematics        9.0.0-rc.14
@ngtools/webpack                  8.3.24
@schematics/angular               9.0.0-rc.14
@schematics/update                0.900.0-rc.14
rxjs                              6.5.4
typescript                        3.7.3
webpack                           4.41.2

Anything else relevant?

Relevant angular.json part

"test": {
          "builder": "ngx-build-plus:karma",
          "options": {
            "main": "src/main/javascript/flow-tests.ts",
            "polyfills": "src/main/javascript/polyfills.ts",
            "reporters": ["progress"],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "codeCoverage": true,
            "assets": [],
            "styles": [],
            "scripts": [],
            "extraWebpackConfig": "webpack.partial.js"
          }
        },

karma.conf

const path = require('path');

module.exports = function(config) {
    config.set({
        basePath : '',
        frameworks : ['jasmine', '@angular-devkit/build-angular'],
        files : [
            'src/main/javascript/flow-tests.ts'
        ],
        exclude : [],
        plugins : [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        coverageIstanbulReporter : {
            reports : [ 'html', 'text-summary' ],
            dir : path.join(__dirname, 'target'),
            fixWebpackSourcePaths : true,
            'report-config' : {
                html : { subdir : 'coverage' }
            },
            thresholds : {
                global : {
                    statements : 77.1,
                    branches : 62.7,
                    functions : 76.1,
                    lines : 77.0
                }
            }
        },
        junitReporter : {
            outputDir : 'target/surefire-reports-ui/'
        },
        port : 9876,
        colors : true,
        logLevel : config.LOG_INFO,
        autoWatch : false,
        browsers : ['ChromeHeadless'],
        singleRun : true,
        concurrency : Infinity
    });
};

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 16 (1 by maintainers)

Most upvoted comments

Hi everyone, I was able to crack this issue for my project. We were facing this issue because of importing ts file with js extension in other files.

Filemanager.service.ts was imported in another file as : import { ManagerService } from 'services/manager.service.js';

Changing this to import { ManagerService } from 'services/manager.service'; fixed issue for us and all tests started working as expected.

@Pouja, in your case please check if file hv-plan.module.ts is imported correctly in structure.module.ts. Try removing extensions while import.

Using version 0.802.2 was not an option for me since that includes security warnings for serialize-javascript.

Version 0.803.23 introduces the source maps issue for me. It seems to be introduced in this commit: https://github.com/angular/angular-cli/commit/d88c5f81c778a84fdf6c90ea886df1bb2ed9b5d0

For anyone having the source map issue, I recommend using version 0.803.22 until this issue is fixed.

@danduh Thanks for the workaround, we can indeed run our coverage again. But Iā€™m not sure if it because of the other coverage tool or because of the sourcemaps. But Instanbul indicates that all our import statements are unused or the import statement is missing a branch (which is silly ofcourse). So for now we settled with the solution of @studix by downgrading @angular-devkit/build-angular to 0.802.2

@alan-agius4 I wasnt able to reproduce our initial problem (missing sourcemaps) with the generated starter repo of the cli with the newer version of @angular-devkit/build-angular and mixed js and ts files.

I want to give it another try tomorrow by adding angularjs to the generated starter repo.