Typescript can't import files without extension

Question

I am trying to import files in my new Angular2 project. The entry file "main.ts" is able to import an other typescript file using:

import { AppModule }              from './module/app.module';

"app.module.ts" on the other hand is not able to import a ts file without a file extension:

import { AppComponent }             from '../component/app.component';

If I add ".ts" to the file name everything works as expected...

What is my mistake? I assume I am doing everything as per angular guide (https://angular.io/docs/ts/latest/guide/webpack.html)

I have node 6.9.4, npm 4.2.0, typescript 2.3.2, Angular 4.1.0 and Webpack 2.5.1 installed

My tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

My webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.(html|htm|php)$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader?sourceMap'
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: '../../template/base/app.php'
        })

        // new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        filename: '[name].js'
    }
};

Answer 1

TypeScript (at the time of writing in the default classic resolution setting) will automatically detect files that end in .ts or .tsx and not require an extension in those cases. All other files require an extension as per TypeScript module resolution conventions: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Tl;DR: If you include A without an extension TypeScript will look for A.ts or A.tsx.