How to import Angular Web Component in another Angular App

Question

I have one app built with Angular 5.2. I've also built a web component from Angular 8.0. If I'm about to put that web component in a static html I would do it like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Button Test Page</title>
  <!-- This is the Web Component import -->
  <script src="elements.js"></script>
</head>

<body>
<custom-button></custom-button>
</body>

</html>

Running this index.html file would have the web component built in. How ever if I apply the same approach to an Angular app (to include it in my Angular 5.2 app), it doesn't work.

If I try importing straight from main index.html, I get the file not found error. If I import it from angular.json scripts, I will get unexpected token error.

How exactly am I supposed to import an Angular web component into existing Angular app?

You can't use a 8.0 component in a 5.2 app. You'll need to upgrade your angular version. I'm not sure what you mean by "static" html. You can't consume a component without running angular — Liam
– Liam, Commented Jul 1, 2019 at 15:06
@Liam You are wrong there. I’m talking about Angular Elements aka Web Components. I’ve plugged the Angular v7 web component in Angular v4 app in the past and it was working good — Dino
– Dino, Commented Jul 1, 2019 at 16:34
And I am not talking about normal components. It seems that you are not familiar with the concept of web components. — Dino
– Dino, Commented Jul 1, 2019 at 16:45

Dino · Accepted Answer · 2019-07-02 06:59:54Z

5

The solution was to import the script in angular.json / .angular-cli.json

"scripts": [
   "assets/elements.js"
]

How ever if you leave it like that, you will still get the errors most likely to multiple zone.js imports - One coming from your Angular App and other one from your Angular Web Components app. The solution is to disable one of those. Logically it would be to disable the one coming from a web component - but it turned out that it doesn't work. You will have to remove the import of zone.js from your main Angular App, and keep it in your web component.

Go to polyfills.ts and comment out or remove

import 'zone.js/dist/zone';

Also don't forget to add CUSTOM_ELEMENTS_SCHEMA to your AppModule so that Angular knows you will be using outside components.

@NgModule({
    declarations: [ ... ],
    bootstrap:    [ ... ],
    imports: [ ... ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

Now you can use your web component anywhere in your application with

<custom-button></custom-button>

WARNING: This approach will not work if you are running different versions of webpack in those two applications

answered Jul 2, 2019 at 6:59

Dino

8,37213 gold badges50 silver badges93 bronze badges

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

6 Comments

Utkarsh Over a year ago

Were you able to build the project and get it working? For me, the component is working fine if I run the project using ng serve. But I'm unable to see anything (literally nothing) if I try to run the files complied by ng build --prod. As soon as I add in "scripts" in angular.json I'm facing this.

ACeleghin Over a year ago

@UtkarshGupta I have the same problem, did you solve it?

Utkarsh Over a year ago

@user14649759, Sadly no. We moved to use React instead.

Dino Over a year ago

I was able to get it work, If I’ll have time this weekend, I’ll try to do it with latest Angular version.

ACeleghin Over a year ago

@Dino I hope you get a solution, I think it's a webpack problem when you go in prod

|

Travel and code enthousiast · Accepted Answer · 2019-12-27 14:56:14Z

The solution that worked for me was to leave the polyfills.ts file in the main app unchanged and in the web component app :

go to polyfills.ts file and comment out

import 'zone.js/dist/zone';

in the same file put a check to add the import only if the zone is not present

declare var require: any
if (!window['Zone']) {
    require('zone.js/dist/zone'); // Included with Angular CLI.
}

If you continue to receive error about the zone in the main application maybe you concatenate the es5 polyfills file.

When building the web component application in the dist folder you get five output files runtime.js, scripts.js, main.js, polyfills.js and polyfills-es5.js. Try concatenating the four first and together with the change above you should see your main application working fine with the web component.

Collectives™ on Stack Overflow

How to import Angular Web Component in another Angular App

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related