Nativescript-angular: NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem

[leocaseiro]

If you just import NS_HTTP_PROVIDERS and set on your bootstrap, you won't pass through the Typescript compiler and will get this error:

Found peer TypeScript 1.8.10
node_modules/nativescript-angular/http/ns-http.d.ts(8,22): error TS2415: Class 'NSHttp' incorrectly extends base class 'Http'.
  Types of property 'get' are incompatible.
    Type '(url: string, options?: RequestOptionsArgs) => Observable<any>' is not assignable to type '(url: string, options?: RequestOptionsArgs) => Observable<Response>'.
      Type 'Observable<any>' is not assignable to type 'Observable<Response>'.
        Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

To check this bug, follow these steps:

tns create myapp --template tns-template-hello-world-ng

Then, import NS_HTTP_PROVIDERS:

import {NS_HTTP_PROVIDERS} from 'nativescript-angular/http';
nativeScriptBootstrap(AppComponent, [NS_HTTP_PROVIDERS])

So try add a platform and run:

tns platform add ios
tns run ios --emulator

Temporary solution

If you've set compilerOptions to false on tsconfig.json, the tsc will ignore it, and your app will run great. (Even if you use Http service).

I believe something related to the declaration on node_modules/nativescript-angular/http/ns-http.d.ts that doesn't follow with the angular rc-4.

[NathanWalker]

Thanks @leocaseiro I can confirm this report.

@vakrilov If you instead use "nativescript-angular": "next", in your package, all is good to go.
So it appears 0.3.0 does not include the latest :-/

[leocaseiro]

Hi @NathanWalker, thanks for your reply.

There're 2 versions of 0.3.1: 0.3.1-2016-08-04-787 and 0.3.1-2016-08-08-788

However, they both give me the same error.

Unfortunately, I'm getting the same issue.

[leocaseiro]

Here is my package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.nghttp",
    "tns-ios": {
      "version": "2.2.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/platform-server": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "nativescript-angular": "next",
    "reflect-metadata": "^0.1.5",
    "tns-core-modules": "2.2.0"
  },
  "devDependencies": {
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  }
}

I've updated to the newest [email protected]

[NathanWalker]

Try clearing node_modules and platforms then setup again with that 'next' tag.

[NathanWalker]

I did exactly that here and have no issues using the 'next' tag and rc.4

[leocaseiro]

I was about to post it here.

I removed the platform and added it again and works fine.

Many thanks for that!

I wonder if it'll be safe to use the next version.
I'll perhaps set hard coded to use [email protected]

[NathanWalker]

I would personally like to see weekly releases of 'nativescript-angular' but until that happens I will be using 'next' tag with everything myself. Too many important and valuable things go into master at every commit from what I've seen to not be using latest.

[tjvantoll]

I hit this one in Groceries, and unfortunately I can’t seem to make the problem go away. I tried using next after clearing out my node_modules, platforms, and so forth and I can’t get this error to go away.

Regardless, I can’t update the Getting Started tutorial to use next, so this is a blocking issue for me upgrading the tutorial to {N} 2.2 and Angular RC 4. A 0.3.1 release with a fix would be great 😄

[hdeshev]

I was able to reproduce @leocaseiro's original issue (the compile time error) using the official 0.3.0 release on a new project after importing NSHttp. I also saw another error about Observable<Response> not having a map method.

I deleted my node_modules and the original error disappeared, but the map one still remains. I found this SO question which suggests importing rxjs/Rx somewhere in order to fix this (the map method is defined in a separate TS module that needs to be imported). That fixed the error for me and http now works fine.

I wonder if adding an import for rxjs/Rx in say nativescript-angular/application will fix this for everyone.

@tjvantoll I don't get that error with the Groceries master branch. Do I need to look somewhere else?

[leocaseiro]

Hi @hdeshev, thanks for that!

I'm almost sure you want to test on angular-end branch of Groceries.

In regards to rxjs/Rx, I always include the libraries I need, depending on the Class or Component, but I'm not really keen on the idea of including the whole rxjs/Rx library. I believe it would take a lot of MB from my app with no reason...

[hdeshev]

I'm not really keen on the idea of including the whole rxjs/Rx library. I believe it would take a lot of MB from my app with no reason...

Yep, I believe that's the problem that the "import 'rxjs/add/operator/...'" is trying to solve. It's probably a good idea to let people import either rxjs/Rx or the single operator module, if they are going after a lean distribution.

[tjvantoll]

