search

carbon-design-system / carbon-components-angular

An Angular implementation of the Carbon Design System for IBM.
https://angular.carbondesignsystem.com
Apache License 2.0
535 stars 309 forks source link

Angular problem when upgrade form 14 to 18: sub project pop up error when use one project [both two were upgrated forom 14 to 18] #2944

Closed zosmf-Mira closed 4 months ago

zosmf-Mira commented 4 months ago

Detailed description

Error: node_modules/zmf-common/src/app/_services/zosmf-interceptor.service.ts:42:3 - error TS2416: Property 'intercept' in type 'ZosmfInterceptorService' is not assignable to the same property in base type 'HttpInterceptor'. Type '(req: import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_modules/@angular/common/http/index").HttpRequest, next: import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_modules/@angular/common/http/index").HttpHandler) => import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_mo...' is not assignable to type '(req: import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_modules/@angular/common/http/index").HttpRequest, next: import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_modules/@angular/common/http/index").HttpHandler) => import("/Users/yuanyuan/Documents/GitHub_UI/zmfui_diagnosis/node_mo...'. Two different types with this name exist, but they are unrelated. Type 'Observable<HttpEvent>' is missing the following properties from type 'Observable<HttpEvent>': _isScalar, _trySubscribe, _subscribe

42 intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {



"zmf-common" is another project I can change codes, I see the project source code, no error displayed, it just happened in "zmfui_diagnosis" this repository which depends on "zmf-common".

 it works well before upgrade angular from 14 to 18, could you please help address it? As it is block our project, so if you could address it ASAP I'll very appreciate!

below is "zmfui-diagnosis"' package.json file content.
{
  "name": "diagnosticsassistant",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "pkg-build": "ng build diagnosticsassistant --base-href /zosmf/diagnostics/dist/",
    "xdeploy": "chmod 755 xdeploy.sh && xdeploy.sh",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/cdk": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/material": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "@carbon/colors": "^11.14.0",
    "@carbon/elements": "^11.22.0",
    "@carbon/grid": "^11.13.0",
    "@carbon/icons": "^11.44.1",
    "@carbon/layout": "^11.13.0",
    "@carbon/motion": "^11.10.0",
    "@carbon/styles": "^1.60.1",
    "@carbon/themes": "^11.18.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@types/file-saver": "^2.0.5",
    "carbon-components": "^11.48.1",
    "carbon-components-angular": "^5.27.3",
    "file-saver": "^2.0.5",
    "jquery": "^3.6.0",
    "karma-coverage": "^2.2.0",
    "rxjs-compat": "6.6.7",
    "tslib": "^2.6.3",
    "zmf-common": "git+https://ddfe8970bb4fcfec305a7eb1e5bea699817d3b36:x-oauth-basic@github.ibm.com/zosdev/zmfui_common.git",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.0",
    "@angular/cli": "^18.1.0",
    "@angular/compiler-cli": "^18.1.0",
    "@angular/language-service": "^18.1.0",
    "@types/jasmine": "^5.1.4",
    "@types/jasminewd2": "^2.0.13",
    "@types/node": "^20.14.11",
    "codelyzer": "^6.0.2",
    "jasmine-core": "^5.1.2",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "^6.4.3",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "^2.1.0",
    "protractor": "^7.0.0",
    "rxjs": "^6.6.7",
    "ts-node": "^10.9.2",
    "tslint": "^6.1.3",
    "typescript": "^5.5.3"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead",
    "not IE 9-11",
    "not ios_saf 15.2-15.3"
  ]
}

> Describe in detail the issue you're having.

> Is this a feature request (new component, new icon), a bug, or a general issue?

> Is this issue related to a specific component?

> What did you expect to happen? What happened instead? What would you like to see changed?

> What browser are you working in?

> What version of the Carbon Design System are you using?

> What offering/product do you work on? Any pressing ship or release dates we should be aware of?

## Steps to reproduce the issue

<!--
Please try to re-create the issue using our Codesandbox template available here:
https://codesandbox.io/s/carbon-components-angular-0129r494ql

This helps reduce the issue to an isolated case that helps us out when debugging.
If you're able to reproduce using the codesandbox link above, please include the
link in addition to the steps to reproduce. Thanks so much!

If your use case is too complex to be replicated in codesandbox, you can provide
a link to a public github repo where you replicated the issue, along with the steps
it takes.
-->

<!-- [Codesandbox](<url>) -->

