Hi Friends,
In this segment, we will talk about how to load and run different web components at the same time. In this way, on the off chance that you all are not comfortable with custom components, you can check my blog around that http://bit.ly/ng-elements. Presently, it sounds like clever what is big manage numerous custom-components, on the off chance that it can work single custom component then it can work with various custom components also. Be that as it may, this isn’t the situation. When, you consume second part, you will get “Zone already loaded” kind of error.
Therefore, even if you comment zone import from polyfills.ts, it will present that angular needs zonejs to execute error. Hence, if you follow this post https://github.com/angular/angular/issues/23732, you will see following comment from the rob wormald from angular cli team.
Subsequently, with a specific end goal to work around this issue, we have one library from Manfred Steyer https://www.npmjs.com/package/ngx-build-plus in addition to. On the off chance that you take after this connection you have to do following things in your application. Beneath I have test precise library which I at that point changed over into web segment utilizing following steps.
ng add @angular/elements
npm install @webcomponents/custom-elements –save
Now, I need to expose component as custom web component like shown below.
Next, we need to install npm install ngx-build-plus –save-dev.
Note:- architect property has been renamed to targets in angular.json in newer version. This change comes into action when you install and apply builder.
Next, we need to Create a file webpack.extra.js with a partial webpack config that tells webpack to exclude packages like @angular/core. Here is my snippet.
After this, my build command looks like this.
Upon running the same command, it generated below stuff
After that it will generate following components like this
Presently, we can take this segment and related umd files like appeared underneath in the index.html document. Like above advance, I have made another custom component for footer too and consumed the same in page.
With this change in place, now when I will see the same page in browser, it will appear like shown below.
I trust you would have preferred this exchange. Wanting to see this issue will be taken care of in coming versions of angular. Right now, Its not straight forward to consume various web segments in page and there is no meaning writing one component per page.
Thanks,
Rahul Sahay
Happy Coding
Also published on Medium.