Question

我正在尝试在我的新Angular2项目中导入文件。输入文件＆＃34; main.ts＆＃34;能够使用以下方法导入其他打字稿文件：

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

＆＃34; app.module.ts＆＃34;另一方面，如果没有文件扩展名，则无法导入ts文件：

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

如果我添加＆＃34; .ts＆＃34;一切按预期工作......

我的错误是什么？我假设我按照角度指南（https://angular.io/docs/ts/latest/guide/webpack.html）

做了一切

我有节点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'
    }
};

Answer 1

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

铊; DR：如果您添加A而没有扩展名，则TypeScript会查找A.ts或A.tsx。

Answer 2

Typescript不会导入没有扩展名的文件，希望永远不会。

不需要那么明确。
不是浏览器的工作方式。
模块加载器必须猜测。

实际上，Ryan Dahl在将此功能引入node.js时对此感到遗憾

https://www.youtube.com/watch?v=M3BM9TB-8yA

Answer 3

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

打字稿无法在没有扩展名的情况下导入文件

3 个答案: