5

I have my webpack.config.js like this.

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"]
}

It finds and interprets the file main.ts properly, except when bootstraping the module (third line below), it says that the file can't be resolved. This is my main.ts file.

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

The file that it can't resolve is there. If I change its name or remove it, my IDE tells that it's missing. However, for some reason, when bootstraping the process, the computer can't find it.

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.

The contents of the app.module.ts and main.ts were brought from Angular.IO page.

I've seen some posts saying that it's because config.json not being valid and/or possibly some confusion on paths in Windows. However, I've verified that the file is valid and I've tried adding context:require("path").resolve(__dirname, "app"), to my Webpack config. It only resulted in not finding even the former file app.ts, so I disregarded that approach.

I've spend a number of days trying to make it work and I'm out of ammo. How can I even troubleshoot it?

Improve this question
3
  • this import { AppModule } from "./app.module"; is implying that the files for app.module are in the same directory as the main.ts, which appears to be ./source/application/main.ts. is this the case? also, a path resolve to ./app wouldn't help here, since nothing is requesting anything from an app directory. Commented Jan 27, 2017 at 17:16
  • @Claies That is the case. All the three files (main.ts, app.module.ts and app.component.ts) are in the same directory. Also, I've tried to resolve using ./source/application too but to no avail (not sure what context: ...resolve() does, though, so it was just me trying anything imaginable). I'm going to bounty this question because it drives me insane and I can't be the only one. Commented Jan 28, 2017 at 12:39
  • As everything looks correct to me, do you have a ``` tsconfig.json``` file at a right place ? Commented Jan 29, 2017 at 17:33

1 Answer 1

Reset to default
2
+50

You have invalid file extension configuration in your webpack.config.js - instead of 

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

you should have

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

Edit:

If you need to target webpack2,in your case the migration would be pretty painless - its only needed to remove "" from extensions:

resolve: {
    extensions: [".js", ".ts"]
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments