NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem #393

leocaseiro · 2016-08-11T05:44:55Z

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.

The text was updated successfully, but these errors were encountered:

NathanWalker · 2016-08-11T06:49:36Z

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 · 2016-08-11T07:07:51Z

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 · 2016-08-11T07:11:23Z

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 · 2016-08-11T07:24:34Z

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

NathanWalker · 2016-08-11T07:25:53Z

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

leocaseiro · 2016-08-11T07:26:38Z

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 · 2016-08-11T07:31:58Z

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 · 2016-08-11T13:59:15Z

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 · 2016-08-12T09:09:13Z

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 · 2016-08-12T09:24:57Z

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 · 2016-08-12T11:05:45Z

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 · 2016-08-12T12:48:23Z

@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 · 2016-08-23T17:21:34Z

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 · 2016-08-23T17:25:27Z

@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 · 2016-08-23T17:27:42Z

@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 · 2016-08-23T17:44:17Z

@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 · 2016-08-23T17:46:14Z

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 · 2016-08-23T17:47:08Z

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

tjvantoll · 2016-08-23T17:54:39Z

@NathanWalker Thanks for taking the time to confirm this!

vakrilov · 2016-08-23T22:00:32Z

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 · 2016-08-23T23:17:36Z

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 · 2016-08-24T08:10:22Z

@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 · 2016-08-24T08:44:56Z

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 · 2016-08-24T11:44:38Z

@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 · 2016-08-24T12:26:19Z

@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 · 2016-08-24T13:18:29Z

@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 · 2016-08-24T13:39:44Z

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

tjvantoll · 2016-08-24T13:43:29Z

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

tomylee001001 · 2016-08-24T14:13:19Z

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

hdeshev · 2016-09-21T10:23:32Z

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

vakrilov mentioned this issue Aug 22, 2016

NSHttp.get return type fixed #408

Merged

vakrilov closed this as completed in #408 Aug 23, 2016

vakrilov mentioned this issue Aug 23, 2016

Cannot start my app after upgrading to 2.2 #397

Closed

tjvantoll reopened this Aug 23, 2016

tjvantoll changed the title ~~NS_HTTP_PROVIDERS breaks angular rc4 with [email protected]~~ NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem Aug 23, 2016

hdeshev closed this as completed Sep 21, 2016

NickIliev mentioned this issue Nov 4, 2016

TypeError: Cannot read property 'LayoutParams' of undefined NativeScript/nativescript-sdk-examples-ng#95

Closed

This comment was marked as abuse.

Sign in to view

Uh oh!

NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem #393

NS_HTTP_PROVIDERS angular rc4 with [email protected] still problem #393

Comments

leocaseiro commented Aug 11, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

NathanWalker commented Aug 11, 2016

Uh oh!

leocaseiro commented Aug 11, 2016

Uh oh!

leocaseiro commented Aug 11, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker commented Aug 11, 2016

Uh oh!

NathanWalker commented Aug 11, 2016

Uh oh!

leocaseiro commented Aug 11, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker commented Aug 11, 2016

Uh oh!

tjvantoll commented Aug 11, 2016

Uh oh!

hdeshev commented Aug 12, 2016

Uh oh!

leocaseiro commented Aug 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hdeshev commented Aug 12, 2016

Uh oh!

tjvantoll commented Aug 12, 2016

Uh oh!

tjvantoll commented Aug 23, 2016

Uh oh!

NathanWalker commented Aug 23, 2016

Uh oh!

tjvantoll commented Aug 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker commented Aug 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker commented Aug 23, 2016

Uh oh!

NathanWalker commented Aug 23, 2016

Uh oh!

tjvantoll commented Aug 23, 2016

Uh oh!

vakrilov commented Aug 23, 2016

Uh oh!

NathanWalker commented Aug 23, 2016

Uh oh!

tomylee001001 commented Aug 24, 2016

Uh oh!

vakrilov commented Aug 24, 2016

Workaround

The Problem

The Solution

Uh oh!

tomylee001001 commented Aug 24, 2016

Uh oh!

vakrilov commented Aug 24, 2016

Uh oh!

TruckerG commented Aug 24, 2016

Uh oh!

tjvantoll commented Aug 24, 2016

Uh oh!

tjvantoll commented Aug 24, 2016

Uh oh!

tomylee001001 commented Aug 24, 2016

Uh oh!

hdeshev commented Sep 21, 2016

Uh oh!

This comment was marked as abuse.

leocaseiro commented Aug 11, 2016 •

edited

Loading

leocaseiro commented Aug 11, 2016 •

edited

Loading

leocaseiro commented Aug 11, 2016 •

edited

Loading

leocaseiro commented Aug 12, 2016 •

edited

Loading

tjvantoll commented Aug 23, 2016 •

edited

Loading

NathanWalker commented Aug 23, 2016 •

edited

Loading