How to import Angular Web Component in another Angular App

user_6694645 0
Viewed 4886

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?

web-component angular
2 Answers

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

user_66946450

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.

user_122135550
Related