Angular under Webpack cannot find existing app.module.ts file

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 main.ts file correctly, except that when loading the module (third line below) it says that the file cannot be resolved. This is my main.ts file.

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

A file that he cannot solve exists. If I change my name or delete it, my IDE will report that it is missing. However, for some reason, when the process loads, the computer cannot find it.

A mistake 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 now has a VALID value.

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

I saw several posts saying that this is because config.json is not valid and / or possibly a mess in the paths on Windows. However, I confirmed that the file is valid, and I tried to add context:require("path").resolve(__dirname, "app"), to my Webpack configuration. This led to the fact that even the previous app.ts file could not be found, so I did not pay attention to this approach.

I spent several days trying to get it to work, and I have no ammunition. How can I fix them?

+5
source share
1 answer

You have incorrect configuration file extension in webpack.config.js instead

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

you should have

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

Edit:

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

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

Source: https://habr.com/ru/post/1263170/


All Articles