Webpack下的Angular无法找到现有的app.module.ts文件

Question

我有这样的webpack.config.js.

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./source/application/main.ts",
  output: {
    path: "./distribution",
    filename: "app.bundle.js"
  },
  module: { loaders: [{ test: /\.ts$/, loader: "ts-loader" }] },
  plugins: [new HtmlWebpackPlugin({ template: "./source/index.html" })],
  resolve: ["", ".js", ".ts"]
}

它正确地找到并解释文件main.ts,除非引导模块(下面的第三行),它说文件无法解析.这是我的main.ts文件.

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

它无法解决的文件存在.如果我更改其名称或将其删除,我的IDE会告知它已丢失.但是,出于某种原因,当引导进程时,计算机无法找到它.

./application/main.ts中的错误找不到
模块:错误:无法解析C中的'file'或'directory'./app.module:...\main
@ ./application/main.ts 3:19-42 webpack:bundle现在是VALID.

在内容app.module.ts和main.ts被带到从Angular.IO页.

我看到一些帖子说这是因为config.json无效和/或可能在Windows中的路径上有些混乱.但是,我已经验证该文件是有效的,我已经尝试添加context:require("path").resolve(__dirname, "app"),到我的Webpack配置中.它只导致找不到以前的文件app.ts,所以我忽略了这种方法.

我花了很多天试图让它工作,我没有弹药.我怎么能解决它呢？

Answer 1

您的 - 中的文件扩展名配置无效，webpack.config.js而不是

resolve: ["", ".js", ".ts"]

你应该有

resolve: {
    extensions: ["", ".js", ".ts"]
}

编辑：

如果您需要以webpack2为目标，在您的情况下，迁移将非常轻松 - 只需要从""扩展中删除：

resolve: {
    extensions: [".js", ".ts"]
}