MyApp is encountering issues resolving all parameters

I'm encountering an issue that none of the other similar questions have been able to help me solve. Can anyone offer assistance? I've already attempted removing parameters one by one, but I'm still stuck.

Can't resolve all parameters for MyApp: (?, ?, ?, ?, ?, ?).

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Subscription } from 'rxjs';

import { GlobalService } from '../services/global-service';

import { TabsPage } from '../pages/tabs/tabs';

import { File } from '@ionic-native/file';
import { Insomnia } from '@ionic-native/insomnia';

@Component({
  templateUrl: 'app.html'
})
export class MyApp{

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private global : GlobalService,
              private file: File, private insomnia: Insomnia){}
}

app.module.ts

import { MyApp } from './app.component';
import { Platform } from 'ionic-angular';
import { GlobalService } from '../services/global-service';
import { UserService } from '../services/user-service';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { File } from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';
import { Insomnia } from '@ionic-native/insomnia';
import { Network } from '@ionic-native/network';
import { MusicControls } from '@ionic-native/music-controls';


@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [...],
  entryComponents: [
    MyApp
  ],
  providers: [
    Platform,
    StatusBar,
    SplashScreen,
    Insomnia,
    File,
    FileTransfer,
    Network,
    MusicControls,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    GlobalService,
    UserService,
    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig }
  ]
})
export class AppModule {}

services/global-service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import { File } from '@ionic-native/file';
import { Platform } from 'ionic-angular';
import * as SoundFont from 'soundfont-player';
import * as Firebase from 'firebase';
import 'firebase/firestore';

import 'rxjs/Rx';

@Injectable()
export class GlobalService {..}

I can't pinpoint the root cause of my error so far. My environment includes Ionic 3.9.2, Angular Core 5.2.9, Node 6.10.2. Could there be an issue with my node_modules or configurations?

Answer №1

It appears that the Platform provider is missing in your code.

import { MyApp } from './app.component';
import { GlobalService } from '../services/global-service';
import { UserService } from '../services/user-service';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { File } from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';
import { Insomnia } from '@ionic-native/insomnia';
import { Network } from '@ionic-native/network';
import { MusicControls } from '@ionic-native/music-controls';


@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [...],
  entryComponents: [
    MyApp
  ],
  providers: [
    Platform,
    StatusBar,
    SplashScreen,
    Insomnia,
    File,
    FileTransfer,
    Network,
    MusicControls,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    GlobalService,
    UserService,
    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig }
  ]
})
export class AppModule {}

The error message "

Can't resolve all parameters for MyApp: (?, ?, ?, ?, ?, ?)
" suggests that the constructor of your app is expecting certain parameters which are not being provided.

EDIT

You might also be missing the app-root selector on your App component.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Subscription } from 'rxjs';

import { GlobalService } from '../services/global-service';

import { TabsPage } from '../pages/tabs/tabs';

import { File } from '@ionic-native/file';
import { Insomnia } from '@ionic-native/insomnia';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html'
})
export class MyApp{

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private global : GlobalService,
              private file: File, private insomnia: Insomnia){}
}

Answer №2

Have you made any changes to your index.html file?

If so, please revert the changes or ensure that the build files are in the correct order:

polyfills.js, vendor.js, and main.js
. I attempted to replicate the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a personalized directive within a ionic popup