1. Step one
2. Step two
3. Step three
4. etc.

## Additional information

* Screenshots or code
* Notes
Akshat55 commented 4 months ago

@zosmf-Mira, is this even a carbon issue? The error you posted doesn't mention anything related to Carbon components...

Akshat55 commented 4 months ago

It tells you what the issue is in the error message:

 error TS2416: Property 'intercept' in type 'ZosmfInterceptorService' is not assignable to the same property in base type 'HttpInterceptor'

Take a look at the InterceptorService and debug.

zosmf-Mira commented 4 months ago

I fixed this issue and it show no error in console after command "ng s" which means it passed the compiling, however, when I open page in browser, it show below error, could you please help address it because I used almost my all day today but cannot find why it happened.

image
zosmf-Mira commented 4 months ago

More info about it is that, message.service work well in "common" project but display this error in browser after passed compiling in "specific" project which used it as a 3rd project. Below is app.components.ts's content: import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; // import { MessageService } from './_services/message.service'; import { MessageService } from '../zmf_common/_services/message.service'; import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ MessageService] }) export class AppComponent { title = 'zOSMF Diagnostics Assistant'; constructor(public _messageService: MessageService, private http: HttpClient, private translate: TranslateService ){ { translate.addLangs(['en', 'ja']); const browserLang = translate.getBrowserLang(); // console.log("browser languague: " + browserLang); translate.use(browserLang.match(/en|ja/) ? browserLang : 'en').subscribe( data => { this._messageService.setBundle(data.BUNDLE); this._messageService.setMessages(data.MESSAGES);

    },
    error => {

    },
  );

} } }

zosmf-Mira commented 4 months ago

this is message.service.ts's content: import { Injectable, ComponentRef } from '@angular/core'; //import { Headers, RequestOptions } from '@angular/http'; import { HttpClient } from '@angular/common/http'; //import { map, filter, catchError, mergeMap } from 'rxjs/operators'; //import 'bootstrap-notify'; import { AlertService } from './alert.service'; import { ConstantService } from './constant.service'; import { NotificationService, NotificationType, ModalService } from 'carbon-components-angular'; import { MessageInModalsComponent } from '../modal/message-in-modals/message-in-modals.component';

@Injectable({ providedIn: 'root' }) export class MessageService {

public MSG_TYPE_LIST = { SUCCESS : 'success', WARNING : 'warning', DANGER : 'error', INFO : 'info' } public messagePlugin = '';

private messages: object; // loaded from NLS file private bundle: object; // loaded from NLS file

// messageModal: ComponentRef;

// private notifies: []; // list of currently displaying notifies

// for local dev // private api_message_url = 'assets/i18n/IZUGMessages.json';

// for vicom dev // TODO: ???

constructor( private http: HttpClient, private _alertService: AlertService, private _constant: ConstantService, private notificationService: NotificationService, protected modalService: ModalService ) { // this.load().subscribe( // data => { // // console.info(data); // this.messages = data; // }, // error => { // alert(JSON.stringify(error)); // this.messages = []; // } // ); }

// public load() { // return this.http.get(this.api_message_url).pipe( // map(res => { // const result = res.json(); // return result; // }), ); // }

public setMessages(messages) { this.messages = messages; }

public getMessage(msgId) { return this.messages[msgId]; }

public getBundle(id) { return this.bundle === undefined ? '' : this.bundle[id]; }

public setBundle(bundle) { this.bundle = bundle; }

public replace(str: string, replacement: Array) { let result = str; // tslint:disable-next-line:forin for (const i in replacement) { result = result.replace('${' + i + '}', replacement[i]); } return result; }

private getMsgType(msgId: string): NotificationType { let _type:NotificationType = "success"; if (msgId == null) { } else { let lastChar = msgId.charAt(msgId.length - 1); switch (lastChar) { case "E": _type = "error"; break; case "W": _type = "warning"; break; case "I": _type = "success"; break; default: _type = "success"; } } return _type; }

private getMsgURL(msgId: string, msgPlugin: string): string { return '../../helps/SSB2H8_' + this._constant.getVersion()

}

Akshat55 commented 4 months ago

You're seeing that error in your console because you are NOT providing HttpClient. It is an dependency injection issue. This is a carbon-components-angular repository, your issue is completely unrelated.

By the looks of your previous posts, I can see that you are NOT following Angular's migration guide. Please follow the migration guide here: https://angular.dev/update-guide