How would you go about creating multiple elements in the same angular project? Lets say you are migrating an old web application so you have to create one angular element at the time but the goal is that eventually you will use the angular app as a whole.
That's a good question mate. Usually, the answer would differ from project to project due to different business cases. What we've (in the teams I have been a part of/leading) done before is that we for instance extracted the core components like Header/Footer to Web components, and more simple components like buttons, chips, etc. What you want to avoid is spending too much time to ensure that the web components work :)
Excellent question mate. It's quite difficult to set up debugging for this. What you could do is build without a prettified version for instance with sourceMap: true :)
Good question mate. The idea is that you create a complete component library in Angular, which then could be utilized in any framework. In this video, I use it in index-test.html to simulate how it could be used with vanilla.js. The index-test file could utilize multiple components from the generated code :)
@@MarkusThiel Not sure I understood you correctly mate. But let's say, you got a couple of projects you want to work with. Thus, the main application shall be in Angular, meanwhile, the other applications might be in React, Vue, or even in Vanilla.js. You can generate a chunk of that Angular application if created as a component library as standalone components together with Angular Elements. This will make it possible for your team to get the same "look" and feel cross different applications. And since we're using Angular within Vanilla.js, there are a couple of things we need to set up which doesn't come out of the box, for instance, the event emitter. Hope that was clear mate. And once again, thanks for your interest! :)
Thanks for your reply. You know there'll be another style file for a regular Angular app. But I didn't see you handling, contacting or importing the style file. That's why I'm asking.@@DevBySeb
how does this work with angular 17? Theres no runtime.js file that gets generated in the build. Does the runtime.js happen in main.js now with angular 17? Is the bootstrap process the same?
Figured it out and sharing here in case anyone else has this question. You just need to cat the polyfill & main js files. Another thing to note is that since Angular v17 uses esbuild, you have to run the test index file on a server to see the custom element otherwise you'll get a CORS error in the client (it'll say failed to export from lib but its really a cors error).
Wonderful video. Thank you very much
Can you please share how we can do the same in Angular 17 using standalone components
There is a comment here outlining that answer mate 😁
It was very helpful. thanks. subscribed !
Thank you for watching mate 🙏🙏
Very useful, thanks :)
Thank you and thanks for watching mate 🙏🏼
How would you go about creating multiple elements in the same angular project? Lets say you are migrating an old web application so you have to create one angular element at the time but the goal is that eventually you will use the angular app as a whole.
That's a good question mate. Usually, the answer would differ from project to project due to different business cases. What we've (in the teams I have been a part of/leading) done before is that we for instance extracted the core components like Header/Footer to Web components, and more simple components like buttons, chips, etc.
What you want to avoid is spending too much time to ensure that the web components work :)
Great work👏
🙏🙏🙏
How to load assets folder images of web app in host application.
Good question mate. If the target Host application is written in Angular, you would have to include it under assets in angular.json-file.
Is there a way to make Debugging possible with this component?
Excellent question mate. It's quite difficult to set up debugging for this. What you could do is build without a prettified version for instance with sourceMap: true :)
So the idea here is to create a application for each component you want to use a custom element in eg. index-test.html ?
Good question mate. The idea is that you create a complete component library in Angular, which then could be utilized in any framework. In this video, I use it in index-test.html to simulate how it could be used with vanilla.js. The index-test file could utilize multiple components from the generated code :)
@@DevBySeb hmmm.. but so the app is create just to be able to generate files needed?
@@MarkusThiel Not sure I understood you correctly mate.
But let's say, you got a couple of projects you want to work with. Thus, the main application shall be in Angular, meanwhile, the other applications might be in React, Vue, or even in Vanilla.js.
You can generate a chunk of that Angular application if created as a component library as standalone components together with Angular Elements. This will make it possible for your team to get the same "look" and feel cross different applications. And since we're using Angular within Vanilla.js, there are a couple of things we need to set up which doesn't come out of the box, for instance, the event emitter.
Hope that was clear mate. And once again, thanks for your interest! :)
@MarkusThiel NX build system is what you're looking for
@@dawidkostka1346 I have been using Nx for the past 3-4 years.. how does it solve the question?
how were the styles handled?
In a similar way it would be done as if its a regular Angular component mate 😁
Thanks for your reply. You know there'll be another style file for a regular Angular app. But I didn't see you handling, contacting or importing the style file. That's why I'm asking.@@DevBySeb
Routing is not working in angular 18 ,after following this step.
how does this work with angular 17? Theres no runtime.js file that gets generated in the build. Does the runtime.js happen in main.js now with angular 17? Is the bootstrap process the same?
Figured it out and sharing here in case anyone else has this question. You just need to cat the polyfill & main js files. Another thing to note is that since Angular v17 uses esbuild, you have to run the test index file on a server to see the custom element otherwise you'll get a CORS error in the client (it'll say failed to export from lib but its really a cors error).
Sorry for the late response mate and thank you for sharing with us mate! Much appreciated! 🙏🏼
@@bbbjames1 Hi, thanks for the tip. I tried this but it is not working. Followed all steps you mentioned.
@@bbbjames1 Can you share your code with Angular 17. I am getting error when I render bundled js
"Uncaught SyntaxError: Unexpected token 'export' (at component-lib.js:9:144957)" i thing you mean this error ?
@@bbbjames1
Not working for angular 18
@@MarektAtJJ thanks for the feedback mate. I might try it out and make a video for it 😁
@@DevBySeb Yes it's will works by doing soke workaround but as soon as I include more features I ended up with some errors who are kind of wearied.
Angular component animation does not work with Angular Elements!!!
I haven't tested that out to be honest mate. Thanks for that input - I would then recommend using CSS animations if possible. :)
@@DevBySeb Thank you.