Next.js with Angular components

This is a demo to show a Next.js project which loads Angular components using @bubblydoo/angular-react.

It is configured to lazily load any Angular component. Angular SSR is not supported, but fallbacks are rendered using Next.js SSR. The Angular components are rendered on the client-side only and use Suspense boundaries to be rendered.

Examples

Loading an Angular component

export default function Index() {
  const componentLoader = useCallback(
    () => import("angular-module/dist/demo").then((m) => m.DemoComponent),
    []
  );

  return (
    <LazyAngularWrapper
      fallback={<div>Loading Angular Component...</div>}
      componentLoader={componentLoader}
    />
  );
}

Using an Angular Service in React

import { useInjected, useObservable } from "@bubblydoo/angular-react";
import { DemoService } from "angular-module/dist/demo";

export default function AngularUsingComponent() {
  const service = useInjected(DemoService);
  const [value] = useObservable(service.value$);
  return <div>{value}</div>;
}

export default function Index() {
  return (
    <ResolveAngularModuleContext fallback={<div>Loading Angular context...</div>}>
      <AngularUsingComponent />
    </ResolveAngularModuleContext>
  );
}

Troubleshooting

inject() must be called from an injection context or NG0203

This is probably because of a version mismatch between @angular/* inside packages/angular-module or apps/web. Make sure they're the same.

For this reason we also set compilerOptions.preserveSymlinks: true and config.resolveLoader.symlinks = false (in Webpack), this corresponds to this setting inside Angular CLI.

The Angular Compiler requires TypeScript >=4.4.2 and <4.6.0 but 4.6.2 was found instead.

This is also because of a version mismatch of typescript between packages/angular-module or apps/web. Ensure that they're using the same version.