Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Sourcemap Remap Fail with Beta #290

Closed
patrickhousley opened this issue Dec 4, 2016 · 5 comments
Closed

Sourcemap Remap Fail with Beta #290

patrickhousley opened this issue Dec 4, 2016 · 5 comments

Comments

@patrickhousley
Copy link

patrickhousley commented Dec 4, 2016

When I use version 3.0.0-beta.9, karma-remap-coverage complains that it cannot find the sourcemap for every file in my repo. I am not sure what all to include here so just let me know what I can provide to help.

Dependencies:

"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@types/axios": "0.9.34",
"@types/core-js": "0.9.35",
"@types/jasmine": "2.5.38",
"@types/js-cookie": "2.0.28",
"@types/lodash": "4.14.41",
"@types/moment-timezone": "0.2.32",
"@types/node": "0.0.2",
"@types/source-map": "0.5.0",
"@types/uglify-js": "2.6.28",
"@types/webpack": "2.0.0",
"autoprefixer": "6.5.3",
"awesome-typescript-loader": "2.2.4",
"axios": "0.15.3",
"chai": "3.5.0",
"codelyzer": "0.0.24",
"comment-json": "1.1.3",
"copy-webpack-plugin": "4.0.1",
"core-js": "2.4.0",
"eslint": "3.11.1",
"eslint-loader": "1.6.1",
"expose-loader": "0.7.1",
"fs-extra": "1.0.0",
"fs-node": "1.0.1",
"git-hooks": "1.1.7",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.1",
"intl": "1.2.5",
"intl-locales-supported": "1.0.0",
"istanbul": "0.4.5",
"istanbul-instrumenter-loader": "0.2.0",
"jasmine-core": "2.5.2",
"json-loader": "0.5.4",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-coverage": "1.1.1",
"karma-htmlfile-reporter": "0.3.4",
"karma-jasmine": "1.0.2",
"karma-junit-reporter": "1.1.0",
"karma-mocha-reporter": "2.2.1",
"karma-phantomjs-launcher": "1.0.2",
"karma-remap-coverage": "0.1.2",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.8.0",
"lodash": "4.17.2",
"mocha": "3.2.0",
"mochawesome": "1.5.4",
"ng2-pagination": "0.3.5",
"ng2-translate": "2.2.2",
"node-sass": "3.13.0",
"nodemon": "1.11.0",
"parseuri": "0.0.5",
"postcss-loader": "1.1.1",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.3",
"rimraf": "2.5.4",
"rxjs": "5.0.0-beta.6",
"sass-loader": "4.0.2",
"sinon": "1.17.6",
"sinon-chai": "2.8.0",
"source-map-loader": "0.1.5",
"stats-webpack-plugin": "0.4.2",
"stylelint": "7.6.0",
 "stylelint-config-standard": "15.0.0",
 "ts-helpers": "1.1.2",
"ts-node": "^1.7.0",
"tslint": "4.0.2",
"typescript": "2.0.10",
"webpack": "v2.1.0-beta.27",
"webpack-dev-middleware": "1.8.4",
"webpack-dev-server": "v2.1.0-beta.12",
"webpack-merge": "1.0.2",
"webpack-split-by-path": "0.1.0-beta.1",
"zone.js": "0.6.12"

Common Webpack Config:

'use strict';
var _ = require('lodash');
var lib = require('../../../index');
var webpack = require('webpack');
var DefinePlugin = require('webpack/lib/DefinePlugin');
var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
var postcssConfig = require('./postcss.config');

