Base solution for your next web application
Open Closed

Services are not working after upgrade #7299

User avatar
0
affern created

Hello.

I'm trying to update my angular-aspnetzero solution from angular 5 to angular 6. The solution is compiling successfully, but my services are not working anymore. The result return null, but i can see my api is working if i open the api url in a new tab. My servies is like this:

this._surveyStatisticsService.getCategoryChart(this.siteId, this.siteTypeId, this.cookieLangValue).subscribe((result) => { this.categoryList = result; }

Go to accepted answer
11 Answer(s)
  • User Avatar
    0
    ryancyq created
    Support Team

    Hi, so you mean angular service proxies?

    Have you tried refeshing the proxies with nswag?

    also, are you upgrading ANZ project together with angular upgrade? please share the ANZ version (upgrade from ? to ?)

  • User Avatar
    0
    affern created

    Yes angular service proxies. I'm refreshing the proxies with nswag, but it does not help.

    I bought it in july 2017 and have upgraded my ANZ solution. My ABP nugetpackages is on 3.3 version and solution is running .Net Core 2.1. It is working fine with Angular 5, but not after I upgraded to Angular 6. Is service.config.nswag updating from ANZ solution or should I change values myself? The last version on ABP nugetpackages is 4.7, but it have some breaking changes, so i stopped on 3.3. But maybe I need higher version for Angular 6?

    I changed some settings manually in my service.config.nswag file:

    { "runtime": "Default", "defaultVariables": null, "swaggerGenerator": { "fromSwagger": { "url": "http://localhost:22742/swagger/v1/swagger.json", "output": null } }, "codeGenerators": { "swaggerToTypeScriptClient": { "className": "{controller}ServiceProxy", "moduleName": "", "namespace": "", "typeScriptVersion": 2.0, "template": "Angular", "promiseType": "Promise", "httpClass": "HttpClient", "useSingletonProvider": false, "injectionTokenType": "InjectionToken", "rxJsVersion": 6.0, "dateTimeType": "MomentJS", "nullValue": "Undefined", "generateClientClasses": true, "generateClientInterfaces": false, "generateOptionalParameters": false, "exportTypes": true, "wrapDtoExceptions": false, "clientBaseClass": null, "wrapResponses": false, "wrapResponseMethods": [], "generateResponseClasses": true, "responseClass": "SwaggerResponse", "protectedMethods": [], "configurationClass": null, "useTransformOptionsMethod": false, "useTransformResultMethod": false, "generateDtoTypes": true, "operationGenerationMode": "MultipleClientsFromPathSegments", "markOptionalProperties": false, "generateCloneMethod": true, "typeStyle": "Class", "classTypes": [], "extendedClasses": [], "extensionCode": null, "generateDefaultValues": true, "excludedTypeNames": [], "excludedParameterNames": [], "handleReferences": false, "generateConstructorInterface": true, "convertConstructorInterfaceData": false, "importRequiredTypes": true, "useGetBaseUrlMethod": false, "baseUrlTokenName": "API_BASE_URL", "queryNullValue": "", "inlineNamedDictionaries": false, "templateDirectory": null, "typeNameGeneratorType": null, "propertyNameGeneratorType": null, "enumNameGeneratorType": null, "serviceHost": null, "serviceSchemes": null, "output": "../src/shared/service-proxies/service-proxies.ts" }, "swaggerToCSharpClient": { "clientBaseClass": null, "configurationClass": null, "generateClientClasses": true, "generateClientInterfaces": false, "injectHttpClient": false, "disposeHttpClient": true, "protectedMethods": [], "generateExceptionClasses": true, "exceptionClass": "SwaggerException", "wrapDtoExceptions": true, "useHttpClientCreationMethod": false, "httpClientType": "System.Net.Http.HttpClient", "useHttpRequestMessageCreationMethod": false, "useBaseUrl": true, "generateBaseUrlProperty": true, "generateSyncMethods": false, "exposeJsonSerializerSettings": false, "clientClassAccessModifier": "public", "typeAccessModifier": "public", "generateContractsOutput": false, "contractsNamespace": null, "contractsOutputFilePath": null, "parameterDateTimeFormat": "s", "generateUpdateJsonSerializerSettingsMethod": true, "serializeTypeInformation": false, "queryNullValue": "", "className": "{controller}Client", "operationGenerationMode": "MultipleClientsFromOperationId", "additionalNamespaceUsages": [], "additionalContractNamespaceUsages": [], "generateOptionalParameters": false, "generateJsonMethods": true, "enforceFlagEnums": false, "parameterArrayType": "System.Collections.Generic.IEnumerable", "parameterDictionaryType": "System.Collections.Generic.IDictionary", "responseArrayType": "System.Collections.Generic.ICollection", "responseDictionaryType": "System.Collections.Generic.IDictionary", "wrapResponses": false, "wrapResponseMethods": [], "generateResponseClasses": true, "responseClass": "SwaggerResponse", "namespace": "MyNamespace", "requiredPropertiesMustBeDefined": true, "dateType": "System.DateTime", "jsonConverters": null, "dateTimeType": "System.DateTime", "timeType": "System.TimeSpan", "timeSpanType": "System.TimeSpan", "arrayType": "System.Collections.ObjectModel.ObservableCollection", "arrayInstanceType": "System.Collections.ObjectModel.Collection", "dictionaryType": "System.Collections.Generic.Dictionary", "dictionaryInstanceType": "System.Collections.Generic.Dictionary", "arrayBaseType": "System.Collections.ObjectModel.Collection", "dictionaryBaseType": "System.Collections.Generic.Dictionary", "classStyle": "Inpc", "generateDefaultValues": true, "generateDataAnnotations": true, "excludedTypeNames": [], "excludedParameterNames": [], "handleReferences": false, "generateImmutableArrayProperties": false, "generateImmutableDictionaryProperties": false, "jsonSerializerSettingsTransformationMethod": null, "inlineNamedDictionaries": false, "inlineNamedTuples": true, "generateDtoTypes": true, "templateDirectory": null, "typeNameGeneratorType": null, "propertyNameGeneratorType": null, "enumNameGeneratorType": null, "serviceHost": null, "serviceSchemes": null, "output": null }, "swaggerToCSharpController": { "controllerBaseClass": null, "controllerStyle": "Partial", "controllerTarget": "AspNet", "useCancellationToken": false, "useActionResultType": false, "generateModelValidationAttributes": false, "routeNamingStrategy": "None", "className": "{controller}", "operationGenerationMode": "MultipleClientsFromOperationId", "additionalNamespaceUsages": [ "System.Web.Http" ], "additionalContractNamespaceUsages": [], "generateOptionalParameters": false, "generateJsonMethods": true, "enforceFlagEnums": false, "parameterArrayType": "System.Collections.Generic.IEnumerable", "parameterDictionaryType": "System.Collections.Generic.IDictionary", "responseArrayType": "System.Collections.Generic.ICollection", "responseDictionaryType": "System.Collections.Generic.IDictionary", "wrapResponses": false, "wrapResponseMethods": [], "generateResponseClasses": true, "responseClass": "SwaggerResponse", "namespace": "MyNamespace", "requiredPropertiesMustBeDefined": true, "dateType": "System.DateTime", "jsonConverters": null, "dateTimeType": "System.DateTime", "timeType": "System.TimeSpan", "timeSpanType": "System.TimeSpan", "arrayType": "System.Collections.Generic.IEnumerable", "arrayInstanceType": "System.Collections.ObjectModel.Collection", "dictionaryType": "System.Collections.Generic.Dictionary", "dictionaryInstanceType": "System.Collections.Generic.Dictionary", "arrayBaseType": "System.Collections.ObjectModel.Collection", "dictionaryBaseType": "System.Collections.Generic.Dictionary", "classStyle": "Inpc", "generateDefaultValues": true, "generateDataAnnotations": true, "excludedTypeNames": [], "excludedParameterNames": [], "handleReferences": false, "generateImmutableArrayProperties": false, "generateImmutableDictionaryProperties": false, "jsonSerializerSettingsTransformationMethod": null, "inlineNamedDictionaries": false, "inlineNamedTuples": true, "generateDtoTypes": true, "templateDirectory": null, "typeNameGeneratorType": null, "propertyNameGeneratorType": null, "enumNameGeneratorType": null, "serviceHost": null, "serviceSchemes": null, "output": null } } }

  • User Avatar
    0
    ryancyq created
    Support Team

    Hi,

    I bought it in july 2017 and have upgraded my ANZ solution.

    please share the exact ANZ version you had upgraded from and to.

    generally nswag config will be updated by ANZ when needed. However, you could still modify it according to your project requirements.

    since your Abp package is 3.3, and you are unable to upgrade to ANZ 5.4 which was the upgrade for angular 6, you will need to apply the changes between 5.0.5 to 5.4.0 yourself.

    https://github.com/aspnetzero/aspnet-zero-core/releases?after=v5.4.0

  • User Avatar
    0
    affern created

    Hi again.

    It seems like a difficult task to do this upgrade. I have been working for several weeks with this.

    I have now upgraded to ABP v3.8.1. But I'm not sure which dependencies the APNetZero Angular will have for Angular 6. I haven't managed to find any information on how to upgrade to Angular 6. My abp-zero-template version is 4.0. Should i keep this on version 4 or should i upgrade? Is there any page for this module? I found only this https://www.npmjs.com/package/abp-zero-template, but only show 1 version.

    I have found this AspNetZero project which use Angular 6: https://github.com/aspnetzero/aspnet-zero-core/tree/publish-issues/angular Here is "abp-ng2-module": "^3.1.0 and abp-web-resources": "^3.7.0". Is this version related to Angualar 6? Should I update to this version? I have tried, but get a lot of bugs. So I have started all over again.

    According to this page: https://www.npmjs.com/package/abp-ng2-module/v/3.1.0, abp-ng2-module 3.1.0 version have among others, Dev dependencies copyfiles, rimraf and rollup.
    What packages do i have to install to get these dependencies?

    Thank you for the link to releases. It is useful. Is there any other pages I can find information on how to upgrade the APNetZero Angular project?

    My ABP project v3.8.1 compiles and run fine with my Angular 5 project. My Angular 6 project comiles and render start page. But without data. All my service calls returns null. I don't see any errors in the log file.

    But I can see my service-proxies.ts is not updated.

    I expect the head of it should look like this: import { mergeMap as _observableMergeMap, catchError as _observableCatch } from 'rxjs/operators'; import { Observable, from as _observableFrom, throwError as _observableThrow, of as _observableOf } from 'rxjs'; import { Injectable, Inject, Optional, InjectionToken } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpResponseBase, HttpErrorResponse } from '@angular/common/http';

    import * as moment from 'moment';

    export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

    But I get this:

    /* tslint:disable */ //---------------------- // <auto-generated> // Generated using the NSwag toolchain v11.12.16.0 (NJsonSchema v9.10.19.0 (Newtonsoft.Json v9.0.0.0)) (http://NSwag.org) // </auto-generated> //---------------------- // ReSharper disable InconsistentNaming

    import 'rxjs/add/observable/fromPromise'; import 'rxjs/add/observable/of'; import 'rxjs/add/observable/throw'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import 'rxjs/add/operator/mergeMap'; import 'rxjs/add/operator/catch';

    import { Observable } from 'rxjs/Observable'; import { Injectable, Inject, Optional, InjectionToken } from '@angular/core'; import { Http, Headers, ResponseContentType, Response } from '@angular/http';

    import * as moment from 'moment';

    export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

    @Injectable() export class AccountServiceProxy { private http: Http; private baseUrl: string; protected jsonParseReviver: (key: string, value: any) => any = undefined;

    constructor(@Inject(Http) http: Http, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
    this.http = http;
    this.baseUrl = baseUrl ? baseUrl : "";
}

/**
 * @input (optional) 
 * @return Success
 */
isTenantAvailable(input: IsTenantAvailableInput): Observable&lt;IsTenantAvailableOutput&gt; {
    let url_ = this.baseUrl + "/api/services/app/Account/IsTenantAvailable";
    url_ = url_.replace(/[?&]$/, "");

    const content_ = JSON.stringify(input);

    let options_ : any = {
        body: content_,
        method: "post",
        headers: new Headers({
            "Content-Type": "application/json", 
            "Accept": "application/json"
        })
    };

    ...........................

    Why do I miss import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpResponseBase, HttpErrorResponse } from '@angular/common/http'; ? What is controlling this?

    My browser display many errors like this: core.js:1673 ERROR TypeError: Cannot read property 'length' of undefined at SafeSubscriber._next (footer-public.component.ts:70) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:136) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:20) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at subscribeTo.js:16 at subscribeToResult (subscribeToResult.js:6) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:127) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:124) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @affern,

    Have you tried using https://update.angular.io/#5.0:6.0 ? As far as I remember, upgrading from Angular 5 to Angular 6 was not much problematic.

  • User Avatar
    0
    affern created

    Hi @ismcagdas Thanks for your reply. Yes, i have followed these steps. I have tried 3-4 times now with the same result: It compiles, but I get a lot of errors in the browser, telling me that all my service calls returns null. I belive it is something with the rxjs update, but I'm not sure because I have followed all the descriptions with running these steps: -npm install -g rxjs-tslint -rxjs-5-to-6-migrate -p src/tsconfig.json -and changed all my finally statements with .pipe(finalize..

    I have verified that all my api calls work.

    I guess I should leave my aspnet-zero-template version = 4.0.0 in package.json? My service.config.nswag does'nt update the javascript references from my package.json so I have to do this manually. What can be the reason for that?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    This might be related to abp-ng2-module. Is it possible for you to share your project via email (to [email protected]) ?

  • User Avatar
    0
    affern created

    Hi @ismcagdas Of course. I have sent it to you. Thank you for your service.

  • User Avatar
    0
    affern created

    Hi @ismcagdas. Have you had time to take a look at my project?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I have just runned your project and moving AbpHttpInterceptor from root.module.ts to service-proxy.module.ts solved the problem.

    So, just remove { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true }, from root.module.ts and add { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true } to providers array of service-proxy.module.ts. You also need to import lines below into service-proxy.module.ts:

    import { AbpHttpInterceptor } from '@abp/abpHttpInterceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
  • User Avatar
    0
    affern created

    Thank you so much, @ismcagdas!!! This was so nice to get resolved :)) Thanks again for your great service.

Assignee
No one
Labels
Non yet