Cautionary messages in Typescript regarding the utilization of interface and OpaqueToken within an Angular 2 application

I have been closely following the guidelines provided in this documentation and utilizing ng-cli.

In order to implement the required configuration, I created a new file named (app-config.ts):

import { OpaqueToken } from '@angular/core';

export interface AppConfig {
  supportTelephoneNumber: string;
}

export let APP_CONFIG_t = new OpaqueToken('app.config');

export const APP_CONFIG: AppConfig = {
  supportTelephoneNumber: '1111 111 1111'
};

Furthermore, within my app.module.ts file, the code includes:

...
@NgModule({
  declarations: [
    UkCurrencyPipe,
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    MaterialModule.forRoot()
  ],
  providers: [
    { provide: APP_CONFIG_t, useValue: APP_CONFIG },
    ...

To utilize this configuration, I referenced it in my app.component.ts file as shown below:

import { Component, Inject } from '@angular/core';
import { APP_CONFIG_t, AppConfig } from './app-config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(@Inject(APP_CONFIG_t) public config: AppConfig) {

  callSupport(): void {
    window.location.href = 'tel:+' + this.config.supportTelephoneNumber;
  }
}

Although everything appears to be functioning correctly when serving my app using ng serve, I do encounter these warnings in the console while running ng server:

WARNING in ./src/app/app.component.ts
40:166 export 'AppConfig' was not found in './app-config'

WARNING in ./src/app/app.component.ts
40:195 export 'AppConfig' was not found in './app-config'

Can anyone shed light on what these warnings signify and whether they require any concern?

Details of My Setup

  • Operating System: Mac OS X El Capitan v10.11.6
  • ng-cli: v1.0.0-beta.16
  • Angular: v2.0.1
  • TypeScript: v2.0.2

Answer №1

Based on a comment regarding the issue raised at https://github.com/angular/angular-cli/issues/2034

Encountering the same problem (although it works fine despite the warning). Have you been exporting multiple interfaces/classes/constants from the same file? The issue ceased for me once I started exporting each interface from its own separate file.

Essentially, if I had one file with numerous exports, I would receive warnings during the build process (such as 'export 'MyInterface1' was not found in '../file').

file.ts

export interface MyInterface1 {}
export interface MyInterface2 {}

Following the refactor - no more warnings

file1.ts

export interface MyInterface1 {}

file2.ts

export interface MyInterface2 {}

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

Angular application using ngrx-store-localstorage does not retain data after a page refresh

Looking to incorporate ngrx into my authentication flow with the help of ngrx-store-localstorage for token persistence between browser sessions. After logging in, I can see the token value stored like this: {"token":{"token":"e5cb6515-149c-44df-88d1-4ff1 ...

React Typescript: Turn off spellchecking

Struggling to turn off spell check for typescript <form> <input type='text' name='accountName' ref={accountName} onChange={checkName} spellCheck='false' // <====== Disable spellche ...

What is the method for defining unassociated variables in Angular?

I am currently seeking a solution to retrieve data from the server (or JSON file) and store it in two separate variables: 'firstVariable' for manipulation purposes, and 'secondVariable' for storing the original unaltered data. However, ...

Attempt to switch the filter using three input values in Angular

With 3 inputs, clicking on one sends the value to a function which filters and displays the result in a table. A toggle button allows switching back to the previous results. While everything works fine, I would like to have the option to render data based ...

Instead of tapping the enter key, try searching by keying up

I am implementing a search pipe in Angular for filtering data based on user input import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchPipe', pure: false }) export class SearchPipe implements PipeTransform { ...

Sharing data between child and parent components in Angular2: a comprehensive guide

I am facing an issue with transferring a range of values from a child component to a parent component. Below are the details of my components: TS: import { Component, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core'; @Com ...

Steps to successfully pass a reference from a parent component to a child component that utilizes TouchableOpacity in React Native

I am facing an issue with passing a transitioning ref from a parent Transitioning view to a child component: const transition = ( <Transition.Together> <Transition.In type="fade" durationMs={300} /> <Transition.Change /&g ...

Accessing component instances of all components declared in HTML in Angular 7

In the works is a page that acts as a form creator. Users will be able to click and insert various components onto the page, resulting in entries being added to the "component" variable like this: Take Component1 for example: const childComponent = this. ...

Incorporate a new method into a TypeScript class from a separate file

I'm curious about the feasibility of adding additional functions to a class prototype in Typescript. Here's my dilemma: I have a file containing a class, for example image.ts: export class Image { b64img: string; } Since this class is gene ...

Tapping on a particular ion-item button will activate the remaining buttons in Ionic 3

Let's imagine that there are n elements in the array of items. In this scenario, the following HTML will showcase n items with an arrow-dropup click button attached to each item. <div *ngFor="let item of medicineName; let i = index"> <ion- ...

Conceal a table if it has no content

I am dealing with 2 tables that contain various data sets. img01 If both of my tables happen to be empty, I would prefer them to be hidden. img02 Is it feasible to implement this in Angular? If you have a solution for me, I would be eager to give it a ...

Trouble with Implementing Nested h3 Styles in SCSS

I'm having trouble adjusting the margins of an h3 tag using scss in Angular. The scss code seems to be working, but when I nest the h3 tag inside a div tag, the margin adjustments don't take effect. Could someone help me figure out what's g ...

Vue textarea not accepting null values

My current setup includes the following dependencies: - "vue": "3.2.26", - "vee-validate": "4.5.6", - "typescript": "4.5.4" While working on a textarea field in vue3, I encountered an issue Here's a snippet with vee-validate integration import { Fie ...

Dealing with Exceptions in NestJS and TypeORM: Troubleshooting "Get Status is not a function"

Currently, I am working on an application utilizing NestJS and TypeORM. My main objective is to handle TypeORM errors by using exception filters. However, I have run into a roadblock as I am facing this particular error: (node:345) UnhandledPromiseReject ...

Use ng2-select2 directive to connect a reactive form formControlName

For managing forms in my Angular 5 project, I have implemented Reactive Form. Within the form, I integrated ng2-select2 to create a dropdown. However, when attempting to bind formControlName to the <select2></select2> directive, an error is thr ...

What is the process for connecting a date/time form control?

My code seems to only be working for the 'title' element, while the 'docdatetime' control remains blank. Can anyone spot what I'm doing wrong? //template =================================================== <div class="form-grou ...

Does the inclusion of a d.ts file in a JavaScript npm package constitute a breaking change according to SemVer guidelines?

Is adding a d.ts type declaration file and a new "types" property in the package.json of a JavaScript npm package considered a breaking change? Would it require a major version bump according to SemVer? This situation could go either way. It doesn't ...

Ways of utilizing a dynamic key for invoking a resource from prisma

Currently, I am attempting to implement a more general method to retrieve data from Prisma. The function in question appears as follows: import { Prisma, PrismaClient } from '@prisma/client'; import { NextApiRequest, NextApiResponse } from ' ...

The BehaviorSubject in Angular's service is causing data duplication issues when used with the Async

Initially, I have a service named ContractorsService, which includes a function called getContractors. This function makes a Firebase Firestore call to the contractors database using the AngularFire method. To manipulate the results from the snapshot, I u ...

Problems with the package @types/ckeditor

Encountering some difficulties while utilizing @types/ckeditor from the provided source. https://www.npmjs.com/package/@types/ckeditor The installation of the package was successful, and after importing the type into the necessary file, everything appear ...