NS/Angular app not working with latest CLI

cfjedimaster commented 5 years ago

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 5.4.2
Cross-platform modules: Core modules? if so, 5.4.3
Android Runtime: 5.4.0
iOS Runtime: N/A
Plugin(s): "nativescript-angular": "5.0.0", "nativescript-bluetooth": "^1.2.0", "nativescript-camera": "^3.2.1", "nativescript-estimote-plugin": "file:estimote-nativescript-plugin", "nativescript-exit": "^1.0.1", "nativescript-floatingactionbutton": "^4.1.0", "nativescript-geolocation": "^4.2.3", "nativescript-imagecropper": "^0.1.2", "nativescript-imagepicker": "^4.0.0", "nativescript-in-app-notifications": "^0.1.0", "nativescript-iqkeyboardmanager": "^1.1.0", "nativescript-loading-indicator": "^2.3.2", "nativescript-local-notifications": "file:nativescript-local-notifications", "nativescript-theme-core": "~1.0.4", "nativescript-toast": "^1.4.6", "nativescript-vibrate": "^2.0.1",

Describe the bug I had been working on a NS/Angular project for a month or so. The code base isn't mine and is a bit old, but I'm doing some updates/bug fixes/etc. I was working just fine, when I noticed issues testing on a new phone. I checked to see if my CLI was out of date, it was, so I updated to 5.4.2.

At that point, things went to heck in a handbasket. The CLI prompted me to update to webpack usage, I said yes, and nothing worked right.

I reverted, tried again, and told it no. I've also run tns update.

Now I get the following output when doing tns build android,

In file C:\projects\prism\wms\RediTrak2.0\app\utils\offline-util.ts line import {isIOS} from "platform" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\utils\tapsound-util.ts line import {isIOS} from "platform" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\utils\tapsound-util.ts line import * as app from "application" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\utils\trackKeyboard-util.ts line import {isIOS} from "platform" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\utils\trackKeyboard-util.ts line import {ios} from "application" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\utils\trackKeyboard-util.ts line import {topmost} from "ui/frame" is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\vendor-platform.android.ts line require("application") is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\vendor-platform.android.ts line require("ui/frame") is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\vendor-platform.android.ts line require("ui/frame/activity") is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\vendor.ts line const application = require("application") is short import. Add tns-core-modules/ in front of the required/imported module.

In file C:\projects\prism\wms\RediTrak2.0\app\vendor.ts line require("ui/styling/style-scope") is short import. Add tns-core-modules/ in front of the required/imported module.

Found peer TypeScript 2.4.2
node_modules/tns-core-modules/ui/frame/frame.d.ts(6,32): error TS6143: Module './frame-common' was resolved to 'C:/projects/prism/wms/RediTrak2.0/node_modules/tns-core-modules/ui/frame/frame-common.js', but '--allowJs' is not set.
node_modules/tns-core-modules/ui/styling/gradient.d.ts(7,25): error TS6143: Module '../../css/parser' was resolved to 'C:/projects/prism/wms/RediTrak2.0/node_modules/tns-core-modules/css/parser.js', but '--allowJs' is not set.
TypeScript compiler failed with exit code 1

To Reproduce Not sure what to suggest here. As I said, it was an absolutely working project with an earlier version of the CLI.

Expected behavior For it to build. :)

davorpeic commented 5 years ago

Hi @cfjedimaster there was an update regarding short imports. Please follow simple upgrade instructions provided here https://www.nativescript.org/blog/say-goodbye-to-short-imports-in-nativescript

ps nice meeting you in Amsterdam :) Davor

cfjedimaster commented 5 years ago