module.exports = function (options) {
  options = options || {};
  var projectRoot = options.projectRoot || '';
  var projectMetadata = options.projectMetadata || {};
  var metadata = lib.getBuildEnvironment(projectMetadata);

  if (_.isEmpty(projectRoot)) {
    throw new Error('Webpack required options object passed to frontend-config webpack configuration files to contain a `projectRoot` option.');
  }

  if (_.isEmpty(metadata)) {
    throw new Error('A problem was encountered compiling the build metadata. This is most likely a problem with the frontend-config project.');
  }

  return {
    /*
     * Options affecting the resolving of modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#resolve
     */
    resolve: {
      /*
       * An array of extensions that should be used to resolve modules.
       *
       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
       */
      extensions: [ '.ts', '.js', '.json' ],
      modules: [
        'node_modules',
        options.projectRoot
      ]
    },

    module: {

      /**
       * An array of applied loaders.
       *
       * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
       */
      rules: [
        /**
         * Json loader support for *.json files.
         *
         * See: https://github.com/webpack/json-loader
         */
        {
          test: /\.json$/,
          use: [
            {
              loader: 'json-loader'
            }
          ]
        },

        /**
         * Raw loader support for *.css files
         * Returns file content as string
         *
         * See: https://github.com/webpack/raw-loader
         */
        {
          test: /\.css$/,
          use: [
            {
              loader: 'raw-loader'
            },
            {
              loader: 'postcss-loader',
              options: postcssConfig
            }
          ]
        },

        {
          test: /\.scss$/,
          use: [
            {
              loader: 'raw-loader'
            },
            {
              loader: 'postcss-loader',
              options: postcssConfig
            },
            {
              loader: 'sass-loader'
            }
          ]
        },

        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'assets/[name].[hash].[ext]'
              }
            }
          ]
        }
      ]
    },

    plugins: [
      // Ignore jquery, it should be provided on the window
      // Ignore moment, it should be provided on the window
      // Ignore js-cookie, it should be provided on the window
      // Ignore selectize, it should be provided on the window
      new webpack.IgnorePlugin(/^(jquery|moment|js-cookie|selectize)$/),

      /**
       * Ts Config Paths Plugin
       *
       * Adds support for 'paths' and 'baseUrl' features of TS2.
       * See: https://github.com/s-panferov/awesome-typescript-loader#advanced-path-resolution-in-typescript-20
       */
      new TsConfigPathsPlugin(),

      new webpack.LoaderOptionsPlugin({
        /*
         * Static metadata for index.html
         *
         * See: (custom attribute)
         */
        metadata: metadata,


        options: {
          /**
           * SASS loader configuration
           *
           * See: https://github.com/jtangelder/sass-loader
           */
          sassLoader:{
            'includePaths': [
              './node_modules/normalize.css',
              './node_modules/include-media/dist/',
              './node_modules/typi/scss/',
              './node_modules/frontend-styles/src/stylesheets/'
            ]
          },


          /**
           * Html loader advanced options
           *
           * See: https://github.com/webpack/html-loader#advanced-options
           */
          htmlLoader: {
            minimize: true,
            removeAttributeQuotes: false,
            caseSensitive: true,
            customAttrSurround: [
              [/#/, /(?:)/],
              [/\*/, /(?:)/],
              [/\[?\(?/, /(?:)/]
            ],
            customAttrAssign: [/\)?\]?=/]
          }
        }
      }),

      /**
       * Plugin: DefinePlugin
       * Description: Define free variables.
       * Useful for having development builds with debug logging or adding global constants.
       *
       * Environment helpers
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
       */
      // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
      new DefinePlugin({
        GlobalEnvironment: JSON.stringify(metadata)
      })

    ],

    /**
     * Set up dev server to use build environment variables.
     */
    devServer: {
      host: metadata.host ? metadata.host : 'localdev.com',
      port: metadata.port ? +metadata.port : 8080
    },

    /*
    * Include polyfills or mocks for various node stuff
    * Description: Node configuration
    *
    * See: https://webpack.js.org/configuration/node/
    */
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }
  };
};

Common Karma Config:

'use strict';

