Issue integrating Flex Monster to Angular app

Hello, David,
 
Thank you for reaching out to us. 
 
We have not managed to reproduce the issue on our end using Angular 8 (v8.1.0) and the latest version of Flexmonster (ng-flexmonster v2.8.17). 
 
We have prepared a sample Angular 8 project with Flexmonster for reference (please see "angular-8-flexmonster.zip" in the attachments). 
After unpacking the project, please run the following commands to start the application: 

npm i

npm start

The project will be available at http://localhost:4200/
 
We hope this helps to resolve the issue.
Please let us know if the sample project works fine on your end. 
 
Waiting for your reply.

Kind regards, 
Vera

Hello, David,
 
Thank you for your reply and for providing steps on how to reproduce the issue.
 
Our team is currently working on your case.
We will make sure to reach out to you shortly.
 
Kind regards,
Vera

Hello, David,
 
We have managed to reproduce the issue with Angular 4.2.4 and ng-flexmonster. 
Our team needs some time to investigate this problem further and we will provide the results with the ETA 20th of October.
 
Please let us know if this would work for you.
If any additional questions arise, please feel free to reach out.
 
Kind regards, 
Vera

Hello, David, 
 
Thank you for giving us some time to investigate the issue.
We are glad to inform you that we have found a way to get Flexmonster working with Angular 4. 
 
Looking deeper, it turned out that the Angular 4 compiler cannot understand metadata files version 4 of Angular packages (Angular 5+). It can only read metadata files version 3 (Angular 4).  
 
The ng-flexmonster module is built using the Angular 6 toolkit. This explains why the metadata mismatch error occurred.  
 
With that in mind, our team kindly recommends using ng-flexmonster source code (the flexmonster.component.ts file) instead of npm.  
 
Please see the sample Angular 4 with Flexmonster project we have prepared for reference (“pivot-angular4” in the attachments). 
Also, we have prepared the necessary steps below for guidance: 

1. Uninstall ng-flexmonster:

   npm uninstall ng-flexmonster 

2. Download flexmonster.component.ts from GitHub and place it in your application in src/app/. 
3. Install the flexmonster module:  

   npm install flexmonster --save 

4. In app.component.ts import FlexmonsterPivot the following way:  

   import { FlexmonsterPivot } from ‘./flexmonster.component’; 
   
   // Use FlexmonsterPivot just like before 

5. In app.module.ts declare the FlexmonsterPivot module:  

   import { BrowserModule } from '@angular/platform-browser'; 
   import { NgModule } from '@angular/core'; 
   
   import { FlexmonsterPivot } from './flexmonster.component'; 
   import { AppComponent } from './app.component'; 
   
   @NgModule({ 
   declarations: [ 
   AppComponent, FlexmonsterPivot 
   ], 
   imports: [ 
   BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
   }) 
   export class AppModule { } 
    

6. Import Flexmonster styles in src/styles.css:  

   @import "../node_modules/flexmonster/flexmonster.min.css";  

 
Please let us know if this works. 
Looking forward to your feedback.  
 
Kind regards,  
Vera