Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

Angular ABP 7.0.0 Upgrade: Error when resolving a service #7340


User avatar
0
rbarbosa created

Hello I am in the process of migrating our app to ABP/Zero 7, backend went great, now on to Angular. I have created a module/folder to house all the custom code to make these upgrades less daunting:

app-routing.module.ts

{
        path: 'wms',
        loadChildren: () => import('app/wms/wms.module').then(m => m.WmsModule), //Lazy load wms module
        data: { preload: true }
}, 

Everything works fine until i have a component that uses the services through DI

routing-log.component.ts

export class RoutingLogComponent extends AppComponentBase implements OnInit {

....

    constructor(
        injector: Injector,
        private _reportService: ReportServiceProxy,
        ) {
            super(injector);
        }

        ngOnInit(): void {
                this._reportService.getReport().....
        }

....

The following error occurs when trying to load the component/page:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(RootModule)[RoutingLogComponent -> ReportServiceProxy]: 
  StaticInjectorError(Platform: core)[RoutingLogComponent -> ReportServiceProxy]: 
    NullInjectorError: No provider for ReportServiceProxy!
NullInjectorError: StaticInjectorError(RootModule)[RoutingLogComponent -> ReportServiceProxy]: 
  StaticInjectorError(Platform: core)[RoutingLogComponent -> ReportServiceProxy]: 
    NullInjectorError: No provider for ReportServiceProxy!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1225)
    at resolveToken (core.js:1463)
    at tryResolveToken (core.js:1407)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1311)
    at resolveToken (core.js:1463)
    at tryResolveToken (core.js:1407)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1311)
    at resolveNgModuleDep (core.js:18446)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:19135)
    at resolveNgModuleDep (core.js:18446)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:24328)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1693)

I have refreshed nswag and there is a service proxy file with the proper Proxy holding the api call

service-proxies.ts


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

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

the wms module is almost identical to the admin module in terms of what imports and declarations are being loaded to make sure i was not missing anything.

Any ideas?


2 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Your usage seems fine actually.

    Have you tried importing ServiceProxyModule to your wms.module similar to https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/app.module.ts#L139 ?

  • User Avatar
    1
    rbarbosa created

    Adding the serviceProxyModule did not make a difference

    although that did remind me that this file needs the service proxies to be added, i completely forgot about that. https://docs.aspnetzero.com/documents/aspnet-core-angular/latest/Infrastructure-Angular-NSwag Thank you