Register Angular code components

You can make your Angular components available for drag and drop within Plasmic.

Plasmic’s core code component system supports React first, so your “app host” and your code components must be React. However, you can create simple React wrappers around your Angular components. This is possible because Angular components can be published as normal Web Components aka “custom elements” using @angular/elements.

You can check out the following example as a complete codebase here, or read on for the step by step instructions:

https://github.com/plasmicapp/plasmic/tree/master/examples/angular-components

Step-by-step from scratch

In the following, we’re going to assume you’re using a Next.js app host.

  1. Create a new Angular project:

    Copy
    ng new angular-app
  2. Install Angular elements:

    Copy
    ng add @angular/elements
  3. Edit src/app/app.module.ts:

    src/app/app.module.ts
    Copy
    import { DoBootstrap, Injector, NgModule } from '@angular/core';
    import { createCustomElement } from '@angular/elements';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule implements DoBootstrap {
    constructor(private injector: Injector) {
    const webComponent = createCustomElement(AppComponent, {
    injector: this.injector
    });
    customElements.define('angular-component', webComponent);
    }
    ngDoBootstrap() {}
    }
  4. Build:

    Copy
    ng build
  5. Create a React app host, following the instructions here and using create-plasmic-app. We’ll use a Next.js one.

  6. Copy the built files from the Angular app to your React app, in a ng subdirectory. (For a production workflow, you’ll want to automate this process or to publish the components as an npm package.)

    Copy
    cp -r angular-app/dist/nested-app/ react-app/ng/
  7. Build the files. For the purposes of this demo, we’ll use the hard-coded hashes. Note that Next.js performs SSR, but the custom elements require Web APIs that are not supported in Node, so we load these components with dynamic imports.

    components/AngularTest.tsx
    Copy
    /** @format */
    import React, { useEffect, useState } from 'react';
    function AngularTest({ className, message }: { className?: string; message?: string }) {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
    (async () => {
    // Do not run these on Next.js server side, since custom elements are not available there.
    // @ts-ignore-next-line
    await import('../ng/runtime.6263bc5acf5b193e');
    // @ts-ignore-next-line
    await import('../ng/polyfills.5cf9041adbc6958d');
    // @ts-ignore-next-line
    await import('../ng/main.ef91450b26733d80');
    setLoaded(true);
    })();
    });
    return (
    <div className={className}>
    {/* @ts-ignore-next-line */}
    {loaded && <angular-component message={message} />}
    </div>
    );
    }
    export default AngularTest;
  8. Add the code component registration call, with whatever props you need:

    plasmic-init.ts
    Copy
    PLASMIC.registerComponent(AngularTest, {
    name: 'AngularTest',
    props: {
    message: 'string'
    }
    });
  9. Start the app with:

    Copy
    npm start
  10. You can now find and insert your “AngularTest” component from the insertion menu.

Next steps

You can do a couple of things from here on out to make this nicer:

  • Clean up the publishing / importing from the Angular app into the React app.
  • Make the wrapper generic so that it can apply across all your Angular components.

We would like to improve future support for Angular components, but for now, if you are needing Angular components in Plasmic, we hope these instructions can unblock you.

Give feedback on this page