Thank you for the help, and sorry for the delay. Correcting those items did help, but I still have an issue. (And I feel ok adding on to here as to me, it's still the same issue of "older NS app not working with newer CLI"...)

Now I get:

node_modules/tns-core-modules/ui/frame/frame.d.ts(6,32): error TS6143: 
Module './frame-common' was resolved to 'C:/projects/prism/wms/RediTrak2.0/node_modules/tns-core-modules/ui/frame/frame-common.js', but '--allowJs' is not set.

node_modules/tns-core-modules/ui/styling/gradient.d.ts(7,25): error TS6143: 
Module '../../css/parser' was resolved to 'C:/projects/prism/wms/RediTrak2.0/node_modules/tns-core-modules/css/parser.js', but '--allowJs' is not set.

So it seems like I should just add --allowJs, but I'm not sure where to do that. It definitely doesn't work with tns build android.

cfjedimaster commented 5 years ago

So as an update, I looked at the recommendation here: https://github.com/NativeScript/nativescript-cli/issues/3663

I followed it and now get a new error, a lot of them, but they all seem related to Observable.

Found peer TypeScript 2.7.2
app/app.guard.ts(7,9): error TS2305: Module '"C:/projects/prism/wms/RediTrak2.0/node_modules/rxjs/Observable"' has no exported member 'Observable'.
app/pages/dashboard/dashboard.component.ts(14,9): error TS2305: Module '"C:/projects/prism/wms/RediTrak2.0/node_modules/rxjs/Observable"' has no exported member 'Observable'.
app/pages/dashboard/dashboard.component.ts(78,35): error TS2339: Property 'frame' does not exist on type 'RouterExtensions'.
app/shared/services/clockin/clockin.service.ts(6,9): error TS2305: Module '"C:/projects/prism/wms/RediTrak2.0/node_modules/rxjs/Observable"' has no exported member 'Observable'.
app/shared/services/clockin/clockin.service.ts(25,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(37,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(51,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(68,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(75,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(85,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/clockin/clockin.service.ts(94,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
app/shared/services/incident/incident.service.ts(15,14): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.

app/utils/http-interceptor.ts(30,14): error TS2339: Property 'do' does not exist on type 'Observable<Response>'.                 
app/utils/http-interceptor.ts(38,14): error TS2339: Property 'do' does not exist on type 'Observable<Response>'.                  
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. 
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.                                     
node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.                                                         
node_modules/rxjs/internal/types.d.ts(81,52): error TS2693: 'ObservableInput' only refers to a type, but is being used as a value here.                                                                                                                             
node_modules/rxjs/internal/types.d.ts(81,68): error TS2304: Cannot find name 'infer'.                                             
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.                                                         
node_modules/rxjs/internal/types.d.ts(81,74): error TS2304: Cannot find name 'T'.                                                 
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.                                                  
node_modules/rxjs/internal/types.d.ts(81,79): error TS2304: Cannot find name 'T'.                                                 
node_modules/rxjs/internal/types.d.ts(81,83): error TS2693: 'never' only refers to a type, but is being used as a value here.     node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: ';' expected.                                                         
node_modules/rxjs/internal/types.d.ts(82,66): error TS2693: 'ObservableInput' only refers to a type, but is being used as a value here.                                                                                                                             
node_modules/rxjs/internal/types.d.ts(82,82): error TS2304: Cannot find name 'infer'.                                             
node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: ';' expected.                                                         
node_modules/rxjs/internal/types.d.ts(82,88): error TS2304: Cannot find name 'T'.                                                 

node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: Expression expected.                                                  
node_modules/rxjs/internal/types.d.ts(82,94): error TS2304: Cannot find name 'T'.                                                 
node_modules/rxjs/internal/types.d.ts(82,98): error TS2693: 'never' only refers to a type, but is being used as a value here.     TypeScript compiler failed with exit code 1

Note - I had to cut and paste there a bit and it's possible I missed some lines.

cfjedimaster commented 5 years ago

Fixed most of the above by adding rxjs-compat, now down to a smaller set of errors.

app/pages/dashboard/dashboard.component.ts(78,35): error TS2339: Property 'frame' does not exist on type 'RouterExtensions'.              
node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.                                                                 
node_modules/rxjs/internal/types.d.ts(81,52): error TS2693: 'ObservableInput' only refers to a type, but is being used as a value here.   node_modules/rxjs/internal/types.d.ts(81,68): error TS2304: Cannot find name 'infer'.                                                     
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.                                                                 
node_modules/rxjs/internal/types.d.ts(81,74): error TS2304: Cannot find name 'T'.                                                         
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.                                                          
node_modules/rxjs/internal/types.d.ts(81,79): error TS2304: Cannot find name 'T'.                                                         
node_modules/rxjs/internal/types.d.ts(81,83): error TS2693: 'never' only refers to a type, but is being used as a value here.             
node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: ';' expected.                                                                 
node_modules/rxjs/internal/types.d.ts(82,66): error TS2693: 'ObservableInput' only refers to a type, but is being used as a value here.   
node_modules/rxjs/internal/types.d.ts(82,82): error TS2304: Cannot find name 'infer'.                                                     
node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: ';' expected.                                                                 
node_modules/rxjs/internal/types.d.ts(82,88): error TS2304: Cannot find name 'T'.                                                         
node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: Expression expected.                                                          
node_modules/rxjs/internal/types.d.ts(82,94): error TS2304: Cannot find name 'T'.                                                         
node_modules/rxjs/internal/types.d.ts(82,98): error TS2693: 'never' only refers to a type, but is being used as a value here.

First one looks like maybe something I can correct, the rest, not so sure on.

cfjedimaster commented 5 years ago

So I fixed the first one line so:

//            this.routerExtensions.frame.ios.controller.interactivePopGestureRecognizer.enabled = false;

this.routerExtensions.frameService.getFrame().ios.controller.interactivePopGestureRecognizer.enabled = false;

Which seems like just a simple API change in Angular.

NativeScript / nativescript-cli

NS/Angular app not working with latest CLI #4784