Angular Webpack 下找不到现有文件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 会告诉它丢失了。但是，由于某些原因，在引导进程时，计算机找不到它。

ERROR in ./application/main.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./app.module in C:...\main
@ ./application/main.ts 3:19-42 webpack: bundle is now VALID.

app.module.ts 和 main.ts 的内容被引入 from Angular.IO page。

我看到一些帖子说这是因为 config.json 无效 and/or 可能 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"]
}

Angular Webpack 下找不到现有文件app.module.ts

Angular under Webpack can't find an existing file app.module.ts

webpack

webpack-dev-server

angular