I am following the demo found in bubblydoo/next.js-angular-demo in order to document support for a design system in angular, but i am facing a couple of issues, the version of angular-react package has advanced and now AngularWrapperWithModule requires a injector so i am doing this:
import * as React from "react"
import { NgModuleRef } from "@angular/core"
import {
AngularWrapper,
AngularWrapperWithModule
} from "@bubblydoo/angular-react"
import { suspend } from "suspend-react"
import { AngularInjectorContext } from "./lazyAngularContextProvider"
export function SuspendingLazyAngularWrapperWithPromises({
moduleRefPromise,
componentPromise,
serverFallback,
...props
}: {
moduleRefPromise: Promise<NgModuleRef<any> | "IS_SERVER">
componentPromise: Promise<any>
serverFallback: any
} & Omit<Parameters<typeof AngularWrapper>[0], "component">) {
const injector = React.useContext(AngularInjectorContext)
const [moduleRef, component] = suspend(
(moduleRefPromise, componentPromise) =>
Promise.all([moduleRefPromise, componentPromise]),
[moduleRefPromise, componentPromise]
)
const [loaded, setLoaded] = React.useState(false)
React.useEffect(() => setLoaded(true), [])
if (!loaded || moduleRef === "IS_SERVER") return serverFallback
return (
<AngularWrapperWithModule
component={component}
moduleRef={moduleRef}
injector={injector ?? moduleRef.injector}
{...props}
/>
)
}
import * as React from "react"
import type { Injector, NgModuleRef } from "@angular/core"
export const LazyAngularModuleContext =
React.createContext<() => Promise<NgModuleRef<any> | "IS_SERVER">>(null)
export const AngularInjectorContext = React.createContext<Injector | null>(null)
export default function LazyAngularModuleContextProvider(props: {
children: any
moduleRefLoader: () => Promise<NgModuleRef<any> | "IS_SERVER">
injector?: Injector
}) {
const moduleRefPromiseRef = React.useRef<Promise<
NgModuleRef<any> | "IS_SERVER"
> | null>(null)
const moduleRefLoader = props.moduleRefLoader
const cachedModuleRefLoader = React.useCallback(() => {
if (moduleRefPromiseRef.current) return moduleRefPromiseRef.current
const newModuleRefPromise = moduleRefLoader()
moduleRefPromiseRef.current = newModuleRefPromise
return newModuleRefPromise
}, [moduleRefLoader])
return (
<LazyAngularModuleContext.Provider value={cachedModuleRefLoader}>
<AngularInjectorContext.Provider value={props.injector ?? null}>
{props.children}
</AngularInjectorContext.Provider>
</LazyAngularModuleContext.Provider>
)
}
const componentLoader = React.useCallback(
() => import("primeng/button").then((m) => m.Button),
[]
)
return (
<LazyAngularWrapper
fallback={<h1>Loading...</h1>}
componentLoader={componentLoader}
inputs={{ label: "Click me!" }}
/>
)
import "../globals.css"
import "@angular/compiler"
import configureZonejs from "../components/AngularWrapper/configureZoneJs"
import LazyAngularModuleContextProvider from "../components/AngularWrapper/lazyAngularContextProvider"
import loadAngularModule from "../components/AngularWrapper/loadAngularModule"
typeof document !== "undefined" && configureZonejs()
const moduleRefLoader = () => {
if (typeof document === "undefined") return Promise.resolve("IS_SERVER")
return import("primeng/button")
.then((m) => m.ButtonModule)
.then((m) => loadAngularModule(m))
}
export default function App({ Component, pageProps }) {
return (
<LazyAngularModuleContextProvider moduleRefLoader={moduleRefLoader}>
<Component {...pageProps} />
</LazyAngularModuleContextProvider>
)
}
Let me know if there is anything i can do to help.