Typescript can't import files without extension
angular, javascript, node.js, typescript, webpack
Solution
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`.
Problem
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' } }; ```