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

Question

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?

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. — Claies
– Claies, 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. — user1675891
– user1675891, Commented Jan 28, 2017 at 12:39
As everything looks correct to me, do you have a ``` tsconfig.json``` file at a right place ? — Dinesh Balasubramanian
– Dinesh Balasubramanian, Commented Jan 29, 2017 at 17:33

Igor B · Accepted Answer · 2017-01-31 20:14:05Z

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

edited Jan 31, 2017 at 20:14

answered Jan 29, 2017 at 18:01

Igor B

91411 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related