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?
2 answers
solution1
3 ACCPTED 2019-07-02 06:59:54
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
solution2
0 2019-12-27 14:56:14
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.