Question

我知道c8yDataModule在beta中，但我仍然可以使用它。我在一个应用程序中使用了此c8yDataModule，但在另一应用程序中却无法使用，并且出现了很多错误。

我已经在下面的我的angular6应用程序中导入了C8yDataModule，然后在导入和导出中将其添加了。

从'@ c8y / ngx-data'导入{C8yDataModule};

错误是关于corss-fetch和更多错误的说法。因此，我还以交叉提取的方式提出了罚单，作者说要检查最新版本的corss-fetch。

除此以外，还会出现许多其他错误，因此，我请您检查这些错误并指导我们。

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.

谢谢 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 -实际上，我是从您已经在另一个问题中给出的示例中得出的。我从那个小提琴示例中得到了相同的代码。

import { Injectable } from '@angular/core';
import { Client } from '@c8y/client';

@Injectable()
export class CumulocityService {
  public client: Client;
  constructor() {}
}

版本

npm --version 5.6.0 节点-版本 v8.11.3

Answer 1

原因是Typescript编译器中的设置非常严格：

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

如果您在项目中使用它们，这些设置可能会很好，但可能会损害使用不太严格的设置构建的其他库（例如，我们的@ c8y / client库）。因此，要么删除这些设置，要么排除node_modules（最后我没有尝试过，但应该也可以）：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

添加c8yDataModule时，期望在angular6应用程序中出现

1 个答案: