Kein Provider für HTTP-Fehler beim Teilen von Code zwischen Web und Mobile (NativeScript)

Question

Ich versuche, ein Projekt mit Angular 4 und NativeScript mit einer einzigen Codebasis wie in this article erwähnt zu erstellen.

Meine Verzeichnisstruktur sieht in etwa so aus.

project  
└───nativescript 
└───node_modules 
└───web 
│ └───src 
|  └───app 
|   └───dashboard 
|    └───subcomp 
│     │ subcomp.component.ts 
│     │ subcomp.component.html 
| | package.json 
| | node_modules 
└───x-shared 
| └───app 
|  └───dashboard 
|  | dashboard.service.ts 

Es ist ein symbolischer Link auf x-shared innen web/src/App.

web/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { SubComp } from './dashboard/subcomp/subcomp.component'; 
import { HttpModule } from "@angular/http"; 
import { AppRoutingModule } from './app-routing.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    DashboardComponent, 
    SubComp 
    ], 
    imports: [ 
    AppRoutingModule, 
    BrowserModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

web/src/app/Armaturenbrett/subcomp.component.ts

import { Component, OnInit } from '@angular/core'; 
import { DashboardService } from "../../x-shared/app/dashboard/dashboard.service"; 

@Component({ 
    selector: 'sub-comp', 
    templateUrl: './sub-comp.component.html', 
    styleUrls: ['./sub-comp.component.css'], 
    providers: [DashboardService] 
}) 
export class SubComp implements OnInit { 
    constructor(private dashboardService: DashboardService) { } 
    ngOnInit() { 
    // call a method in dashboardService that makes a http call 
    }); 
} 
} 

Die Web-Version läuft gut, wenn Es gab ein tatsächliches Verzeichnis namens x-shared in web/src/app. Es gibt jedoch den Fehler

Uncaught (in promise): Error: No provider for Http!

wenn es ein Symlink ist.

Answer 1

NativeScript verwendet einen Wrapper für Angular HTTP. Stellen Sie sicher, Sie verwenden das nativescript-angular/http Modul

app.module.ts

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

... 

@NgModule({ 
    bootstrap: [ 
     AppComponent 
    ], 
    imports: [ 
     NativeScriptModule, 
     NativeScriptCommonModule, 
     AppRoutingModule, 
     NativeScriptHttpModule, 
    } 
})