How do you run/debug/serve an Angular Element before a production build?

Question

I'm am using the latest version of Angular (11) to try and create an Angular Element that I will package up and use in a static webpage outside of an Angular app. However, while I'm developing the component, I would like to be able to use ng serve or something similar to be able to load up my component in the browser and test out the features. What is the best way to accomplish this?

This is my current AppModule:

@NgModule({
    declarations: [
        ImageSwitcherComponent
    ],
    imports: [
        BrowserModule,
    ],
    entryComponents: [
        ImageSwitcherComponent // shouldn't need anymore
    ],
})
export class AppModule {
    constructor(private injector: Injector) {
        const el = createCustomElement(ImageSwitcherComponent, { injector: this.injector });
        customElements.define('image-switcher', el);
    }
}

I have deleted the default app component from the project, so my ImageSwitcherComponent is the only component currently in the project. Additionally, no components are being bootstrapped, as I don't want to create a regular angular app.

Now, watching this tutorial video at the time linked, the guy says that with the above AppModule configuration, you should be able to clear out the contents of the main index.html (including getting rid of the app-root) and just add the tag for the component element, run ng-serve and your component should load:

<image-switcher></image-switcher>

Unfortunately, this does not seem to work, or I'm missing something. Nothing appears when loading localhost. And, when I run ng build --prod, the generated index.html file doesn't include any generated code beyond the tags shown above. The guy was using Angular 6, which is much older than what I'm using.

Is there something that has changed with more recent versions of Angular? Is there a better strategy for being able to serve up your Angular Elements in development and debug them in the browser?

Are you able to run these angular elements successfully. I am getting runtime error with angular 11, in angular 10 this is working as expected. — Vimal Patel, Mar 26 '21 at 13:54

score 3 · Accepted Answer · answered Nov 20 '20 at 06:36

3

Usually you use @angular/cli to create a workspace with

ng new my-workspace --create-application=false

and start with a library in it doing

ng generate library my-lib

You can then add an application to it using

ng generate application my-lib-demo

You structure is now

./projects/my-lib
./projects/my-lib-demo

You can now start using my-lib in the my-lib-demo project, using ng serve to test it locally and publish it to Github pages, so that other people can check out your awesome component ;-)

answered Nov 20 '20 at 06:36

hansmaad

18,417
9
53
94

2

You da man! This worked perfectly for me. For those interested, I ended up with 3 projects in my Angular workspace. As mentioned in the answer, I have a library for the element source and a separate application for serving up the elements. I also added a third project: an application for building the elements, just so I can keep all the concerns separated nicely. – Andrew Nov 20 '20 at 21:05

score 1 · Answer 2 · answered Feb 13 '21 at 18:20

To debug my angular component using ng-serve, before compiling it into an "element", I simply add the component tag in app.component.html and uncomment standard bootstrap in app.module.ts as:

providers: [],
bootstrap: [AppComponent],  // this line
entryComponents: [
  TrucMucheComponent
]

How do you run/debug/serve an Angular Element before a production build?

2 Answers2