Error Encountered: Module Not Found - Ionic Version 2

I have been working on a project using Ionic 2, with the initial page set to AuthPage. I recently added a new page called SplashPage through the console. However, when I tried setting the rootPage to SplashPage, I encountered an error stating

Uncaught Error: Cannot find module "./pages/splash/splash"
(app.bundle.js:3188). Any ideas on what might be causing this issue?

Here is my code in app.ts:

import {App, IonicApp, Platform} from 'ionic-angular';
import {ListPage} from './pages/list/list';
import {WishListPage} from './pages/wishlist/wishlist';
import {AuthPage} from './pages/auth/auth';
import {SplashPage} from './pages/splash/splash';

@App({
    templateUrl: 'build/app.html',
    config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
    providers: [UserService]
})
class MyApp {
    rootPage: any = SplashPage;
    pages: Array<{title: string, component: any, user: string}>;
    user: any;
    constructor(private app: IonicApp, private platform: Platform,
                private userService: UserService) {
        this.initializeApp();
        this.user = userService;

        // Pages configuration
        this.pages = [
            { title: 'Wishlist', component: WishListPage, user: "shopper"},
            { title: 'Current Orders', component: ListPage, user: "shopper" },
            { title: 'Orders', component: ListPage, user: "boxer" },
            { title: 'Profile', component: ProfilePage, user:"both" }
        ];

    }

This is the code for splash.ts:

import {OnInit} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Page, NavController} from 'ionic-angular';

// @PAGES
import {AuthPage} from '../auth/auth';

@Page({
    templateUrl: 'build/pages/splash/splash.html',
    directives: [NgIf],
    providers: []
})

export class SplashPage {
    constructor() { console.log("@AuthPage: __init__"); }
}

Answer №1

it appears that in your app.ts file, you are referencing a class called "spalsh" when it should be named SplashPage

therefore, I recommend renaming the class SplashPage to Splash in your #splash.ts file for proper functionality.

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

Leveraging TypeScript with Angular components

Situation: On my website, I have a section called the "main page" where all available books are displayed. The "main page" is represented by the blue box in the image provided and serves as a key component on my site. Additionally, there is a separate co ...

What other features can be integrated into the end method of the Node/Express Response object?

Our team is currently working on modifying the response.end method within our Express middleware to include additional functionality just before sending a response back to the client. Below is our implementation: return (req: Request, res: Response, next: ...

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

I recently developed a drag and drop tree list inspired by the tutorial on IgniteUI website. The main tree list functions properly, but I encountered an issue with the child nodes displaying as undefined, as illustrated in the image below: https://i.sstat ...

Typescript: The type 'Observable<{}>' cannot be assigned to the type 'Observable'

I'm encountering an issue with the Observable type, any thoughts on how to resolve it? import { PostModel } from '../model/postModel'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable&ap ...

The Recoil Nexus encountered an error: the element type provided is not valid. It should be a string for built-in components or a class/function for composite components, but an object was

Encountered the following error message: Error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at ReactDOMServerRenderer.render ... This issue arose when integra ...

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

Creating a new ES-6 class to extend express-js: Issues with binding getter and setter properties

I am intrigued by the idea of utilizing Express within an extended class. My goal is to create getter and setter methods for a property, but I'm facing the issue of these methods not being bound to the instances as desired. One way to work around this ...

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

Exploring the benefits of useContext in Expo router

Currently, I am working with the latest Expo-Router version which incorporates file-based navigation. To establish a universal language context in my application, I have utilized React's context API along with the useReducer hook. However, I am encoun ...

Exploring the integration of multiple HTTP requests in Angular with the power of RxJS

Is there a way to make multiple HTTP calls simultaneously in an Angular service and then combine the responses into one object using RxJS? import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; im ...

Learn the steps to disable web page preview in Telegram bot using Node.js

Hey there everyone, just a heads up that my English might not be perfect. Currently working on some nodejs coding and trying to figure out where exactly I should include the disable_web_page_preview in my code. Any ideas? Telegram.prototype.sendIn = asyn ...

Tips for selecting objects based on property in Typescript?

Consider this scenario: import { Action, AnyAction } from 'redux'; // interface Action<Type> { type: Type } and type AnyAction = Action<any> export type FilterActionByType< A extends AnyAction, ActionType extends string > ...

What is the method for identifying a form as "Dirty" by utilizing the form's name in AngularJS?

Currently, I am experimenting with dynamically adding HTML elements within a form. Upon clicking a button, these elements are successfully inserted into the HTML form. The snippet below displays the declaration of my HTML form: <div ng-cloak ng-form="" ...

Variable not accessible in a Typescript forEach loop

I am facing an issue with a foreach loop in my code. I have a new temp array created within the loop, followed by a nested foreach loop. However, when trying to access the temp array inside the nested loop, I encounter a "variable not available" error. le ...

Enhance your MaterialUI Button with a higher order component that accepts a component

I am currently working on implementing a Higher Order Component (HOC) for the MaterialUI Button component: import {Button as MUIButton, ButtonProps} from '@material-ui/core'; import * as React from 'react'; export const Button = (props ...

Using typescript with Ramda's filter and prop functions can lead to unexpected errors

I'm new to TypeScript and currently facing the challenge of converting JavaScript functions that use Ramda library into TypeScript functions. The lack of clear TypeScript usage in the Ramda documentation is making this task quite difficult for me. Sp ...

The type 'number' cannot be assigned to an empty object

New to TypeScript and seeking assistance. I recently refactored a colleague's code and implemented TypeScript. Since then, I have been fixing bugs, but I am stuck on one particular issue. Any help would be greatly appreciated! Within this component, ...

Encountering an issue with importing typeDefs in Apollo Server (Typescript) from an external file

I decided to move the typeDefs into a separate file written in typescript and then compiled into another file. Upon doing so, I encountered the following error: node:internal/errors:490 ErrorCaptureStackTrace(err); ^ Error [ERR_MODULE_NOT_FOUND]: Una ...

How to Establish an Angular Global Variable

What is the process for establishing a global variable in Angular? I have established a variable within a service, entered a value in the login component, and attempted to access this variable from another component. However, I noticed that the value res ...

Running webpack to compile a TypeScript project

Here's a question for you - is there a way to achieve multi-file compilation while maintaining the folder and file structure, without explicitly specifying each file in the entry configuration like this? entry: { index:'./src/index.ts', ...