The angular demo cannot be launched

[AnthonyLenglet]

• CLI: 6.1.2
• Cross-platform modules: 6.1.2
• Runtime(s):
  • tns-android 6.1.2
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce

When starting the demo by doing:

• npm i in the base of the repo
• npm run tsc
• going to demo-ng
• npm i
• tns run android

I get two error during the build:

tns build android
Preparing project...
Hash: 8a9c9ab4733a6963b544
Version: webpack 4.27.1
Time: 7731ms
Built at: 2019-10-29 13:48:35
              Asset       Size   Chunks             Chunk Names
          bundle.js    474 KiB   bundle  [emitted]  bundle
       package.json  136 bytes           [emitted]  
         runtime.js   13.9 KiB  runtime  [emitted]  runtime
tns-java-classes.js    0 bytes           [emitted]  
          vendor.js   14.5 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
[./app.css] 448 bytes {bundle} [built]
[./app/app-routing.module.ts] 687 bytes {bundle} [built]
[./app/app.component.ts] 368 bytes {bundle} [built]
[./app/app.module.ts] 756 bytes {bundle} [built]
[./app/examples/activity-indicator/activity-indicator.module.ts] 786 bytes {bundle} [built]
[./app/examples/bottom-navigation-bar/bottom-navigation-bar.module.ts] 987 bytes {bundle} [built]
[./app/examples/bottom-sheet/bottom-sheet.module.ts] 809 bytes {bundle} [built]
[./app/examples/buttons/buttons.module.ts] 603 bytes {bundle} [built]
[./app/examples/cards/cards.module.ts] 591 bytes {bundle} [built]
[./app/examples/examples.module.ts] 1.28 KiB {bundle} [built]
[./app/examples/examples.routing.ts] 1.85 KiB {bundle} [built]
[./app/examples/progress/progress.module.ts] 677 bytes {bundle} [built]
[./app/home/home.module.ts] 596 bytes {bundle} [built]
[./main.ts] 1.35 KiB {bundle} [built]
    + 517 hidden modules

ERROR in ./app/examples/bottom-navigation-bar/bottom-navigation-bar.component.ts
Module not found: Error: Can't resolve './bottom-navigation-bar.component.css' in '/Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/src/app/examples/bottom-navigation-bar'
 @ ./app/examples/bottom-navigation-bar/bottom-navigation-bar.component.ts 30:37-85
 @ ./app/examples/examples.routing.ts
 @ ./app/examples/examples.module.ts
 @ ./app/app.module.ts
 @ ./main.ts
Webpack compilation complete.
Built aar for nativescript-material-button
Built aar for nativescript-material-core
Built aar for nativescript-material-textfield
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-textfield
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Built aar for nativescript-material-core
Project successfully prepared (android)
Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from /Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/App_Resources/Android/app.gradle
         + using android X library androidx.legacy:legacy-support-v4:1.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: /Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/node_modules/nativescript-material-button/platforms/android/nativescript_material_button.aar
         + adding aar plugin dependency: /Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/node_modules/nativescript-material-core/platforms/android/nativescript_material_core.aar
         + adding aar plugin dependency: /Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/node_modules/nativescript-material-textfield/platforms/android/nativescript_material_textfield.aar
         + adding aar plugin dependency: /Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
/Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/platforms/android/app/src/debug/java/com/tns/ErrorReport.java:294: error: incompatible types: ErrorReport cannot be converted to BaseOnTabSel
ectedListener
        tabLayout.setOnTabSelectedListener(this);
                                           ^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
1 error

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 30s
Command ./gradlew failed with exit code 1

ERROR in ./app/examples/bottom-navigation-bar/bottom-navigation-bar.component.ts
Module not found: Error: Can't resolve './bottom-navigation-bar.component.css' in '/Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/src/app/examples/bottom-navigation-bar'

This error is due to the bottomNavigationBarComponent is calling a css file that got removed

@Component({
    moduleId: module.id,
    selector: 'ns-bottom-navigation-bar',
    templateUrl: './bottom-navigation-bar.component.html',
    styleUrls: ['./bottom-navigation-bar.component.css']
})

remove styleUrls fixes this

However, with the second error

/Users/anthonylenglet/Documents/--Angular_Projects/nativescript-material-components-master/demo-ng/platforms/android/app/src/debug/java/com/tns/ErrorReport.java:294: error: incompatible types: ErrorReport cannot be converted to BaseOnTabSel
ectedListener
        tabLayout.setOnTabSelectedListener(this);

I'm not sure how to go on with this
this seems to be related to BottomNavigationBar as well, but I have no idea how to fix this :/

[farfromrefug]

try to force version 2.5.2 it should work. Working on a fix

[farfromrefug]

@AnthonyLenglet It is now an issue with the android runtime NativeScript/android#1494
One way to fix this and use the latest version of this component is to use rc version of the android runtime

[mazlanmohdnor]

@farfromrefug , can i know how to fix this issue?

[farfromrefug]

Use the rc version of tns-android

[mazlanmohdnor]

thanks @farfromrefug , tns platform add android@rc fixed the problem 👍