I have added the Page(HomePage) that has a component in it in entryComponents but still getting a error as "Error: Uncaught (in promise): Error: Component HomePage is not part of any NgModule or the module has not been imported into your module."
Code Block--
login.module.ts----
#NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
exports: [
LoginPage
],
entryComponents:[HomePage]// Added here
})
export class LoginModule {}
-----
login.ts----------------
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
createUserId(){
this.myProvider.createUserId(this.value,data=>{
if(data=="success")
{
this.check_response="UserID created"
this.navCtrl.push(HomePage)//-----Getting an error here
}
else
this.check_response="Failure"
})
//console.log("submit")
}
}
homepage.module.ts-----------
#NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
AddExpenseModule
],
exports: [
HomePage
]
})
export class HomePageModule {}
You need to also include HomePage in the declarations array of ngModule. All app components, directives, etc need to do in the declarations array. A good detailed explanation is available here: https://www.joshmorony.com/an-introduction-to-ngmodule-for-ionic-2/
Related
I have a component and service, I try to inject service (ListUserService) in component.
I import the service, I request it and I get an error, when I delete the service it works well, what is the error?
import { Component, OnInit } from '#angular/core';
import {ListUserService} from './list-user.service';
#Component({
selector: 'app-list-user',
templateUrl: './list-user.component.html',
styleUrls: ['./list-user.component.scss'],
providers: [ListUserService]
})
export class ListUserComponent implements OnInit {
constructor(private listUserService: ListUserService) {
console.log(this.listUserService);
}
}
and this is the service:
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ListUserService {
constructor(public http: HttpClient) {
this.http.get(`http://localhost:8080/user/getUsers/`)
.subscribe(response => {
console.log(response);
});
}
}
this is the error:
ERROR
Error: StaticInjectorError(AppModule)[ListUserService -> HttpClient]:
StaticInjectorError(Platform: core)[ListUserService -> HttpClient]:
NullInjectorError: No provider for HttpClient!
this is the file app.module.ts
import {HttpClient} from '#angular/common/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ListUserComponent} from './list-user/list-user.component';
import {ListUserService} from './list-user/list-user.service';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
HttpClient,
StatusBar,
SplashScreen,
ListUserService,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
You have failed to add HttpClientModule in imports of app.module.ts
import { ListUserComponent } from './list-user/list-user.component';
import { ListUserService } from './list-user/list-user.service';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
ListUserService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Add your Service to the providers: [ListUserService] in your app.module.ts
https://angular.io/guide/ngmodules
EDIT: HttpClient must be added to providers: [ListUserService, HttpClient] aswell as import {HttpClient} from '#angular/common/http';
After installing all needed dependencies and importing them in App Module it throws error for File and File path. Like it can't be included inside providers.
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { File } from '#ionic-native/file';
import { Transfer } from '#ionic-native/transfer';
import { FilePath } from '#ionic-native/file-path';
#NgModule({
declarations: [MyApp],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
EmojiPickerModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [MyApp],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
},
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
AuthProvider,
TokenProvider,
MessageProvider,
File,
Transfer,
Camera,
FilePath,
PostProvider,
UsersProvider,
]
})
export class AppModule {}
Why it doesn't allow to implement these 2 ones in the providers section? How can this be fixed? We are using Ionic 3
I Want to use Angular Material Date picker but I am getting this error.
Uncaught Error: Unexpected directive 'MatFormField' imported by the module 'AppModule'. Please add a #NgModule annotation.
app.component.html
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {MatFormField} from '#angular/material';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatFormField
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
To import components and directives etc, you import their modules, not the actual components and directives. So you need to import MatFormFieldModule instead of MatFormField:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { MatFormFieldModule } from '#angular/material/form-field';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I have an Ionic 2 application where I make use of Storage.
When I start the app, it crashes with the error message: Can't resolve all parameters for Storage: (?, ?).
I can't seem to find the error, who can help me?
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Storage } from '#ionic/storage';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { EthylenePage } from '../pages/ethylene/ethylene';
import { PropylenePage } from '../pages/propylene/propylene';
import { TemporaryResultPage } from '../pages/temporary-result/temporary-result';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
EthylenePage,
PropylenePage,
TemporaryResultPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
PropylenePage,
EthylenePage,
TemporaryResultPage,
HomePage,
TabsPage
],
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},
StatusBar,
SplashScreen,
Storage
]
})
export class AppModule {}
In my package.json I have added this to my dependencies section:
"#ionic/storage": "1.1.7"
Please check this http://ionicframework.com/docs/storage/
The documentation state
import { IonicStorageModule } from '#ionic/storage';
and
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
You don't need to add Storage on providers part
When I am trying to add ionic deploy service on an application I get the Following Error:
if you add Deploy to providers
please remove it and app will run again
You shouldn't add Deploy as a provider. The right way for using Deploy with Ionic is defined on this webpage: https://docs.ionic.io/setup.html#installation
// app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
#NgModule({
declarations: [ ... ],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [ ... ],
providers: [ ... ]
})
export class AppModule {}