When c8yDataModule is added, expections are occuring in the angular6 Applications - cumulocity

Question

I know that c8yDataModule is in beta, but still i can use it. I used this c8yDataModule in one app, but it is not working in another app, and i get a lot of errors.
I have imported the C8yDataModule in my angular6 application like this below and then in the imports & exports i have added it.
import { C8yDataModule } from '#c8y/ngx-data';
The error is saying about the corss-fetch and some more errors. So i also raised a ticket in cross-fetch and the authors says to check the latest version of the corss-fetch.
Apart from this many other errors are also coming, so i request you to check these errors and guide us.
https://github.com/lquixada/cross-fetch/issues/22
ERROR in node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/FetchClient.d.ts(1,29): error TS7016: Could not find a declaration file for module 'cross-fetch'. 'C:/Projects/angular-its-code/node_modules/cross-fetch/dist/node-ponyfill.js' implicitly has an 'any' type.
Try `npm install #types/cross-fetch` if it exists or add a new declaration (.d.ts) file containing `declare module 'cross-fetch';`
node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/IAuthentication.d.ts(10,5): error TS2411: Property 'tenant' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/IAuthentication.d.ts(11,5): error TS2411: Property 'user' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/IAuthentication.d.ts(12,5): error TS2411: Property 'password' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/IAuthentication.d.ts(13,5): error TS2411: Property 'token' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/#c8y/ngx-data/node_modules/#c8y/client/lib/src/core/IAuthentication.d.ts(14,5): error TS2411: Property 'tfa' of type 'string | undefined' is not assignable to string index type 'string'.
node_modules/#c8y/ngx-data/node_modules/rxjs/internal/symbol/observable.d.ts(4,9): error TS2687: All declarations of 'observable' must have identical modifiers.
Thanks
BA
{
"name": "frontend",
"version": "4.0.0",
"license": "MIT",
"browserslist": [
"dead"
],
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.0",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"#c8y/ngx-components": "0.0.2-beta2",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"rxjs-compat": "6.2.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/compiler-cli": "^6.1.7",
"#angular/language-service": "^6.1.7",
"#angular/platform-browser": "^6.1.0",
"#c8y/ngx-components": "0.0.2-beta1",
"#types/jasmine": "^2.8.8",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^10.9.4",
"angular-translate": "^2.18.1",
"codelyzer": "^4.4.4",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.5",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "^7.0.1",
"tslint": "~5.9.1",
"typescript": "^2.9.2"
}
}
// angular core
import {NgModule, ErrorHandler} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {FormsModule} from '#angular/forms';
import {HttpClientModule, HttpClient, HTTP_INTERCEPTORS} from '#angular/common/http';
import {TranslateModule, TranslateLoader} from '#ngx-translate/core';
// app modules / services / constants / ...
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app.routing';
import {AlertComponent} from './shared/components/alert.component';
import {AuthGuard} from './core/auth/auth.guard';
import {JwtInterceptor} from './core/http/jwt.interceptor';
import {CatchErrorInterceptor} from "./core/http/catch-error.interceptor";
import {AlertService} from './shared/services/alert.service';
import {AuthenticationService} from './shared/services/authentication.service';
import {InlineEditService} from "./shared/services/inline-edit.service";
import {UserService} from './shared/services/user.service';
import {SideNavService} from "./layouts/main-layout/services/side-nav.service";
import {LoginModule} from './modules/login/login.module';
import {createTemparTranslateLoader} from "./core/i18n/tempar-translation-loader";
import { CumulocityService } from '../app/shared/services/c8y.service';
import { C8yDataModule } from '#c8y/ngx-data';
export class UIErrorHandler extends ErrorHandler {
constructor() {
super();
}
handleError(error: any) {
super.handleError(error);
alert(`Error occurred:${error.message}`);
}
}
#NgModule({
declarations: [
AppComponent,
AlertComponent,
],
imports: [
// core
BrowserModule,
FormsModule,
HttpClientModule,
// routing
AppRoutingModule,
// app
LoginModule,
C8yDataModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTemparTranslateLoader,
deps: [HttpClient]
}
})
],
providers: [
AuthGuard,
AlertService,
AuthenticationService,
SideNavService,
UserService,
InlineEditService,
CumulocityService,
// {
// provide: ErrorHandler,
// useClass: UIErrorHandler
// },
{
provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: CatchErrorInterceptor,
multi: true
}
],
bootstrap: [
AppComponent,
],
exports: [
C8yDataModule
]
})
export class AppModule {
}
authentication.service.ts.
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { environment } from '../../../environments/environment';
import { User } from "../../models/user";
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CumulocityService } from './c8y.service';
#Injectable()
export class AuthenticationService {
loggedIn: boolean = false;
isAdmin: boolean = false;
token: string | null = null;
username: string = '';
alarms:any = [];
private API_ENDPOINTS = {
// login: '/user/login',
login: 'user/currentUser?auth'
}
constructor(private http: HttpClient, public cumulocityService:CumulocityService) {
console.log("cumulocityService", this.cumulocityService.client);
debugger;
this.cumulocityService.client.alarm.list$().subscribe((data) => this.alarms = data);
this.loadToken();
}
}
c8y.service.ts - Actually i took it from your example which you had already given in another question. The same code i took it from that fiddle example.
import { Injectable } from '#angular/core';
import { Client } from '#c8y/client';
#Injectable()
export class CumulocityService {
public client: Client;
constructor() {}
}
versions
npm --version
5.6.0
node --version
v8.11.3

Answer 1

The reasons for that are very strict settings in your Typescript compiler:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true, /* Enable strict null checks. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
These settings might be good if you use them on your project but can harm other libs (e.g. our #c8y/client lib) that are built with not so strict settings. So either remove those settings or exclude node_modules (last I haven't tried but should work as well):
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}