# webpack-dll-ng-module-loader

> Cheat AngularCompilerPlugin to work around https://github.com/angular/angular-cli/issues/4565

Latest version **1.2.0** (published 2019-05-22) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install webpack-dll-ng-module-loader
pnpm add webpack-dll-ng-module-loader
yarn add webpack-dll-ng-module-loader
bun add webpack-dll-ng-module-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-05-22 |
| First published | 2018-07-24 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jlhwung |

## Links

- npm: https://www.npmjs.com/package/webpack-dll-ng-module-loader
- npm.io page: https://npm.io/package/webpack-dll-ng-module-loader

## Dependencies (2)

- [@types/node](https://npm.io/package/@types/node.md) ^10.12.2
- [@types/webpack](https://npm.io/package/@types/webpack.md) ^4.4.17

## Recent versions

- 1.2.0 (latest) — 2019-05-22
- 1.1.0 — 2018-11-05
- 1.0.2 — 2018-07-25
- 1.0.1 — 2018-07-25
- 1.0.0 — 2018-07-24

## README

# webpack-dll-ng-module-loader

[![Build Status](https://travis-ci.com/JLHwung/webpack-dll-ng-module-loader.svg?branch=master)](https://travis-ci.com/JLHwung/webpack-dll-ng-module-loader)

A workaround on the [issue] that `@ngtools/webpack` fail to build lazy modules when `@angular/core` is bundled into a webpack dll.

If you are not bundling `@angular/core` to webpack dll, you probably never need this plugin.

## Install

```
yarn add webpack-dll-ng-module-loader
```

## Usage

### 1. Use `WebpackDllNgModuleLoader` on your application

Import `WebpackDllNgModuleLoader` in the root module `app.module.ts`:

```ts
import { WebpackDllNgModuleLoader } from "webpack-dll-ng-module-loader";
```

Then provide the `NgModuleFactoryLoader` using `WebpackDllNgModuleLoader`

```ts
{ provide: NgModuleFactoryLoader, useClass: WebpackDllNgModuleLoader }
```

### 2. Webpack Configuration

If you are hand crafting the webpack configuration of the whole Angular Project, please refer to 2.1 for how to get it works.

If you are using @angular/cli, it is [recommended](https://github.com/angular/angular-cli/issues/10618#issuecomment-425506339) to install [`ngx-build-plus`](https://github.com/manfredsteyer/ngx-build-plus) and skip the 2.1 section and see [ngx-build-plus integration guide](integration/ngx-build-plus/README.md) for a step-by-step integration guide to `ngx-build-plus`.

#### 2.1 Use `CheatAngularCompilerResourcePlugin` on your webpack configuration

This section is for those who have ejected Angular CLI configuration or built the webpack configuration from the ground.
Import `CheatAngularCompilerResourcePlugin` in the webpack configuration `webpack.config.js`.

```js
const {
  CheatAngularCompilerResourcePlugin
} = require("webpack-dll-ng-module-loader/plugin");
```

Then add `CheatAngularCompilerResourcePlugin` **before** the `AngularCompilerPlugin` on your webpack configuration. Here the order matters since the plugin cheats `AngularCompilerPlugin` to process async resources issued by `webpack-dll-ng-module-loader`.

```js
plugins: [
  new CheatAngularCompilerResourcePlugin(),
  new AngularCompilerPlugin({
    /* compiler options */
  })
];
```

## Example

The [`integration/example`](integration/example) folder is a demo of using `webpack-dll-ng-module-loader` in an angular application with `@angular/*` dependencies bundled in a dll vendors. While the plugin tests against this application, the configuration is overly simplified to demonstrate the plugin usage only and thus is far from optimized.

You can run the following command to serve the built application

```
npm test && cd integration/example && python3 -m http.server 8611
```

Then visit `http://localhost:8611` to see the demo.

## Note

- Do not add `webpack-dll-ng-module-loader` to your dll entries, otherwise it will fail with the same reason of this [issue].

- This plugin relies on the internals of `@ngtools/webpack` and `@angular/core`, though it works well with Angular 6.0 but in the future it might fail within the minor/patch version of angular without any notice. Use at your own risk.

[issue]: https://github.com/angular/angular-cli/issues/4565

---
_Source: https://npm.io/package/webpack-dll-ng-module-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._