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

Posted 2023-02-22

【中文标题】Typescript 无法导入没有扩展名的文件

【英文标题】：Typescript can't import files without extension

【发布时间】：2017-10-13 03:15:24

【问题描述】：

我正在尝试在我的新 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)

我安装了 node 6.9.4、npm 4.2.0、typescript 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'
    
;

【问题讨论】：

Typescript 文件具有 .ts 扩展名。为什么你不想首先创建一个扩展名为 .ts 的文件？

我的文件有 .ts 扩展名，问题是如果没有将扩展名置于导入状态，它们就不会被加载

拜托，你能分享你的 tsconfig 吗？

@JoséQuintoZamora tsconfig 添加

你在使用 webpack 和 ts-loader 吗？如果是这样，请你也分享你的配置吗？

【参考方案1】：

TypeScript（在撰写本文时采用默认的经典分辨率设置）将自动检测以 .ts 或 .tsx 结尾的文件，并且在这些情况下不需要扩展名。根据 TypeScript 模块解析约定，所有其他文件都需要扩展名：https://www.typescriptlang.org/docs/handbook/module-resolution.html

Tl;DR: 如果您包含 A 而没有扩展名，TypeScript 将查找 A.ts 或 A.tsx。

【讨论】：

这就是问题所在，我假设相同，但不幸的是事实并非如此。 .ts 文件未加载，即使扩展名正确。在 tsconfig 中，我尝试了经典和节点，但都不起作用。

这与经典分辨率无关。在 TypeScript 中导入带有显式 .ts 扩展名的 TypeScript 文件是完全无效的。

@donnikitos 很抱歉，我似乎误解了你的问题。这确实是我无法解释的奇怪行为（你为什么将我标记为答案哈哈）

@KevinPei 适用于谷歌搜索者。否则这是我的错误....其中一个文件具有双 *.ts 扩展名（可能在复制一个文件时发生）

【参考方案2】：

我意识到我有两个同名但扩展名不同的文件。 notes.js 和 notes.ts。当您遇到文件名冲突时，可能需要扩展名