angular dependency injection bug on platform specific files

[bzaruk]

Hi,

I searched some for this issue I have and the only thing I found is this, but this actually didn't help cause I already implements the solution there by @sis0k0

The issue is that when I run the project with --env.aot flag something happened to the dependency injection of the platform specific files, and I will give an example:

I created a ModalDialogHelper for every modal dialog I have to simplify the creation of the dialog, because there is some cases that I want to have a different UI dialog for every specific platform I separate it to different platform specific files, so it looks kind of like this:

itemsListWithIconsModalDialogHelper.d.ts:

import { ViewContainerRef } from "@angular/core";

declare class ItemsListWithIconsModalDialogHelper {
    public createItemsListWithIconsModalDialog(params: { title: string, actionsData: Array<{ iconStringValue: string, text: string, color: string }>, vcRef: ViewContainerRef }): Promise<{ pickedIndex: number }>;
}

itemsListWithIconsModalDialogHelper.android.ts:

import { Injectable, ViewContainerRef } from '@angular/core';
import { ItemsListWithIconsModalDialogComponent } from "./itemsListWithIconsModalDialog.component";
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/modal-dialog";

@Injectable()
export class ItemsListWithIconsModalDialogHelper {
    constructor(private _modalService: ModalDialogService) { }

    public createItemsListWithIconsModalDialog(params: { title: string, actionsData: Array<{ iconStringValue: string, text: string, color: string }>, vcRef: ViewContainerRef }): Promise<{ pickedIndex: number }> {
        let options: ModalDialogOptions = {
            viewContainerRef: params.vcRef,
            context: {
                title: params.title,
                actionsData: params.actionsData
            },
            fullscreen: false
        };
        return this._modalService.showModal(ItemsListWithIconsModalDialogComponent, options);
    }
}

itemsListWithIconsModalDialogHelper.ios.ts:

import { Injectable, ViewContainerRef } from '@angular/core';
import * as dialogs from "ui/dialogs";

@Injectable()
export class ItemsListWithIconsModalDialogHelper {
    constructor() { }

    public createItemsListWithIconsModalDialog(params: { title: string, actionsData: Array<{ iconStringValue: string, text: string, color: string }>, vcRef: ViewContainerRef }): Promise<{ pickedIndex: number }> {
        const cancelText = "Cancel";
        return dialogs.action({
            message: params.title || undefined,
            cancelButtonText: cancelText,
            actions: params.actionsData.map(actionData => {
                return actionData.text;
            })
        }).then(result => {
            if(result == cancelText) {
                return undefined;
            }
            return { pickedIndex: params.actionsData.indexOf(params.actionsData.find(actionData => { return actionData.text == result; })) };
        });
    }
}

The actual thing that matter in this sample is the line return this._modalService.showModal... in the itemsListWithIconsModalDialogHelper.android.ts file, because there you can see that the this._modalService is undefined, something with the dependency injection I guess...

this issue doesn't happens it I run it only with --bundle flag.

The example show you that this is problem in the android specific file but it happens also in the ios specific file.

Thank you! :)

[abhayastudios]

I have what I think is the same situation for which I have created a simplified test project.

In the test project I invoke a LabelProvider in the AppComponent to set the name of a Label. The LabelProvider has a separate implementation for iOS and Android. Those implementations read in their turn some configurations from a ConfigProvider.

If I run the project like tns run ios --bundle then all works fine.

However, if I run it like tns run ios --bundle --env.aot then I get this error:

CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating 'this.config.labelName')

Any ideas what might be the issue?

[abhayastudios]

By the way, I forgot to mention something important!

If I have only one implementation of LabelProvider in app/providers/label.ts (so no iOS/Android specific versions) then it works all fine with AoT!

Also I'd like to point out that my test project does contain typings in app/providers/label.d.ts, so the solution suggested in #306 should not be relevant here as far as I understand. Also, the issue here is not that the platform specific LabelProvider is not found, but the ConfigProvider it depends on is not found.

[bzaruk]

@sis0k0 - this is an open bug - any update here?

[tsonevn]

Hi @shabib3,
Can you provide more info about the problem and your environment(CLI, tns-core-modules, runtime, nativescript-dev-webpack versions)? Also, it will help if you send us sample project, where the issue can be recreated.

[bzaruk]

Hi @tsonevn -
So, here it is:

• nativescript-dev-webpack: 0.9.0 - didn't try on the latest
• tns-core-modules - any version - right now I am on 4.1.0
• CLI - any version - right now I am on 4.1.0

here is a sample project -
HelloWorld.zip

take a look that every thing works great with tns run android but break while I put env.aot.

Pls check it on android because only in the android specific file I did an actual user in private _modalService: ModalDialogService.

*** note that I was able to solve it with this workaround that
@hosikiti suggested.