Android Angular demo gives error "Error: TypeError: Cannot read property 'CustomTabsIntent' of undefined"

[JohanBeumer]

I am trying to run de demo-angular app on Android but is doesn't work.

I follow the following steps described in Contributing quick steps :

• clone the repo: https://github.com/alexziskind1/nativescript-oauth2.git
• open a terminal and navigate to /src folder
• run npm run build
• run run npm run plugin.tscwatch
• start the app via npm run demo.android-angular

The app starts, however during the webpack compilation this error is shown :

ERROR in ../src/tns-oauth-native-view-controller.ts:21:14 - error TS2339: Property 'browser' does not exist on type 'typeof androidx'.
21 ? androidx.browser?.customtabs

After clicking the Login button on the startpage of the app, the following error (and 3 console.log messages from oauth.ts) is shown in the console :

Error: TypeError: Cannot read property 'CustomTabsIntent' of undefined

Which platform(s) does your issue occur on?

• Android emulator
• device untested

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.011

"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/theme": "~2.3.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1",
"nativescript-oauth2": "file:../src"
},
"devDependencies": {
"@angular/compiler-cli": "~10.1.0",
"@nativescript/ios": "7.0.0",
"@nativescript/types": "~7.0.0",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~10.1.0",
"typescript": "~3.9.0"
}

The error concerning the browser preoperty is not shown anymore when I change then code to :

const customtabs = useAndroidX()
? global.androidx.browser?.customtabs
: android.support.customtabs;

However this doesn't really solve the problem, because when I click the login button it still shows the error :

Error: TypeError: Cannot read property 'CustomTabsIntent' of undefined

Is there something wrong with my configuration or is it something in the repository?

[hbird3715]

I don't receive this error "Error: TypeError: Cannot read property 'CustomTabsIntent' of undefined" if I downgrade to version 3.0.1. Using nativescript vue.

[bastienlemaitre]

Same error, on 3.0.1 and 3.0.2..

JS: Angular is running in development mode. Call enableProdMode() to enable production mode.
JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'CustomTabsIntent' of undefined
JS: TypeError: Cannot read property 'CustomTabsIntent' of undefined
JS:     at TnsOAuthLoginNativeViewController.openUrlWithParametersCompletion (file: node_modules\nativescript-oauth2\tns-oauth-native-view-controller.android.js:29:0)
JS:     at TnsOAuthLoginNativeViewController.loginWithParametersFrameCompletion (file: node_modules\nativescript-oauth2\tns-oauth-native-view-controller.android.js:22:0)
JS:     at TnsOAuthClient.loginWithCompletion (file: node_modules\nativescript-oauth2\oauth.js:29:0)
JS:     at file: src\app\services\auth.service.ts:92:18
JS:     at new ZoneAwarePromise (file: node_modules\@nativescript\zone-js\zone-nativescript.js:902:0)
JS:     at AuthService.tnsOauthLogin (file: src\app\services\auth.service.ts:91:11)
JS:     at HomeComponent.ngOnInit (file: src\app\pages\home\home.component.ts:13:26)
JS:     at callHook (file:///data/data/org.nati...
JS: back to main page with error: 
JS: The login operation was canceled.
device: R5CN20LJTLZ debug port: 40000

package.json

{
  "name": "@nativescript/template-hello-world-ng",
  "main": "main.js",
  "version": "7.0.8",
  "author": "NativeScript Team <[email protected]>",
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "nativescript",
    "mobile",
    "angular",
    "{N}",
    "template"
  ],
  "repository": "<fill-your-repository-here>",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~3.0.0",
    "jwt-decode": "^3.1.2",
    "nativescript-braintree": "^3.0.0",
    "nativescript-oauth2": "^3.0.2",
    "nativescript-secure-storage": "^2.6.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/types": "~7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "@ngtools/webpack": "~11.0.0",
    "typescript": "~4.0.0"
  },
  "gitHead": "41a7254d3bc134fd3c258761f3c6e1c3d54e6d41",
  "private": "true",
  "readme": "NativeScript Application"
}

[harishchopra86]

Getting the same error on version3.0.2. Works fine on 3.0.1.
Any help would be appreciated. @alexziskind1 @EddyVerbruggen

Thanks.

[ghost]

Getting the same error in Android on version 3.0.1 and 3.0.2

package.json

"dependencies": {
"@angular/animations": "~11.0.2",
"@angular/common": "~11.0.2",
"@angular/compiler": "~11.0.2",
"@angular/core": "~11.0.2",
"@angular/forms": "~11.0.2",
"@angular/platform-browser": "~11.0.2",
"@angular/platform-browser-dynamic": "~11.0.2",
"@angular/router": "~11.0.2",
"@nativescript/angular": "~11.0.0",
"@nativescript/background-http": "^5.0.1",
"@nativescript/camera": "^5.0.2",
"@nativescript/core": "^7.0.13",
"@nativescript/imagepicker": "^1.0.0",
"@nativescript/theme": "~3.0.0",
"@nstudio/nativescript-floatingactionbutton": "^3.0.3",
"jwt-decode": "^2.2.0",
"moment": "^2.29.1",
"nativescript-insomnia": "^2.0.0",
"nativescript-oauth2": "^3.0.1",
"nativescript-permissions": "^1.3.11",
"nativescript-signalr-core": "^2.0.0",
"nativescript-ui-chart": "^8.0.2",
"nativescript-ui-listview": "~9.0.4",
"nativescript-ui-sidedrawer": "~9.0.3",
"nativescript-vibrate": "^4.0.1",
"reflect-metadata": "~0.1.13",
"rxjs": "~6.6.3",
"tns-platform-declarations": "^6.5.15",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~11.0.2",
"@nativescript/android": "7.0.1",
"@nativescript/ios": "7.0.6",
"@nativescript/types": "~7.0.4",
"@nativescript/webpack": "~3.0.8",
"@ngtools/webpack": "~10.2.0",
"codelyzer": "~6.0.1",
"node-sass": "^4.14.1",
"tslint": "~6.1.3",
"typescript": "~4.0.5"
}

Thanks.

[bastienlemaitre]

@alexziskind1, any idea ?

[BBazard]

Fixed it by adding:

dependencies {
  implementation 'androidx.browser:browser:1.2.0'
}

in App_Resources/Android/app.gradle

This is what https://github.com/bradmartin/nativescript-advanced-webview/blob/master/src/platforms/android/include.gradle is using.

[alexziskind1]

Thanks for that @BBazard . This currently works when added to the app, and I've been trying to add this setting to the plugin's include.gradle, but it doesn't end up in the build for some reason. My Android build system knowledge is limited so hopefully someone here can explain why this is happening.

[alexziskind1]

This has been fixed in 3.0.3

[JohanBeumer]

1. cd src
2. npm run build
3. npm run run plugin.tscwatch
4. open new prompt and go into src directory
5. npm run demo.ios-angular
6. during build you see this error, but the app does start
   ERROR in ../src/tns-oauth-native-view-controller.ts:21:14 - error TS2339: Property 'browser' does not exist on type 'typeof androidx'.
21 ? androidx.browser?.customtabs
7. stop the app with ctrl-c
8. start the app again npm run demo.ios-angular
9. the build stops with the same error as in step 6
10. change line 21 in tns-oauth-native-view-controller.ts according to the solution mentioned in #134
    const customtabs = useAndroidX() ? global.androidx.browser.customtabs : android.support.customtabs;
11. start the app again npm run demo.ios-angular
12. everything works as expected!

Do a final test and start clean :
13) npm run clean
14) start again with step 2

Now at step 5 I get this error :
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.

As far as I can see all main-entries are in place and I have no clue why this error occurs.

@alexziskind1 do you have any thoughts on this?
Do you have this problem at all?

[alexziskind1]

The Angular demo hasn't really been tweaked to latest speck. Only the core demo project is currently up to date, so the next steps would be to update those other demos.

[keithgulbro]

@alexziskind1 This error is still present in version 3.0.3

@JohanBeumer's comment is valid. This plugin on android spits out the following error:

ERROR in ../src/tns-oauth-native-view-controller.ts:21:14 - error TS2339: Property 'browser' does not exist on type 'typeof androidx'.

Is there any workaround to this? Any insight would be very helpful!

To reproduce the bug, create a fresh Nativescript project, then load the nativescript-oauth2 package version 3.0.3 locally like this: file:../nativescript-oauth2/src

[alexziskind1]

Reopening issue since folks seem to still be having it. Will review PRs that fix this. Thanks all.