hypernova-angular

Angular bindings for Hypernova.

On the server, wraps the component in a function to render it to a HTML string given its props.

On the client, uses the HypernovaModuleFactory to provide the metadata necessary to bootstrap the components.

Note: renderAngular and mountComponent are not supported anymore. They were removed to move the boostrapping responsability to the library consumer in order to support AOT and JIT compiling.

Install

npm install hypernova-angular

Server Usage

Uses renderAngular to return hypernova bindings.

import{renderAngular}from'hypernova-angular/server'import{ExampleModule}from'./components/example/example.module'import{ExampleComponent}from'./components/example/example.component'hypernova({getComponent(name){if(name==='Example'){returnrenderAngular(name,ExampleComponent,ExampleModule)}}}

Browser Usage

You can use Ara CLI to create a service (Nova) with everything ready to start.

ara new:nova -t angular

Or, you can use the following configurations.

App Module

The following code define a AppModule responsible of bootstrapping the Angular component in Hypernova placeholder.

• Hypernova.Name: Name of the component to bootstrap.
• Hypernova.Node: The placeholder where the component will be rendered.

import{NgModule,Inject}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{ExampleModule}from'./components/example/example.module'import{ExampleComponent}from'./components/example/example.component';constAPP_ID='hypernova';constcomponents={'Example': ExampleComponent}
@NgModule({imports: [ExampleModule,BrowserModule.withServerTransition({appId: APP_ID}),],entryComponents: [ExampleComponent]})exportclassAppModule{constructor(
@Inject('Hypernova.Name')privatename: string,
@Inject('Hypernova.Node')privatenode: HTMLElement){}ngDoBootstrap(app){constComponent=components[this.name]if(Component){returnapp.bootstrap(Component,this.node)}};}

Use the components dictionary to support more components.

constcomponents={[Hypernova.Name]: AngularComponent}

Browser JIT

browser.main.ts

import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppModule}from'./app.module';import{load,loadById,HypernovaModuleFactory}from'hypernova-angular';import{CompilerFactory,Compiler}from'@angular/core';constplatform=platformBrowserDynamic();// Compile module (JIT)constcompilerFactory: CompilerFactory=platform.injector.get(CompilerFactory);constcompiler: Compiler=compilerFactory.createCompiler([])constmoduleFactory=compiler.compileModuleSync(AppModule);constrender=(name: string,placeholder: any)=>{// Wrap module factory to provide necessary metadata to boostrap it.consthypernovaModuleFactory=newHypernovaModuleFactory(moduleFactory,name,placeholder);platform.bootstrapModuleFactory(hypernovaModuleFactory);}// Nova Bridge supportdocument.addEventListener('NovaMount',(event)=>{const{ name, id }=(<CustomEvent>event).detail;constplaceholder=loadById(name,id);if(placeholder){render(name,placeholder);}})// Render in placeholders rendered by Hypernova Serverload('Example').forEach(render.bind(this,'Example'));

Browser AOT

browser.aot.main.ts

import{platformBrowser}from'@angular/platform-browser';import{AppModuleNgFactory}from'./app.module.ngfactory';import{load,loadById,HypernovaModuleFactory}from'hypernova-angular';enableProdMode();constrender=(name: string,placeholder: any)=>{consthypernovaModuleFactory=newHypernovaModuleFactory(AppModuleNgFactory,name,placeholder);platformBrowser().bootstrapModuleFactory(hypernovaModuleFactory);}document.addEventListener('NovaMount',(event)=>{const{ name, id }=(<CustomEvent>event).detail;constplaceholder=loadById(name,id);if(placeholder){render(name,placeholder);}})load('Example').forEach(render.bind(this,'Example'));