Typescript no puede importar archivos sin extensión

Estoy tratando de importar archivos en mi nuevo proyecto Angular2. El archivo de entrada “main.ts” puede importar otro archivo typescript usando:

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

“app.module.ts” por otro lado no puede importar un archivo ts sin una extensión de archivo:

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

Si agrego “.ts” al nombre del archivo, todo funciona como se espera …

Cual es mi error Supongo que estoy haciendo todo según la guía angular ( https://angular.io/docs/ts/latest/guide/webpack.html )

Tengo el nodo 6.9.4, npm 4.2.0, mecanografía 2.3.2, Angular 4.1.0 y Webpack 2.5.1 instalado

Mi tsconfig.json

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

Mi 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' } }; 

TypeScript (en el momento de escribir en la configuración de resolución clásica predeterminada) detectará automáticamente los archivos que terminan en .ts o .tsx y no requieren una extensión en esos casos. Todos los demás archivos requieren una extensión según las convenciones de resolución del módulo de TypeScript: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Tl; DR: si incluye A sin una extensión, TypeScript buscará A.ts o A.tsx .