@hdeshev: @leocaseiro is correct; it’s the angular-end branch that I’m having this problem on, which is the end state of the getting started tutorial.

I can try the RxJS workarounds, but I’m always hesitant to put any workarounds or hacks into the tutorials, so I’ll almost certainly just wait for a 0.3.1 release.

[tjvantoll]

Bizarrely I’m still getting the same TypeScript error even after upgrading to 0.3.1, which makes me suspect that I’m hitting some sort of odd caching problem. I tried clearing my npm cache, and also rebuilding my node_modules, and platforms folder, but I’m still not having any luck. Is anyone one else having this problem with 0.3.1 still, or is it just me?

[NathanWalker]

@tjvantoll You may need to upgrade to rc.4 on the angular branch of groceries:
https://github.com/NativeScript/sample-Groceries/blob/angular-end/package.json#L28
Your deps should match this:
https://github.com/NativeScript/nativescript-angular/blob/master/ng-sample/package.json#L29-L37

[tjvantoll]

@NathanWalker Yep. I did that as part of the update. Here are the full steps I’m taking:

• git clone https://github.com/NativeScript/sample-Groceries.git
• cd sample-Groceries
• git checkout angular-end
• Switch to use this package.json
• tns install
• tns run ios

[NathanWalker]

@tjvantoll
I can confirm the problem 0.3.1 _still_ does not contain latest.

@vakrilov _Please_ release 0.3.2 with latest.

@tjvantoll, also note this:
You will need to change this:
https://github.com/NativeScript/sample-Groceries/blob/angular-end/app/main.ts#L2
to this:

import {NS_HTTP_PROVIDERS} from "nativescript-angular/http";

And this:
https://github.com/NativeScript/sample-Groceries/blob/angular-end/app/main.ts#L8
to this:

nativeScriptBootstrap(AppComponent, [NS_HTTP_PROVIDERS, APP_ROUTER_PROVIDERS]);

See this to learn more:
https://github.com/NativeScript/nativescript-angular/wiki/Http

[NathanWalker]

Worth noting again using the next tag does solve it to prove that the latest is not in 0.3.1.
Please release 0.3.2 asap, many folks need this and mention this issue :/

[NathanWalker]

@leocaseiro please reopen this issue and rename to:
NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem Need 0.3.2 asap

[tjvantoll]

@NathanWalker Thanks for taking the time to confirm this!

[vakrilov]

OK,
So the fix #408 fix is definitely in the 0.3.1. And when I got the error too:

node_modules/nativescript-angular/http/ns-http.d.ts(8,22): error TS2415: Class 'NSHttp' incorrectly extends base class 'Http'.
  Types of property 'get' are incompatible.
    Type '(url: string, options?: RequestOptionsArgs) => Observable<Response>' is not assignable to type '(url: string, options?: RequestOptionsArgs) => Observable<Response>'.
      Type 'Observable<Response>' is not assignable to type 'Observable<Response>'.
        Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

Notice the problematic type is Observable<Response> not Observable<any> as in the original error (from 0.3.0).

However,Type 'Observable<Response>' is not assignable to type 'Observable<Response>'. makes no sense to me. More over in the Observable import statement in:
node_modules\@angular\http\src\http.d.ts
and
node_modules\nativescript-angular\http\ns-http.d.ts
seem to be identical. Will investigate further ...

[NathanWalker]

Thanks @vakrilov for investigation. Yeah, this one seems confusing.
What is curious is that using next tag works great, so I just assume that the latest is not released since next tag works fine?

[tomylee001001]

@NathanWalker @vakrilov i am having different problem with the next tag and next version. when i use next tag or use tns plugin add nativescript-angular@next to upgrade my "nativescript-angular" and after i change my main.ts with
import {NS_HTTP_PROVIDERS} from "nativescript-angular/http";
nativeScriptBootstrap(AppComponent, [NS_HTTP_PROVIDERS, APP_ROUTER_PROVIDERS]);

my app wont open and i get this following error
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
Error calling module function

TypeError: global.moduleMerge is not a function
File: ", line: 1, column: 265

StackTrace:
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/utils/utils.js', line: 3, column: 8
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/file-system/file-system-access.js', line: 2, column: 13
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/file-system/file-system.js', line: 1, column: 86
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/nativescript-angular/file-system/ns-file-system.js', line: 2, column: 21
Frame: function:'re

[vakrilov]

Update:

Workaround

First of all the workaround that worked for me was to add rxjs dependency in the project's package.json:

