Question

我收到错误：

未捕获（承诺）：错误：没有NavController的提供者！

早期使用离子2，但是一旦我升级到离子3，我开始遇到问题。

需要任何帮助，我还观察到，一旦我从 LoginServer.ts 中删除 HttpClient 导入，它将正常工作，所以不确定它是否是Angular 4 Http模块的问题。

这是代码

app.module.ts

new DocumentTemplateHistoryDto().htmlProxy.html;

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler, NavController } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { ContactsPage } from '../pages/contacts/contacts';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicStorageModule } from '@ionic/storage';
import { B2BSearchPage } from  '../pages/b2bsearch/b2bsearch';
import { LoginPage } from  '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { LogoutPage } from '../pages/logout/logout';
import { UserService } from  '../service/user/userService';
import { MasterConfig } from '../config/config';
import { QuicksearchPage } from '../pages/quicksearch/quicksearch';
import { BookingPage } from '../pages/booking/booking';
import { BookingconfirmationPage } from '../pages/bookingconfirmation/bookingconfirmation';
import { InvoicePage } from '../pages/invoice/invoice';
import { EditbookingPage } from '../pages/editbooking/editbooking';
import { B2CsearchPage } from '../pages/b2-csearch/b2-csearch';
import { CityService } from '../service/common/cityService';
import { StatusService } from '../service/common/statusService';
import { HTTP_INTERCEPTORS  } from '@angular/common/http';
import { TokenInterceptor } from '../service/interceptor/tokenInterceptor';

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ContactsPage,
    B2BSearchPage,
    LoginPage,
    RegisterPage,
    LogoutPage,
    QuicksearchPage,
    BookingPage,
    BookingconfirmationPage,
    InvoicePage,
    EditbookingPage,
    B2CsearchPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ContactsPage,
    B2BSearchPage,
    LoginPage,
    RegisterPage,
    LogoutPage,
    QuicksearchPage,
    BookingPage,
    BookingconfirmationPage,
    InvoicePage,
    EditbookingPage,
    B2CsearchPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MasterConfig,
    CityService,
    StatusService,
    UserService,
    HttpClientModule,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

login.ts

    import { Component, ViewChild } from '@angular/core';

import { Platform, MenuController, Nav ,NavController} from 'ionic-angular';

import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { ContactsPage } from '../pages/contacts/contacts';
import { B2BSearchPage } from '../pages/b2bsearch/b2bsearch';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { LogoutPage } from '../pages/logout/logout';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { Events } from 'ionic-angular';
import { QuicksearchPage } from '../pages/quicksearch/quicksearch';
import { BookingPage } from '../pages/booking/booking';
import { B2CsearchPage } from '../pages/b2-csearch/b2-csearch';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('content') nav: NavController;

  HAS_LOGGED_IN = 'hasLoggedIn';

  // make HelloIonicPage the root (or first) page
  rootPage = HelloIonicPage;
  pages: Array<{title: string, component: any}>;
  username :String;

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public storage: Storage,
    public events: Events
  ) {
    this.initializeApp();

    storage.get(this.HAS_LOGGED_IN).then((val) => {
      storage.get("username").then((val) => {
        this.username = val;
      });
      this.pages = [
        { title: 'Search B2B Booking', component: B2BSearchPage },
        { title: 'Search B2C Booking', component: B2CsearchPage },
        { title: 'Create Booking', component: BookingPage },
        { title: 'Quick B2C Search', component: QuicksearchPage },
        { title: 'Logout', component: LogoutPage }
      ];
      if (null === val) {
        this.pages = [
          { title: 'Login', component: LoginPage },
          { title: 'Register', component: RegisterPage }
        ];
      }
    });

    events.subscribe('user.logout', () => {
      this.pages = [
        { title: 'Login', component: LoginPage },
        { title: 'Register', component: RegisterPage }
      ];
    });

    events.subscribe('user.login', () => {
      this.pages = [
        { title: 'Search B2B Booking', component: B2BSearchPage },
        { title: 'Search B2C Booking', component: B2CsearchPage },
        { title: 'Create Booking', component: BookingPage },
        { title: 'Quick B2C Search', component: QuicksearchPage },
        { title: 'Logout', component: LogoutPage }
      ];
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.push(page.component);
  }

  home(){
    this.nav.setRoot(HelloIonicPage);
  }

  search(){
    this.nav.setRoot(QuicksearchPage);
  }

  createBooking(){
    this.nav.setRoot(BookingPage);
  }
}

loginService.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Storage } from '@ionic/storage';
import { B2BSearchPage } from '../b2bsearch/b2bsearch';
import { Events } from 'ionic-angular';
import { MasterConfig } from '../../config/config';
import { ProviderMeta } from '@angular/compiler';
import {LoginService} from '../../service/user/loginService';

@IonicPage()
@Component({
    selector: 'login-list',
    templateUrl: 'login.html',
    providers:[LoginService]
})
export class LoginPage implements OnInit {

    user: FormGroup;
    loginFailure = true;
    HAS_LOGGED_IN = 'hasLoggedIn';

    constructor(
        public navCtrl: NavController, 
        public storage: Storage,
        public events: Events,
        public masterConfig:MasterConfig,
        public loginService:LoginService ) {
    }
    ngOnInit() {
        this.user = new FormGroup({
            username: new FormControl('', [Validators.required, Validators.maxLength(20)]),
            password: new FormControl('', [Validators.required, Validators.maxLength(15)]),
        });
    }

    onSubmit(formData) {
        this.loginService.loginUser(formData).then((data) =>{
            console.log(data);
        }).catch((error)=>{
            console.log(error);
        })
    }
}

的package.json

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';
import { MasterConfig } from '../../config/config';

@Injectable()
export class LoginService {

    object = {
        username: "",
        token: "",
        userType: "ANDRIOD"
    }
    constructor(
        public http: HttpClient,
        public storage: Storage,
        public masterConfig: MasterConfig) {

        storage.get('token').then((val) => {
            this.object.token = val;
        });
        storage.get('username').then((val) => {
            this.object.username = val;
        });
    }

    loginUser(formData) {

        var url = this.masterConfig.AUTH_SERVER_URL + "/login";
        console.log(url);
        var data = JSON.stringify({ username: formData.controls.username.value, password: formData.controls.password.value, userType: "ANDRIOD" });

        return new Promise((resolve, reject) => {
            var dataObj = JSON.stringify({ username: this.object.username, token: this.object.token, userType: this.object.userType });

            this.http.post(url, dataObj).subscribe(data => {
               console.log(data);
                resolve(data);
            }, error => {
                reject(error);
            });
        });  
    }
}

Answer 1

如果您正在使用Angular 4.3.x及更高版本，请使用HttpClient中的HttpClientModule。它是HttpModule的新版本，其中包含以下功能：从JSON到对象的自动转换，另一方面，响应类型定义... HttpModule现已弃用（请参阅{ {3}}）。

此处的另一个问题是，您永远不应将Navcontroller注入app.component.ts。

Ionic 3获取错误：没有NavController的提供者

1 个答案: