Angular webpack build fails with platform specific TS files

[manojdcoder]

Issue Checklist

• You are submitting:
• You verified that this is a real problem by searching the [NativeScript Forum] and the other [issues] in this repo.
• You checked our [demo apps] and the [documentation] for sample usage.

Tell us about the problem

I have a helper plugin within my Angular project,

• ui-helper-common.ts
• ui-helper.ios.ts
• ui-helper.android.ts
• ui-helper.d.ts

After upgrading to Angular 6 + NativeScript 4.x, it throws complier error as below.

ui-helper/ui-helper.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Local environment

• Platform: Mac
• Node version: v9.9.0
• NativeScript CLI version: v4.1.2

Project data

• Platform: Both
• Demo app

[NickIliev]

@manojdcoder I've created this demo app based on your own codebase and everything works as expected on my side. Try to rebuild your own project by cleaning the platform folder

tns platform remove ios 

// or rm -rf platforms

[manojdcoder]

Thanks for testing but I'm sure the issue exists. Did you build with bundle, aot and uglify option? Over slack @sis0k0 confirmed me that the issue was reproduced on her end and it's something related to latest ng tools, no workaround as of now.

…

On Tue, Aug 7, 2018, 4:43 PM Nick Iliev ***@***.***> wrote: @manojdcoder <https://github.com/manojdcoder> I've created this demo app <https://github.com/NickIliev/NS-Issues-2018-II/tree/master/nativescript-dev-webpack/issue-625> based on your own codebase and everything works as expected on my side. Try to rebuild your own project by cleaning the platform folder tns platform remove ios // or rm -rf platforms — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#625 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEwYk8vjBHCOlp59wbbQ_Bx-2jWHdnVeks5uOXZQgaJpZM4Vw4pj> .

[NickIliev]

@manojdcoder I've built with --bundle as this was provided in the issue as information - please post the exact command you are executing

Note: even with uglify and AOT I am able to build the applicaiton and use the helpers on iOS.

tns run ios --bundle --env.uglify --env.aot

[manojdcoder]

@NickIliev run command always works. Use build command, that's where the issue is - while building the IPA / APK.

[NickIliev]

The issue is reproducible with build command

tns build ios --bundle

[manojdcoder]

I was trying to debug this issue, one workaround is to append platform name to the main entry in the package.json file (may not be preferable).

For example while building for iOS, update it as

"main": "ui-helper.ios",

Another workaround I'm thinking of is, since AngularCompilerPlugin constructor supports compilerOptions, may be we can pass paths config with *.${platform} appended, but not sure what exactly the syntax is. @sis0k0 Any thoughts?

[vakrilov]

Hey @manojdcoder
Are you still getting the same error. I've tested with your project and I get the following error when building for IOS:

ERROR in app/app.module.ts(21,56): error TS2339: Property 'ad' does not exist on type 'typeof "/xxxx/xxxx/xxxx/test-app/app/common/ui-helper"'.

and following error when building for Andrioid:

ERROR in app/app.component.ts(15,22): error TS2339: Property 'ios' does not exist on type 'typeof "/xxxx/xxxx/xxxx/test-app/app/common/ui-helper"'.

Are these the error you are getting also?

[manojdcoder]

@vakrilov When building for production, I'm getting this error

ui-helper/ui-helper.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

If I make ui-helper as a external plugin, then I get the errors you mentioned above.

[ghost]

any luck? I got also the issue after upgrading to webpack v0.15. the plugin nativescript-ios-uuid.

[manojdcoder]

@vakrilov @NickIliev Any workaround might greatly help, please let us know.

[NickIliev]

+1 with nativescript-ios-uuid reported here

[ghost]

Is there any workaround for this? might greatly help for my current project, cause I can't update to the latest version of NS and NS-webpack because of this issue. :(

[ghost]

@NickIliev will the fixes for this issue will be included in NS 5.0? hoping

[manojdcoder]

Unfortunately not yet with {N} 5.0.

[ghost]

@manojdcoder is there any workaround for this one? because I couldn't proceed because of this problem for months.

[manojdcoder]

@jannotabamo You may move your module to project root and mark that as an external plugin in package.json. You might have to manually compile the TS files inside to JS.

In my case, I had move ui-helper folder into project root and added that as plugin in package.json,

"tns-core-modules": "~5.0.0",
 "ui-helper": "file:ui-helper",
"zone.js": "^0.8.26"

Then updated paths in my tsconfig.json as below,

     "paths": {
            "~/*": [
                "src/*"
            ],
            "*": [
                "./ui-helper/*",
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }

If I make any changes inside ui-helper, I will have to compile them manually

tsc ./ui-helper/*.ts 

[mohammadrafigh]

to add more details, the problem also exists when using platform specific components in aot build with my-component.ios.ts and my-component.android.ts and my-component.d.ts. the compiler fails with Cannot determine the module for class.... the issue happens both on Mac and Linux.

I don't know if it's related to this issue or not.

[manojdcoder]

@NickIliev @vakrilov Any progress on this yet? It has become quite impossible to write any platform specific code within project.

[triniwiz]

A work around for this would be to create an index.ts with the following

export from './ui-helper'

you can check out https://github.com/triniwiz/nativescript-socketio/tree/master/src for and example

[manojdcoder]

@triniwiz I tried that already but that still doesn't solve the issue. I have few delegate implementation in the ui-helper.ios.ts file, on loaded event of component I may override the original delegate.

For example here is what I do with Dropdown plugin, it throws error when I compile for android. Similarly android specific code throws error on iOS compilation.

    onDropDownLoaded(event: EventData) {
        if (isIOS) {
            const dropDown = <DropDown>event.object,
                nativeView = <UILabel>dropDown.nativeViewProtected;

            (<any>dropDown)._dropDownDelegate = uiHelper.ios
                .AppDropDownListPickerDelegateImpl
                .initWithOriginalDelegate((<any>dropDown)._dropDownDelegate);
            nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
            nativeView.numberOfLines = 0;
        }
    }

[vtjon]

@NickIliev any updates on this? It seems like a pretty big deal. I am in the process of upgrading from NS 3.X to V5 and I cannot webpack my app. I have a delegate.ios.ts and I get errors similar to above. I also have several other platform specific TS files throughout my app.

[manojdcoder]

I kept my upgrades on hold just because of this issue. Now with no option I converted everything to a local plugin and still commenting all android specific code while running build for iOS and vice versa to avoid this error which is really annoying.

[NickIliev]

@vtjon @manojdcoder with the latest versions (modules, nativescript-dev-typescript) I am not able to reproduce the issue (using this demo) - can you let us know what are the exact steps and what change should I do in the test project to make this one reproducible.

I am running

tns build ios--bundle

and accessing the helper method here

[vtjon]

fwiw, I cloned the repo and the build initially worked. I then added delegate.ios.ts to my project and I got the error:
ERROR in ./delegate.ts Module build failed (from ../node_modules/@ngtools/webpack/src/index.js): Error: /Users/jonaustin/src/NS-Issues-2018-II/nativescript-dev-webpack/issue-625/app/delegate.ts is missing from the TypeScript compilation.

I created an ios platform specific version of app.component as well. It does not appear to throw an error on that. The changes are here:
https://github.com/vtjon/NS-Issues-2018-II/tree/master/nativescript-dev-webpack/issue-625

[manojdcoder]

@NickIliev @vtjon That is the one issue I noticed so far, when importing platform specific files the compiler expects .[ios|android] extension for release build but while on tns run the platform extension needs to be removed.

Still running further tests.

[vtjon]

I tried tns build ios --bundle --release and still got the same error.

[manojdcoder]

@NickIliev With latest modules the compilation is far better than how it used to be, at least not a blocker any more. Thank you and team for that.

I observed the two issues below,

1. As I mentioned in my previous comment tns run do not like platform extensions .[ios|android] in require statement. But tns build fails without those extensions. It will be nice to have one common solution that would work for both builds.
2. As we are specifying the main file explicitly in package.json, it should allow import * as uiHelper from "~/common"; . The compiler always looks for index.ts with this import statement, at least this used to work in earlier version.

[hosikiti]

@NickIliev

Same issue.
If there are files with platform specific name like follows, webpack compiler loads ".[ios/android].ts" instead of loading ".d.ts". This behavior is inconsistent with previous one's. So we have to deal with many compile errors.

For example:
comp.android.ts
comp.ios.ts
comp.d.ts

It would be great if we can hear any progress on this.

[bagnos]

Same issue.
I have a code sharing project using schematics and I get this error using a custom plugin cloned from nativescript-version-number, using demo project all works correctly.

Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: /Users/XXXXXXXXsvn/nativescript-version-number/src/test.ts is missing

[kvindascr]

Hello Guys,

I have just migrated a project from TS4 to TS5.
We are using the libs:

"@angular/common": "~7.1.0",
"tns-core-modules": "^5.1.2",
"nativescript-dev-typescript": "^0.7.9", 
"nativescript-dev-webpack": "~0.19.0",

As a comment, my project in specific was having an issue when building with nativescript-dev-typescript: 0.7.1, and due to this I forced it to the latest dev-typescript version.

A while ago I faced the issue described on this post #306.
At that time @sis0k0 helped me to arrive to a solution where I can used the platform specific imports in my code.

So while the import {getDelegate} from 'app-delegate' would not work, an alternative require import worked.
We ended up with an import like the following:

const getAppDelegate = require('./shared/core/config/app-delegate').getAppDelegate;

After upgrading to NS5 the issue was generating again, but now, it won't even support the format described above.

To make a long story short, the way that I solved it, was leaving the regular TS import as shown below, and just adding a app-delegate.d.ts, with enough information that allows TS to not complain at compilation time. I was missing the d.ts, and just added it after seeing this thread, and some of the sample projects provided.

My import looks like this.

import {getDelegate} from 'app-delegate'

My d.ts file looks like this.

export function getAppDelegate(): any;

Hope that can help anyone and save some time.

[sis0k0]

This should be fixed by #843

[miroslavaivanova]

This is fixed in the current master branch and available in nativescript-dev-webpack@next.