Question

我的Webpack Angular2应用程序存在问题。我想用Karma设置测试，但我遇到了一个错误：

PhantomJS 2.1.1（Windows 8 0.0.0）错误

SyntaxError：意外的令牌'）'     在src / app / app.component.spec.ts:74

以下是我能提供的全部内容：

package.json ：

"karma": "^1.3.0",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "2.2.2",
"karma-phantomjs-launcher": "1.0.2",
"karma-requirejs": "1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",

karma.conf.js ：

module.exports = function (config) {
config.set({
  basePath: '',
  frameworks: ['jasmine'],
  files: [
    { pattern: 'src/**/*spec.ts', watched: false }
  ],
  exclude: [
  ],
  preprocessors: {
    'src/**/*spec.ts': ['webpack']
  },
  reporters: ['progress'],
  webpack: require('./config/webpack.dev.js'),
  port: 9876,
  colors: true,
  logLevel: config.LOG_INFO,
  autoWatch: false,
  browsers: ['PhantomJS'],
  singleRun: true,
  concurrency: Infinity
})
}

app.component.spec.ts （这是我的整个文件，我没有第74行）：

describe('Meaningful Test', () => {
    it('1 + 1 => 2', () => {
        expect(1 + 1).toBe(2);
    });
});

webpack.dev.js ：

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'development';
module.exports = webpackMerge(commonConfig(), {

output: {
    path: helpers.root('dist'),
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
},

plugins: [
  new UglifyJsPlugin({
    mangle: {
      keep_fnames: true
    }
  }),
  new webpack.DefinePlugin({
    'process.env': {
      'ENV': JSON.stringify(ENV)
    }
  })
]

});

webpack.common.js ：

const webpack = require('webpack');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const helpers = require('./helpers');

module.exports = function () {

  return {

    resolve: {
      // Array of extensions that will be used to resolve modules
      extensions: ['.js', '.ts']
    },

    // Entry points the bundles
    entry: {
      'polyfills': helpers.root('src', 'polyfills.ts'),
      'vendor': helpers.root('src', 'vendor.ts'),
      'app': [
        helpers.root('src', 'main.ts'),
        helpers.root('src', 'style', 'main.scss')
      ]
    },

    module: {
      rules: [
        // Compiles all .ts files
        {
          test: /\.ts$/,
          loaders: ['ng-router-loader', 'awesome-typescript-loader?silent=true', 'angular2-template-loader'],
          exclude: /\.spec\.ts$/
        },
        // Injects all html templates into their components and loads referenced assets
        {
          test: /\.html$/,
          loader: 'html-loader',
          exclude: helpers.root('src/index.html')
        },
        // Copies all images and fonts into dist/assets
        {
          test: /\.(png|jpe?g|gif|svg|webm|mp4|woff|woff2|ttf|eot)$/,
          loader: 'file-loader?name=assets/[name].[ext]'
        },
        // Puts all styles from assets/styles/main.scss in a separate file
        {
          test: /\.scss$/,
          exclude: helpers.root('src', 'app'),
          loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        },
        // Injects all angular styles into their components
        {
          test: /\.scss$/,
          include: helpers.root('src', 'app'),
          loaders: ['raw-loader', 'sass-loader']
        },
        // Loads all "required" json files into their components
        {
          test: /\.json$/,
          loader: 'json-loader'
        }
      ]
    },

    node: {
      console: true,
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    },

    plugins: [
      // File name for the extracted styles
      new ExtractTextPlugin('[name].css'),
      // Identifies common modules and puts them into a commons chunk
      /* new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
      }), */
      // Provides context to Angular's use of System.import
      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('src')
      ),
      // Generates an HTML5 file that includes all webpack bundles
      new HtmlWebpackPlugin({
        template: helpers.root('src', 'index.html'),
        favicon: helpers.root('src', 'favicon.ico')
      }),
      // Copies all i18n files into dist/i18n
      new CopyWebpackPlugin([{
        from: helpers.root('src', 'i18n'),
        to: 'i18n'
      }]),
      // Copies all lib files into dist/lib
      new CopyWebpackPlugin([{
        from: helpers.root('src', 'lib'),
        to: 'lib'
      }])
    ],

    performance: {
      hints: false
    }

  };

};

我不确定你是否需要所有这些文件，但我仍然把它们放在这里以防万一。谢谢！

Answer 1

SyntaxError: Unexpected token ')' at src/app/app.component.spec.ts:74

您应该查看整个app.component.spec.ts文件的第74行。如果您粘贴整个文件，我们可能会帮助您。

Angular2 Webpack Karma - 意想不到的令牌'）'

1 个答案: