AngularJS [SOLVED]: How to port an AngularJS UI component library to latest Angular?

AngularJS [SOLVED]: How to port an AngularJS UI component library to latest Angular?

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: How to port an AngularJS UI component library to latest Angular?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246219

    Cloudy Point
    Keymaster

    QuestionQuestion

    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?

    #246220

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    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.

    Source: https://stackoverflow.com/questions/47954343/how-to-port-an-angularjs-ui-component-library-to-latest-angular
    Author: estus
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.