"dependencies": {
  "rxjs": "5.0.0-beta.6",
   ...
},

Clean node_modules and do fresh npm install after.

The Problem

I think the problem is that the nativescript-angular package has a hard dependency on rxjs. So after the npm install I ended up with 2 copies of rxjs:

• node_modules/rxjs - because of @angular/code peerDependency
• node_modules/nativescript-angular/node_modules/rxjs - because of the ns-angular dependency

The typescript compiler uses different Observable definitions for nativescript-angular/http and @angular/http and throws the weird error.

If you have dependency to rxjs in your app's package.json, npm uses that and doesn't download a second copy of it inside node_modules/nativescript-angular/node_modules. This probably depends on the node/npm versions. My setup: [email protected]/[email protected].

The Solution

Probably using peerDependency to rxjs (and the others like 'zone.js' etc.) in the nativescript-angular and include those as dependencies in the project-template will fix the problem.

We need to test that to be sure it works. I the meantime - you can test if the workaround above works.

CC @NathanWalker @tjvantoll

[tomylee001001]

@vakrilov i tried using your workaround delete node modules and platforms add the necessary dependencies to package and added the NS_HTTP_PROVIDERS to my main.ts but after prepare and build the project i still get the following error as soon as may app opens

ava.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
Error calling module function

TypeError: global.moduleMerge is not a function
File: ", line: 1, column: 265

StackTrace:
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/utils/utils.js', line: 3, column: 8
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/file-system/file-system-access.js', line: 2, column: 13
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/file-system/file-system.js', line: 1, column: 86
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'', file:'/data/data/org.nativescript.platformtest/files/app/tns_modules/nativescript-angular/file-system/ns-file-system.js', line: 2, column: 21
Frame: function:'re

if i dont add the NS_HTTP_PROVIDERS to my main.ts and use HTTP_PROVIDERS instead my app opens but get the following error when i try to use http request

com.tns.NativeScriptException:
Calling js method onClick failed

EXCEPTION: Error in pages/login/login.html:6:49
ORIGINAL EXCEPTION: Error: not implemented
ORIGINAL STACKTRACE:
Error: not implemented
at NativeScriptDomAdapter.Parse5DomAdapter.getCookie (/data/data/org.nativescript.platformtest/files/app/tns_modules/@angular/platform-server/src/parse5_adapter.js:619:68)
at CookieXSRFStrategy.configureRequest (/data/data/org.nativescript.platformtest/files/app/tns_modules/@angular/http/src/backends/xhr_backend.js:150:82)
at XHRBackend.createConnection (/data/data/org.nativescript.platformtest/files/app/tns_modules/@angular/http/src/backends/xhr_backend.js:165:28)
at httpRequest (/data/data/org.nativescript.platformtest/files/app/tns_modules/@angular/http/src/http.js:22:20)
at Http.post (/data/data/org.nativescript.platformtest/files/app/tns_modules/@angular/http/src/http.js:78:16)
at UserService.login (/data/data/org.nativescript.platformtest/files/app/pages/shared/user/user_service.js

[vakrilov]

@tomylee001001 That looks like another issue (NativeScript/NativeScript#143). Can you make sure that nativescript-angular/application is the first import in you application (app.ts or main.ts file). If that doesn't help can you post some of you code so that we can reproduce the issue (you can do it in #397).

[TruckerG]

@vakrilov, @tomylee001001 That solved the problem for me - nativescript-angular/application was not the first import. But after when placing it first the problem with global.moduleMerge... went away! Thanks!

[tjvantoll]

@vakrilov: Explicitly adding rxjs to my dependencies indeed worked. Thanks so much!

[tjvantoll]

@vakrilov Any concerns with merging this in? https://github.com/NativeScript/template-hello-world-ng/pull/22

[tomylee001001]

@vakrilov placing the import {nativeScriptBootstrap} from "nativescript-angular/application"; first in my main.ts solve this error for me.

[hdeshev]

Closing since the problem should be resolved with 2.0.0 final and the NativeScriptHttpModule that sets up providers for you.

[NathanaelA]

Just one note for anyone in the future who might run into this (again). Occasionally npm will also install RXJS into a sub-folder of one of the modules; if you continue to get this error even after you have deleted your node_modules folder. Double check each of the modules to see if they have any sub "node_modules" folders themselves; and if they do; delete any extra the "rxjs" that ends up in as a sub-folder version. The beta5 that got installed by one of them; conflicted with the beta12 that was needed by everything else, and caused the primary error in this issue.