PageSpirit CMS package for Angular 5+

Contact: [email protected]

Installation

npm i --save @sitespirit/pagespirit

Implementation

Minimum setup

The most basic implementation only gives you dynamic routes by providing a states object and api endpoint to the module:

import { PageSpiritModule, RouteLoader } from '@sitespirit/pagespirit';

Then put the PageSpiritModule inside your NgModule imports and provide the configuration object inside the forRoot method.

imports: [
  PageSpiritModule.forRoot({
    states: {
      content_page: { // State as named inside PageSpirit CMS
        component: ContentComponent, // The Component to be loaded for the found route
        items: { // The CMS data to be resolved before allowing the client access to the route
          content: {
            itemid: 1,
            seo_main: true
          }
        }
      }
    },
    apiEndpoint: 'https://client.telespirit.com' // TeleSpirit or Cloudant(WIP) Api Endpoint
  })
]

And add the RouteLoader to the end of your RouterModule.

imports: [
  RouterModule.forRoot([
    { // Make sure this is the last index of the routes array
      path: '**',
      canActivate: [RouteLoader],
      component: ErrorComponent
    }    
  ])
]

Static routes with dynamic data

import { RouteDataResolver } from '@sitespirit/pagespirit';

imports: [
  RouterModule.forRoot([
    {
      path: '',
      component: HomeComponent,
      pathMatch: 'full',
      data: {
        items: { // The CMS data to be resolved before allowing the client access to the route
          content: {
            itemid: 1
          }
        },
        language: 'nl', // Used for multi lingual websites
        uniqueKey: 'home', // Used for multi lingual webistes
        seo: { // SEO settings can be provided, but functionality is not working yet
          nl: {
            title: 'Title for this route' // WIP,
            description: 'Description for this route' // WIP
          }
        }
      },
      resolve: { // When the RouteDataResolver is done fetching the data, the data will be available via ActivatedRoute in the component
        stateData: RouteDataResolver
      }
    }
  ])
]

Get data without routing

Import the DataService in both the app.module as the component or service where you want to use it.

import { DataService } from '@sitespirit/pagespirit';

Provide the DataService in app.module.

providers: [DataService]

Example usage inside component or service:

constructor(private dataService: DataService);

this.dataService.getItemsData(
  {
    content: { // you can add multiple properties to fetch more items
      itemid: 1
    }
  }
).then(x => {
  console.log(x); // here the data is available
});

Rehydration

app.component.ts (your root component)

Rehydration is a little weird at this stage, for some reason rehydrating a child module isnt working yet in Angular 5, so for now we have to subscribe to some observables from the PageSpiritModule to get this working:

The following code is to be placed in your root component:

import { DataService, RouteLoader } from '@sitespirit/pagespirit';

constructor(private transferState: TransferState, private dataService: DataService, private routeLoader: RouteLoader)

To be placed inside your constructor:

const PAGESPIRIT_ITEMS_STATE = makeStateKey('pagespirit_items');
const PAGESPIRIT_URLS_STATE = makeStateKey('pagespirit_urls');
let pagespiritItemsState = this.transferState.get(PAGESPIRIT_ITEMS_STATE, null as any);
if(pagespiritItemsState){
  this.dataService.rehydrate(pagespiritItemsState);
}
this.dataService.items$.subscribe(x => {
  this.transferState.set(PAGESPIRIT_ITEMS_STATE, x as any);
});
let pagespiritUrlsState = this.transferState.get(PAGESPIRIT_URLS_STATE, null as any);
if(pagespiritUrlsState){
  this.routeLoader.rehydrate(pagespiritUrlsState);
}
this.routeLoader.transferObjSubject.asObservable().subscribe(x => {
  this.transferState.set(PAGESPIRIT_URLS_STATE, x as any);
});

app.module

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { DataService } from '@sitespirit/pagespirit';

imports: [
  BrowserModule.withServerTransition({ appId: 'pagespirit' }),
  BrowserTransferStateModule,
},
providers: [DataService]

app.server.module

import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

imports: [
  ServerModule,
  ServerTransferStateModule
]