module.exports = function (config) {

  config.set({

    // base path that will be used to resolve all patterns (e.g. files, exclude)
    basePath: '',

    /*
     * Frameworks to use
     *
     * available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     */
    frameworks: ['jasmine'],

    // list of files to exclude
    exclude: [],

    /*
     * preprocess matching files before serving them to the browser
     * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     */
    preprocessors: {
      './.frontend-config/karma-polyfills.js': [
        'webpack'
      ],
      './.frontend-config/karma-test-shim.js': [
        'coverage',
        'webpack',
        'sourcemap'
      ]
    },

    /*
     * list of files / patterns to load in the browser
     *
     * we are building the test environment in ./spec-bundle.js
     */
    files: [
      // Project scripts
      { pattern: './.frontend-config/karma-polyfills.js', watched: false },
      { pattern: './.frontend-config/karma-test-shim.js', watched: false }
    ],

    coverageReporter: {
      type: 'in-memory'
    },

    remapCoverageReporter: {
      'text-summary': null,
      json: './dist/reports/coverage/coverage.json',
      html: './dist/reports/coverage/html'
    },

    // Configuration block for karma-junit-reporter
    junitReporter: {
      outputDir: 'dist/reports/tests/', // results will be saved as $outputDir/$browserName.xml
      outputFile: 'junit.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
      useBrowserName: false // add browser name to report and classes names
    },

    htmlReporter: {
      outputFile: 'dist/reports/tests/index.html',
      pageTitle: 'Unit Tests',
      groupSuites: true,
      useCompactStyle: true
    },

    // Webpack please don't spam the console when running in karma!
    webpackMiddleware: {
      noInfo: true,
      stats: {
        chunks: false,
        colors: true
      }
    },

    /*
     * test results reporter to use
     *
     * possible values: 'dots', 'progress'
     * available reporters: https://npmjs.org/browse/keyword/karma-reporter
     */
    reporters: ['mocha', 'coverage', 'html', 'junit', 'remap-coverage'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    /*
     * level of logging
     * possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     */
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,

    /*
     * start these browsers
     * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     */
    browsers: [
      // 'Chrome',
      'PhantomJS'
    ],

    /*
     * Continuous Integration mode
     * if true, Karma captures browsers, runs the tests and exits
     */
    singleRun: true
  });

};

Test Karma Config:

'use strict';

var path = require('path');
var webpackMerge = require('webpack-merge'); // used to merge webpack configs
var WebpackKarmaWarningsPlugin = require('frontend-config/config/common/webpack/plugins/webpack-karma-warnings-plugin.js');

module.exports = function (config) {
  /**
   * Load the base karma config onto the config object.
   */
  require('frontend-config/config/common/karma/karma.conf')(config);

  config.preprocessors = {
    './.frontend-config/karma-polyfills.js': [
      'webpack'
    ],
    './.frontend-config/karma-test-shim.js': [
      'coverage',
      'webpack',
      'sourcemap'
    ]
  };
  config.files = [
    // Project scripts
    { pattern: './.frontend-config/karma-polyfills.js', watched: false },
    { pattern: './.frontend-config/karma-test-shim.js', watched: false }
  ];

  var metadata = {
    projectRoot: path.resolve(__dirname)
  };
  var buildEnvironment = require('frontend-config').getBuildEnvironment(metadata);

  var baseWebpackConfig;
  if (buildEnvironment.production) {
    baseWebpackConfig = require('frontend-config/config/common/webpack/webpack.prod.js')(metadata);
  } else {
    baseWebpackConfig = require('frontend-config/config/common/webpack/webpack.dev.js')(metadata);
  }

  var projectWebpackConfig = {
    /**
     * Change dev tool to inline source maps to support code coverage mapping to TS source.
     */
    devtool: 'inline-source-map',

    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: [
            /node_modules/
          ],
          use: [
            {
              loader: 'source-map-loader'
            }
          ]
        },

        {
          test: /\.ts$/,
          exclude: [
            /\.e2e\.ts$/
          ],
          use: [
            {
              loader: 'awesome-typescript-loader',
              query: {
                // use inline sourcemaps for "karma-remap-coverage" reporter
                sourceMap: false,
                inlineSourceMap: true,
                compilerOptions: {
                  // Remove TypeScript helpers to be injected
                  // below by DefinePlugin
                  removeComments: true
                }
              }
            }
          ]
        },

        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader'
            }
          ]
        },

        /**
         * Instruments JS files with Istanbul for subsequent code coverage reporting.
         * Instrument only testing sources.
         *
         * See: https://github.com/deepsweet/istanbul-instrumenter-loader
         */
        {
          enforce: 'post',
          test: /\.(js|ts)$/,
          include: path.join(metadata.projectRoot, 'src'),
          exclude: [
            /\.(e2e|spec)\.ts$/,
            /node_modules/
          ],
          use: [
            {
              loader: 'istanbul-instrumenter-loader'
            }
          ]
        }
      ]
    },

    plugins: [
      /**
       * This plugin keeps the build from succeeding when there are compiler warnings/errors.
       */
      new WebpackKarmaWarningsPlugin()
    ]
  };

  config.webpack = webpackMerge.smart(baseWebpackConfig, projectWebpackConfig);
  return config.set(config);
};
@patrickhousley
Copy link
Author

I should also note that if I use istanbul-instrumenter-loader version 1.1.0, I have the same issue, even when using version 2.2.4 of this project.

@4kochi
Copy link

4kochi commented Dec 13, 2016

Same for me. The problem is in the code of src/instance.ts

In line 237 the setting inlineSourceMap is deleted from the compilerConfig.options.

delete compilerConfig.options.inlineSourceMap;

Although in my case the loaderConfig includes the inlineSourceMap, it is not used. So after commenting out line 237, all works fine.

Here my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "types": [
      "core-js",
      "node",
      "jasmine"
    ],
    "strictNullChecks": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": true,
    "alwaysStrict": true
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

And here the loader part of my webpack v1 config:

loaders: [
      {
        test: /\.ts$/,
        loaders: [
          `awesome-typescript-loader?${JSON.stringify(
            {
              // use inline sourcemaps for "karma-remap-coverage" reporter
              sourceMap: false,
              inlineSourceMap: true,

              compilerOptions: {
                // Remove TypeScript helpers to be injected
                // below by DefinePlugin
                removeComments: true
              }
            }
          )}`,
          'angular2-template-loader'
        ],
        exclude: [/\.e2e\.ts$/]
      }

@antonybudianto
Copy link

Same issue here, you can reproduce with my repo
https://github.com/antonybudianto/angular-webpack-starter

and update atl to 3.0.0-beta.x

then run npm t -- --ci

@s-panferov
Copy link
Owner

Should be fixed in the latest version

@cgatian
Copy link

cgatian commented Dec 14, 2016

@s-panferov Thoughts on patching 2.x?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants