0

I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.

AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.

There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.

I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.

Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.

Here is an example of my problem:

Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.

If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.

The documentation explains how to use autocomplete:

https://material.angular.io/components/autocomplete/overview

There is also a working example of the component:

https://stackblitz.com/angular/ggmpnaqqqxk

In the documentation it shows that you can use the component like this:

<mat-autocomplete>
   <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
   </mat-option>
</mat-autocomplete>

But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.

They can't just use the <mat-autocomplete> component in an existing HTML page.

Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.

It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.

There is even a working example:

https://codepen.io/anon/pen/goLrpJ

It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.

How do I create an Angular 5 application that can be used as a component library with existing HTML?

Daniel
  • 3,541
  • 3
  • 33
  • 46
Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • Angular is a completely different approach to AngularJS. It's not designed for that component-based use. – jonrsharpe Dec 23 '17 at 17:05
  • @jonrsharpe I agree, but what does that mean for me? Am I basically screwed and have to completely rewrite my UI library in React from scratch? I can't keep using AngularJS or am I wrong. Isn't it a dead end library. It has no future. When you go to the AngularJS website there is a banner message that says "this is our old framework, try our new framework instead". There is technical debt, but this feels like technical screwed. – Reactgular Dec 23 '17 at 17:08
  • There has to be other developers here on stackoverflow faced with the same problems as I am. Someone somewhere must have found a solution? Why aren't more people talking about this. It's very hard to find google search results with a solution. – Reactgular Dec 23 '17 at 17:10
  • 1
    That's up to you: rewrite in React (or Vue, or something), continue to use AngularJS (and accept that it may not get new features for too much longer); switch wholesale to Angular; or whatever you think is best. And no, there isn't necessarily **a** solution. – jonrsharpe Dec 23 '17 at 17:12
  • Angular 2+ is suited even less for web components than AngularJS. If you have enough experience with both, you should know that by now. You can make it work as non-SPA widget, but it will suck for standalone components. Currently https://github.com/angular/angular/issues/1858 issue is a big obstacle for that. – Estus Flask Dec 23 '17 at 17:15
  • @estus thank you for linking to an issue. I'm looking for a "definitive" answer that says it can't be done. It'll give me the strength to give up on AngularJS and basically start over. Which is painful. – Reactgular Dec 23 '17 at 17:18
  • @estus `Angular 2+ is suited even less for web components` is extremely ironic given that it's a component framework. An almost ironic middle finger from the Angular team. – Reactgular Dec 23 '17 at 17:22
  • It's not a *component framework*, it's a framework for creating full-fat SPA web apps. – jonrsharpe Dec 23 '17 at 17:24
  • It can't. All related issues are constantly closed in favour of this one. It addresses root element attributes in the first place, but same problem applies to root component projected (transcluded) content, like [this one](https://stackoverflow.com/questions/39125219/ng-content-in-root-angular-2-component). So Vue, React and A1 are better candidates for single non-SPA components, at least currently. Angular web-component-like elements are [on the roadmap](https://blog.angular.io/the-angular-team-at-angularmix-2d56fd7fde65#ab51) – Estus Flask Dec 23 '17 at 17:25
  • @estus you should post Angular Elements as an answer. That looks like a solution and while it's in alpha. It's still something that is an answer. – Reactgular Dec 23 '17 at 17:32
  • Sure, if it answers your question. I'm not really sure if we'll be able to get them in nearby future. – Estus Flask Dec 23 '17 at 17:46

1 Answers1

1

Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.

Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Thanks for the answer, and I wish this was a solid solution but it's just too little too late for me. I have a lot of AngularJS directives that augment the functionality of existing HTML. A simply thing like a tooltip doesn't translate to Angular Elements (at least not easily, and it should be easily). – Reactgular Dec 23 '17 at 19:19
  • As of now, I'd say React is a good choice for framework agnostic components, just because they are flexible enough and don't impose much limitations. This depends on how UI library is supposed to be used, of course. – Estus Flask Dec 23 '17 at 20:04
  • 1
    This is how you do it. https://stackblitz.com/edit/angular-dynamic-content-viewer-95jzut its the exact same thing as what Angular Elements is going to be doing. This code was actually used to create angular.io where they do the dynamic content for each page but use angular components in their innerHTML – Zuriel Dec 28 '17 at 22:11