TypeScript无法导入没有扩展名的文件

Question

我正在尝试在新的Angular2项目中导入文件。入口文件“ main.ts”能够使用以下命令导入另一个打字稿文件：

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

另一方面，“ app.module.ts”无法导入没有文件扩展名的ts文件：

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

如果我在文件名中添加“ .ts”，则一切正常。

我怎么了 我假设我正在按照角度指南（https://angular.io/docs/ts/latest/guide/webpack.html）做所有事情

我安装了节点6.9.4，npm 4.2.0，打字稿2.3.2，Angular 4.1.0和Webpack 2.5.1

我的tsconfig.json

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

我的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（在编写默认的经典分辨率设置时）将自动检测以。结尾.ts或.tsx不需要扩展名的文件。根据TypeScript模块解析约定，所有其他文件都需要扩展名：https : //www.typescriptlang.org/docs/handbook/module-resolution.html

Tl; DR：如果不包括A扩展名，则TypeScript将查找A.ts或A.tsx。