Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module output source isn't being updated when using a Webpack loader

See original GitHub issue

Describe the Bug

I’m trying to use a Webpack loader to automatically import a directive module to a component module when a certain condition has been met. However, it seems to be that even though I update the source to include the HelloModule inside the imports array of the AppModule’s NgModule decorator, it doesn’t seem to be included in the build output. I’m not sure if it’s an issue where I need to add an option to the AngularCompilerPlugin or something else entirely.

Minimal Reproduction

https://github.com/silverAndroid/angular-custom-webpack-inject-module

Expected Behavior

When the app (from the minimal reproduction repository) loads, there should be a log in the browser console saying ‘hello from the appHello directive’.
After running a production build, inside dist/custom-webpack-inject-module/main.js, there is one instance of ‘./hello/hello.module’ as a comment (meaning that the module was included in the build in the AppModule).

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Libs
- @angular/core version: "~11.2.4"
- @angular-devkit/build-angular version: "~0.1102.3"
- @angular-builders/custom-webpack: "^11.1.1"

For Tooling issues:
- Node version: 12.17.0
- Platform: macOS

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

just-jebcommented, Apr 4, 2021

In case you missed it, check out this and this.

0reactions

silverAndroidcommented, Mar 22, 2021

@just-jeb I believe so, seems to be a design decision with the Angular Compiler

Top Results From Across the Web

Webpack file-loader outputs [object Module] - Stack Overflow

I encountered this after upgrading file-loader. Looking more carefully at the changelog, I see the default value for esModule changed to true ...

Output - webpack

This option determines the module's namespace used with the output.devtoolModuleFilenameTemplate . When not specified, it will default to the value of: output.

Output Management - webpack

Let's fix that with the HtmlWebpackPlugin . Setting up HtmlWebpackPlugin. First install the plugin and adjust the webpack.config.js file: npm ...

file-loader - webpack - JS.ORG

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...

Writing a Loader - webpack

apply-loader : Executes the function with loader options and returns raw HTML. html-loader : Accepts HTML and outputs a valid JavaScript module. tip....