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

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

Does any one faced this kind of error?, if yes please share your thoughts on how to resolve this exceptions. Thank you. — PCA, Sep 06 '18 at 04:05
sorry, we don't have this issues before. It looks like a very strict (or old) typescript compiler. Can you pls check you typescript version? And can you maybe update your question and show how you import the data module as well how you start the build? Do you use angular/cli for that? — Jan Hommes, Sep 06 '18 at 07:57
I have added the package.json, along with the npm, node version also too. We have been struggling to fix this expection for more than a week. If you can find some thing wrong in the package.json dependencies please let us know. — PCA, Sep 10 '18 at 12:15
Can you try typescript version `2.7.2`? And can you add your `CumulocityService` to the question? — Jan Hommes, Sep 10 '18 at 13:19
I have tried with 2.7.2 also, still i get the same set of errors. Also i have added the code for the cumulocityService. — PCA, Sep 10 '18 at 14:15
strange: last try: do you use `await Client.authenticate` or `new Client` to authenticate the client? How does it look like? Can you add that part or the whole `authenticate.service` to your question? — Jan Hommes, Sep 10 '18 at 14:38
@Jan homes, Really I did not wrote any code inside the body of the class, before that itself i get these errors. So again i tested the code by commenting imports and exports & providers where i have added the reference of the c8y/client. but i did not removed the dependencies in the package.json file, after this if i run it is running properly. So from this we can declare that, Whenever i import the c8y/client i get these errors, which is actually not allowing to use the c8y/client library. :( — PCA, Sep 10 '18 at 15:21
But definitely, there is a problem in the dependencies only i think, because the same code which you shared is working fine when you use the c8y and also for me in another sample app it is too working. only in this app it is not working, which is the real app and it should work. Please let us your thoughts — PCA, Sep 10 '18 at 15:27
can we chat? https://chat.stackoverflow.com/rooms/179755/angular-c8y — Jan Hommes, Sep 10 '18 at 15:35

score 1 · Answer 1 · answered Sep 11 '18 at 17:51

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"
  ]
}

Thank you Jan Hommes. I will check this today. – PCA Sep 17 '18 at 04:43 — PCA, Sep 17 '18 at 04:43

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

1 Answers1