Webpack2 / awesome-typescript Loader 似乎无法编译

Question

My current webpack setup has a problem somewhere.. and I cannot find it. I am using Angular2+Webpack2+AwesomeTypescriptLoader. App is up and running, but webpack does not recompile my app correctly. Whenever I change a ts-file in my project I get

[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.985 sec.

so it seems to recognize the change, but my bundles / js output file are never updated. The moment I run tsc -w in the background, everything works.. but that should not be neccessary, right?

Can anyone spot my error? Thank you very much!

Here are my config files:

tsconfig:

    {
  "compilerOptions": {
    //"inlineSourceMap": true,
    //"inlineSources": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "rootDir": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "exclude": [
    "bin",
    "node_modules",
    "wwwroot/dist"
  ]
}

webpack:

"use strict";
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        "polyfills": path.resolve("./wwwroot/app/base/polyfills.ts"),
        "app": path.resolve("./wwwroot/app/base/main.ts"),
        "vendor": path.resolve("./wwwroot/app/base/vendors.ts")
    },
    devtool: 'source-map',

    output: {
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js",
        path: "./wwwroot/dist/",
        publicPath: "./dist/"
    },
    watch: true,
    resolve: {
        extensions: ['', '.js', '.ts', '.html']
    },
    module: {
        loaders: [
            //Typescript
            {
                test: /\.tsx?$/,
                loaders: ['angular2-template-loader', 'awesome-typescript-loader']
            },
            // SASS
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass'],
                exclude: '/node_modules/'
            },
            {
                test: /\.html$/,
                loaders: ['raw-loader'],
                exclude: "./wwwroot/index.html"
            },
            // Fonts & Files
            {
                test: /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: 'file-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    noParse: [/moment.js/],

    plugins: [
        //new webpack.OldWatchingPlugin(),
        // new webpack.optimize.UglifyJsPlugin({
        //    compressor: {
        //        warnings: false
        //    }
        // }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),

        new HtmlWebpackPlugin({
            template: './wwwroot/index.html'
        })
    ]
};

And the versions I am using:

{
  "version": "0.0.1",
  "name": "someapp",
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "@types/hammerjs": "^2.0.34",
    "@types/lodash": "^4.14.34",
    "angular2-color-picker": "^1.3.0",
    "core-js": "^2.4.1",
    "html-webpack-plugin": "^2.16.2",
    "jquery": "^2.2.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.1",
    "tablesorter": "2.25.5",
    "webpack": "1.13.2",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "3.0.0-beta.17",
    "raw-loader": "^0.5.1",
    "clean-webpack-plugin": "^0.1.9",
    "css-loader": "^0.23.1",
    "html-loader": "^0.4.3",
    "node-sass": "^4.1.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "typescript": "2.0.10",
    "typings": "1.3.3"
  }
}

EDIT: It's the same with webpack 2.2.0-rc.4 btw.

Answer 1

See awesome-typescript-loader and angular2-template-loader .

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

Try moving 'awesome-typescript-loader' to the front. If that doesn't work, there might be other minor subtle issues with your webpack config. Hope that helps. I also have issues with this file and it can be quite annoying to find solutions online...

Answer 2

I had the same problem and solved it when I changed resolve extensions in webpack.config.js from:

resolve: {
    extensions: ['', '.js', '.ts']
},

to:

resolve: {
    extensions: ['', '.ts', '.tsx', '.js', '.jsx']
},