Transferring data from index.ts using export and import operations

While working on my angular project, I encountered a rather peculiar issue. I have organized my project into separate modules for layouts, login, and dashboard. Specifically for the login page, I wanted to implement a unique layout. Here's how I tried to achieve that:

import { LoginLayout } from '../layouts/login-layout/login-layout.component'; // this line works fine
import { LoginLayout } from '../layouts'; // however, this line causes an issue

import { 
 loginRoute,
 resetPasswordRoute
} './'; 

const LOGIN_ROUTES = [loginRoute, resetPasswordRoute];

export const loginRoute: Routes = [
 path: '',
 component: LoginLayoutComponent,
 children:  LOGIN_ROUTES
]

I have exported the login layout from index.ts within the layouts folder like so:

...
export * from './login/login-layout/login-layout.compenent';

I am perplexed as to why one import statement works while the other does not. Strangely, there are no error messages displayed either.

angulartypescriptangular6

Answer №1

By comparing the folder structure of your import with the export in the index.ts file, it appears that there is an extra folder named ./login/. This may indicate the presence of an additional component with a different name being exported.

import { LoginLayout } from '../layouts/login-layout/login-layout.component'; // this works

index.ts 

export * from './login/login-layout/login-layout.compenent';

edit

This is how I envision the folder structure: 

├──dashboard
├──layouts
│     ├──index.ts
│     └──login
│            └──login-layout
│                    login-layout.component.ts 
└──login
      └──somefile-with-import.ts

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

What is the quickest way to send a message with just one press of the Enter key

Whenever I press "Enter Keyword," the message should be sent instead of going to the next line. ...

node.jstypescriptionic-frameworkionic3ionic4

The declaration file for the datepicker module could not be located, even though the necessary types have been installed

I'm encountering an issue during production build on my Next.js project. The error message reads: Could not find a declaration file for module 'react-datepicker'. '../node_modules/react-datepicker/dist/index.js' implicitly has an ...

reactjstypescripttypesreact-datepicker

What is the best way to specify a function type that takes an argument of type T and returns void?

I am in search of a way to create a type that can accept any (x: T) => void function: let a: MyType; a = (x: number) => {}; // (x: number) => void a = (x: string) => {}; // (x: string) => void a = (x: SomeInterface) => {}; / ...

typescript

I want to search through an array of tuples to find a specific value in the first index, and if there is a match, I need to return the value in the second index of the matching tuple

I am dealing with an array of tuples: var tuparray: [string, number][]; tuparray = [["0x123", 11], ["0x456", 7], ["0x789", 6]]; const addressmatch = tuparray.includes(manualAddress); In my function, I aim to verify if the t ...

javascripttypescripttuples

What could be causing the rapid breakage of the socket in Ionic 3's Bluetooth Serial after just a short period

Although the code appears to be functioning correctly, it loses connection shortly after establishing it. This snippet contains the relevant code: import { Component } from '@angular/core'; import { Platform, NavController, ToastController, Ref ...

androidcordovatypescriptbluetoothionic3

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

angularjstypescriptthisangular-services

Enhancing user experience with angular cdk drag & drop feature through click event activation instead of traditional dragging

Angular CDK drag and drop: Is there a way to move an item to the done list directly with a click event instead of dragging it? An example of this functionality can be seen on the 'jotform' site where clicking on an item in the left section autom ...

angularangular-cdkangular-cdk-drag-dropangular13

Ensuring File Size and Format Compliance in Angular's HTML and TypeScript

I'm currently tackling a file upload feature on an ASP.net webpage using Angular. I have a question: How can I verify if the uploaded file is either a PDF or JPG and does not exceed 2MB in size? If these conditions are not met, I would like to displa ...

htmlangulartypescript

The Angular API request is continuously retrieving data every single second

I recently inherited some Angular/ng-bootstrap code that included a table with static data, which was functioning perfectly. However, the requirement now is to fetch the data from an API call. In an attempt to modify it accordingly, I referred to an answer ...

angularrxjsbootstrap-5angular-ui-bootstrap

Expand the data retrieved from the database in node.js to include additional fields, not just the id

When creating a login using the code provided, only the user's ID is returned. The challenge now is how to retrieve another field from the database. I specifically require the "header" field from the database. Within the onSubmit function of the for ...

javascriptnode.jsangulardatabasetypescript

Unable to exclude specific files using VSCode's "files.exclude" feature

In my workspace settings file, the configuration for excluding certain files is as follows: { "files.exclude": { "**/*.js": { "when": "$(basename).ts" }, "app/**/*.js.map": { "when": "$(basename).ts" ...

angularjstypescriptvisual-studio-code

Angular is unable to locate images within the assets directory if they are nested within a subfolder

Despite my efforts to set a default PNG image for users who do not upload their own, I have been unable to get it to display after an hour of troubleshooting. <img src="assets/images/image-card.png" /> I attempted to modify the asset value ...

angular

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Here are the TypeScript codes I've written to retrieve product details and delete them. import { Component, OnInit } from '@angular/core'; import {FormGroup,FormBuilder, FormControl, Validators} from "@angular/forms" // other impor ...

htmlangulartypescript

Pause for Progress - Angular 6

I'm looking for a solution to solve the following issue. I need to access a property that will store data from an http request. Therefore, I want to verify this property only after the transaction is completed. validateAuthorization(path: string): ...

angulartypescript

How can I assign a true or false value to an input variable in HTML using AngularTS?

I copied the following HTML code: <tag-input fullWidth id="inputDir" formControlName="inputDir" [modelAsStrings]="true" [placeholder]="'choice feature'" ...

htmlangulartypescript

A guide on resolving TypeScript monorepo webpack loader problems

I recently created a typescript monorepo here with the following organized folder structure: . └── packages ├── package.json // Contains the monorepo workspace configuration ├── web-app // Includes the NextJS website files └ ...

typescriptwebpackmonorepo

Anticipating the outcome of various observables within a loop

I'm facing a problem that I can't seem to solve because my knowledge of RxJs is limited. I've set up a file input for users to select an XLSX file (a spreadsheet) in order to import data into the database. Once the user confirms the file, v ...

angulartypescriptrxjsobservableangular8

Mozilla struggles to interpret JSON data

When using Angular2 (RC4), I utilize this code snippet to retrieve data from my WebApi: getAppointment(id: number): Observable<Event> { return this._http.get(this._serviceUrl + 'get/' + id) .map(this.extractData) .catch ...

angulartypescriptmozillaangular2-http

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Experimenting with Ionic2 and Typescript has been my recent focus. I have an object that contains various meals, calorie counts, and meal types (such as vegan). This is how the object looks: [ { "id":14093, "name":"Proteinshake mit Wasser ...

angulartypescriptionic2

In TypeScript, at what level should the timeout be specified?

I'm currently working on writing a debounce function in TypeScript, but I'm feeling uncertain about the type that should be assigned to a variable used with setTimeout. This is the snippet of my code: function debounced(func: () => void, wait ...

javascripttypescriptecmascript-6