Webpack / Karma / awesome-typescript-loader不会忽略文件

Question

I use Webpack 2.x to compile my Angular 2 App. For production code I use a combination of ngc and @ngtools/webpack 's AotPlugin for compilation. For testing I use awesome-typescript-loader . The production build of my code works just fine. However, when I do an npm test something very strange happens... awesome-typescript-loader complains that it failed to compile the code, but Karma runs through the tests anyway and they all pass.

bash-3.2$ npm test
> btc2017@1.0.0 test /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017
> NODE_ENV=test node ./node_modules/.bin/karma start --single-run=true

webpack: wait until bundle finished:

[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /Users/tomb/Projects/brandontom.com/wp-content/themes/b
tc2017/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 1.054 sec.
ERROR in ./ngfactory/src/app/app.module.ngfactory.ts
Module parse failed: /Users/tomb/Projects/brandontom.com/wp-content/themes/btc2017/ngfactory/src/app/app.module.ngfactory.ts Unexpe
cted token (65:56)
You may need an appropriate loader to handle this file type.
| import * as import55 from '@angular/router/src/router_config_loader';
| import * as import56 from '@angular/router/src/router_state';
| class AppModuleInjector extends import0.NgModuleInjector<import1.AppModule> {
|   _CommonModule_0:import2.CommonModule;
|   _ApplicationModule_1:import3.ApplicationModule;
 @ ./bootstrap/main.aot.ts 1:0-78
webpack: Failed to compile.
Chrome 56.0.2924 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (1.41 secs / 0.758 secs)

That's a neat trick, but I'd rather skip trying to parse that file in the first place, especially since that file is generated.

My first thought was to ignore the directory that file gets generated in. It gets constructed in a folder called ngfactory . Here's the rule that I've added the following rule to my webpack.config.js :

{
  test: /\.ts$/,
  loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
  exclude: [/(node_modules|bootstrap|prebuild|ngfactory)/]
}

But awesome-typescript-loader keeps trying to parse this file despite the exclude . Next I thought it might be Karma that was pulling this in so I added an exclude rule to my karma.conf.js .

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',     // <--- here's where that file lives
      'node_modules',
      'prebuild'
    ],
...
...

When I removed the artifact folders ( prebuild and ngfactory ) I realized that the bootstrap file (which lives in a directory called bootstrap ) was being parsed and that file was trying to import app.module.ngfactory.ts I added bootstrap to the various exclude properties (including my tsconfig.json ). Still, nothing stopped the issue from arising. If anyone has seen anything like this, I'd love to know how you got around this.

Here's my full webpack.config.js :

var neat = require('node-neat')
var path = require('path')
var webpack = require('webpack')
var AotPlugin = require('@ngtools/webpack').AotPlugin

var sassPaths = neat.includePaths.map(function (path) {
  return 'includePaths[]=' + path
}).join('&')

module.exports = (function (nodeEnv) {
  var config = {
    entry: {
      globals: [ 'core-js/client/shim.min', 'reflect-metadata', 'zone.js' ],
      main: path.resolve(__dirname, 'bootstrap') + '/main.aot.ts'
    },
    devServer: {
      inline: true
    },
    module: {
      rules: [
        { test: /\.html$/, loader: 'raw-loader' },
        { test: /\.scss$/, loader: 'raw-loader!css-loader!sass-loader?' + sassPaths, exclude: /node_modules/ }
      ]
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },
    resolve: {
      extensions: ['.js', '.ts']
    },
    plugins: [
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        __dirname
      ),
      new webpack.DefinePlugin({
        process: { env: { NODE_ENV: JSON.stringify(nodeEnv) } }
      })
    ]
  }
  if (nodeEnv !== 'test') {
    config.module.rules.push({
      test: /\.ts$/,
      loader: '@ngtools/webpack'
    })
    config.plugins.push(new AotPlugin({
      tsConfigPath: './tsconfig.json'
    }))
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
      mangle: { screw_ie8: true, keep_fnames: true },
      compress: { screw_ie8: true, warnings: false },
      comments: false
    }))
  } else {
    config.module.rules.push({
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
      exclude: [/(node_modules|bootstrap|prebuild|ngfactory)/]
    })
  }
  return config
})(process.env.NODE_ENV)

Here's my tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}

For good measure, here's my karma.conf.js as well:

var webpackConfig = require('./webpack.config')

module.exports = function (config) {
  var _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],
    exclude: [
      'bootstrap',
      'dist',
      'ngfactory',
      'node_modules',
      'prebuild'
    ],
    preprocessors: {
      './karma-shim.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      stats: 'errors-only'
    },
    webpackServer: {
      noInfo: true
    },
    progress: ['progress'],
    port: 9876,
    color: true,
    logLevel: config.LOG_ERROR,
    browsers: ['Chrome']
  }
  config.set(_config)
}

Answer 1

Although I wasn't able to stop awesome-typescript-loader from compiling artifacts, I was able to get it to stop failing whenever it did. The loader has a boolean setting called transpileOnly . Setting this to true prevents the loader from doing type checking. I added it to my tsconfig.json in the awesomeTypescriptLoaderOptions section.

This isn't ideal, but I'm okay (for now) with awesome-typescript-loader not enforcing type checking on the testing side... I guess... So long as ngc does enforce it on production code.

Here's my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "./prebuild",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true,
    "transpileOnly": true
  },
  "angularCompilerOptions": {
    "genDir": "./ngfactory",
    "entryModule": "src/app/app.module#AppModule"
  }
}