I am currently using the ion-textarea autosize directive: import { Directive, HostListener, ElementRef } from '@angular/core'; @Directive({ selector: 'ion-textarea[autosize]' }) export class AutoResizeTextareaDirective { readonly ...

Utilizing shared state in React components through props

Currently, I am utilizing a shared global state in the following manner: interface DashboardProps extends React.Props<Dashboard> { globalState? : GlobalState } export class Dashboard extends React.Component<DashboardProps, any>{ } Withi ...

Search for records in MySQL using Typeorm with the condition "column like %var%" to retrieve results containing the specified

Looking for a way to search in MySql using typeorm with the "column like" functionality. async findAll({ page, count, ...where }: CategorySelectFilter): Promise<Category[]> { return this.categoryRepository.find({ where, ...

Introducing Vee Validate 3.x and the ValidationFlags data type definition

I'm currently struggling to locate and utilize the ValidationFlags type within Vee-Validate 3. Despite my efforts, I am encountering difficulties in importing it. I am aware that this type is present in the source code located here. However, when I a ...

Storing the ngFor output in a variable with Angular 2

I've been exploring how to achieve this functionality using AngularJS and was successful with the following code: item in (filteredList.sup = (nozzles | rangeFilter: { flow: calc.q.tempFlow, pressure: calc.pressure } | orderBy: 'pressao')) ...

Develop an Angular 15 function that generates observables by utilizing local variables

The function being observed is not executed through HTTP; it must be a local function, but still needs to be subscribed to. Below is the implementation I came up with based on online examples: export class AppComponent implements OnInit { title = 'S ...

Typescript encounters transpilation issues when the spread operator is omitted for undefined values {...undefined}

I am currently working on a TypeScript project where I have encountered a peculiar issue. Within some of my TypeScript files, I am including a plain JavaScript/Node file named config.js. The content of config.js is as follows: 'use strict'; modu ...

npm encounters difficulty in reverting to a previous version of the node package (angular-cli)

Encountering some bugs in the current version of the node package angular-cli led me to decide to revert back to a previous version, specifically 1.0.0-beta.28.3. The main puzzle I'm faced with now is figuring out the necessary steps to rollback to a ...

The input argument must be of type 'PollModel', as the property 'pollId' is required and missing in the provided 'any[]' type

Hey there! An issue popped up when I tried to pass an empty array as a model in my Angular project. The error message reads: "Argument of type 'any[]' is not assignable to parameter of type 'PollModel'. Property 'pollId' is ...

Encountering Next.js Hydration Issue when Using Shadcn Dialog Component

While working on a Next.js project, I came across a hydration error when utilizing the Shadcn Dialog component. The specific error message reads: "Hydration failed because the initial UI does not match what was rendered on the server." Highligh ...

Creating a Vue Directive in the form of an ES6 class: A step-by-step

Is it possible to make a Vue directive as an ES6 Class? I have been attempting to do so, but it doesn't seem to be working correctly. Here is my code snippet: import { DirectiveOptions } from 'vue'; interface WfmCarriageDirectiveModel { ...

Error encountered with the Angular 2 routing system

Currently, I am facing an issue with my Angular 2 router module. Whenever I try to access the link /city, I encounter an error message saying 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activat ...

Typing slowly in Angular's modal window

Recently, I encountered an issue with a modal window that contained a text input. Whenever I tried typing in the text input field, it was incredibly slow. Strangely, this text input did not have any events attached to it apart from ngModel. A screenshot fr ...

Resolve the Angular proxy issue with the backend

Attempting to troubleshoot a similar problem, but struggling to understand why it's not functioning correctly. The API I am working with is located at: localhost:8080/api/acl/authorize Here is the HTTP client code: const AUTH_URI = "/api/acl/&q ...

ngx-translate-multi-http-loader: An error occurred while trying to load the specified translation file

While working on my Ionic 5 App, I decided to use the library ngx-translate-multi-http-loader in order to load multiple language files. Even though there were no errors, I encountered an issue where the translations were not functioning properly. To reso ...

Accessing unique identifiers from Firebase Database with AngularFire

My Firebase Database is structured as shown below: fire-demo-123 course 1 : "course1" 2 : "course2" 3 : "course3" -MzOn2s : "course4" I am currently using the following code to fetch the list component.t ...

Applying ngStyle based on changing information

I am struggling with setting the fill and stroke of an SVG path element based on the values in an array named shirts. <path class="st2" style="stroke-width:2.0;" [ngStyle]="myStyle(4)" d="M11.5,315....315.9z"/> In my code, I have defined a function ...

Exploring the functionality of typeahead with server-side data integration

I am utilizing ng-select with Angular 7 and creating the following component: export class PostComponent { selectedCategoryID: number; allCategories$: Observable<CategoryModel[]>; constructor(private catService: CategoryService) { } ngOn ...

Setting the root path of an Angular2 application separate from the base URL in the HTML code

Currently, I am in the process of developing an angular2 application/widget that will be integrated into TYPO3 as a plugin and can be added to any content page. This means it may have varying root paths like: /page1/app /page/subpage/subpage/whatever TYP ...

Disconnecting a Metamask Wallet in an Angular application: A Step-by-

I need assistance with disconnecting a Metamask wallet using web3 in Angular. //this is my wallet connection code async connectWallet() { const accounts = await this.ethereum.request({ method: 'eth_requestAccounts', }); this.selectedAddress ...