npm package: @sitespirit/pagespirit
Description: Contact: david@sitespirit.nl
Latest version: 0.0.90

# PageSpirit CMS package for Angular 5+

Contact: david@sitespirit.nl

# 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
]
```