CODEWITHSUNDEEP
angularangular-cliweb-component
peter
peter

Reputation: 15089

Create reusable "web-component" / app-component in Angular

We have an Angular 4 app built with angular-cli. Instead of using the auto-generated index.html we want to distribute it as a plugin / widget which customers can import on their page. Similarly like disqus comments work,...

With the previous version built in AngularJS, the customer just had to include one CSS and JS file and the application tag.

This issue is similar to Using Angular 2 components in static & non-SPA web applications However there isn't really a working solution described.

Here is what I have so far:

The problem is I'm getting a Uncaught ReferenceError: webpackJsonp is not defined as described in https://github.com/angular/angular-cli/issues/2211.

I could of course include it via iframe, but that would make integration and custom styling more difficult.

So what are the best options to take an Angular app and somehow make it reusable on other HTML pages?

Upvotes: 0

Views: 529

Answers (1)

BogdanC
BogdanC

Reputation: 2784

So what are the best options to take an Angular app and somehow make it reusable on other HTML pages?

I'm guessing that you wanted to ask how you can develop an angular component(widget) and then reuse it on another angular app. An angular app is an app that runs on itself, it cannot be embedded on HTML pages.

What I suggest you is to generate the angular app with @angular/cli that you are going to use only to develop your widget. Inside that, you create a component that is going to be your widget. You create a module inside where you bind all the things related to your component (other components, directives, services etc.). On your generated app, you reference that module on app.module and instantiate it on app.component.html to be able to develop. But that's the only thing you do outside of your component. When is done, you can just copy your component (what's inside his folder) to your new app and import the component module into the new app.module. This way you have a reusable component/widget as you wish.

PS: Don't forget to reference any dependency used on your component also into the new app (the best way is to limit as much as possible the external dependencies, so you could have a reusable component out of the box).

Upvotes: 1

Related Questions