TypeScript无法导入没有扩展名的文件 [英] Typescript can't import files without extension

问题描述

我正在尝试在新的Angular2项目中导入文件. 入口文件"main.ts"可以使用以下格式导入其他打字稿文件:

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"无法导入没有文件扩展名的ts文件:

"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';

如果我在文件名中添加".ts"，那么一切都会按预期进行...

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

我的错误是什么?我假设我正在按照角度指南( https://angular.io/docs/ts/latest/guide/webpack.html )

What is my mistake? I assume I am doing everything as per angular guide (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

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

我的tsconfig.json

My tsconfig.json

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

我的webpack.config.js

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

推荐答案

TypeScript(在编写默认的经典分辨率设置时)将自动检测以.ts或.tsx结尾的文件，不需要扩展名在那种情况下.根据TypeScript模块解析约定，所有其他文件都需要扩展名: https://www. typescriptlang.org/docs/handbook/module-resolution.html

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: 如果包含不带扩展名的A，TypeScript将查找A.ts或A.tsx.

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

这篇关于TypeScript无法导入没有扩展名的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！