Import web-component (exported as es6 module) in Angular

Question

I have a library which exports a set of web-components. The bundle is created using rollup and all exports are in place, eg.:
export { Input, Button }; where Input and Button are es6 classes defined earlier in the bundle.
I have published it as npm package to a private npm repo and am now trying to import is to another angular application
import { Input, Button } from '../../node_modules/@company/web-components';
I also have tried to import them as import '../../node_modules/@company/web-components';
But webpack seems to treeshake that import as it doesn't see where it is used. The interesting thing, however, is that when the library is exported as iife the webpack doesn't treeshake it.

Is there a way to tell angular's webpack to include the specific import regardless whether it is referenced in the code or not ?

Yuriy Kravets · Accepted Answer · 2019-03-09 17:09:39Z

Apparently there is a way to include es6 module from node_modules by adding the following line to angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "release.js",
                "input": "./node_modules/@company/web-components/dist/",
                "output": "."
              }
            ],

And then we can include it in index.html with typical module import:

<script type="module" src="release.js"></script>

Collectives™ on Stack Overflow

Import web-component (exported as es6 module) in Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related