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中的错误找不到模块：错误：无法解析＆＃39; file＆＃39;或者＆＃39;目录＆＃39; C中的./app.module：... \ main
@ ./application/main.ts 3：19-42 webpack：bundle现在是有效的。

app.module.ts 和 main.ts 的内容被from Angular.IO page带来。

我已经看到一些帖子说它是因为 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"] }

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

1 个答案: