2017-06-20 77 views
0

我的Webpack Angular2應用程序出現問題。我想與噶安裝測試,但我遇到的一個錯誤是:Angular2 Webpack Karma - 意外的令牌')'

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR

SyntaxError: Unexpected token ')' at 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 
    } 

    }; 

}; 

我不知道你需要所有這些文件,但我仍然把它們放在這裏以防萬一。謝謝!

+0

請將您的app.component.spec.ts更新爲您的問題! –

+0

添加了app.component.spec.ts只是我粘貼的部分的指示,我沒有74行:/ – Guigui

回答

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

你應該看看整個app.component.spec.ts文件的第74行。 如果您粘貼您的整個文件,我們可能會幫助您。

+0

這就是我所做的,我在這裏粘貼了我的整個app.component.spec.ts文件,我有5行上... – Guigui

+0

那麼,我可以嘗試沒有更多的信息唯一的事情是將MIME配置添加到你的業力文件,但我懷疑它會解決你的問題: 'mime:{ 'text/x -typescript':['ts','tsx'] } ' – FerSomo11