New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warnings when using an exported interface in a class #2034

Closed
Maistho opened this Issue Sep 9, 2016 · 122 comments

Comments

Projects
None yet
@Maistho

Maistho commented Sep 9, 2016

1. OS

Arch Linux

Linux maistho-laptop 4.7.2-1-ARCH #1 SMP PREEMPT Sat Aug 20 23:02:56 CEST 2016 x86_64 GNU/Linux

2. Versions

angular-cli: 1.0.0-beta.11-webpack.8
node: 6.5.0
os: linux x64

3. Repro steps

I started a new repository, and added a new empty service, with an exported interface.

Complete changes, and a repo to pull and see the issue, can be found here:

Maistho/angular-cli-input-issue@e5c4830

After running ng build, I get two warnings in the Terminal

4. The log given by the failure

Hash: 354e709ba2cf588db59a                                                                                                                                                                                          
Version: webpack 2.1.0-beta.21
Time: 11161ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.51 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map     3.1 MB    0, 2  [emitted]  main
       styles.map    14.1 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  489 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.46 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]

WARNING in ./src/app/app.component.ts
18:55 export 'TestInterface' was not found in './test.service'

WARNING in ./src/app/app.component.ts
18:88 export 'TestInterface' was not found in './test.service'
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 357 bytes [entry] [rendered]

5. Mention any other details that might be useful.

I could not reproduce the issue without adding the @Input() to the class member.

Compiling with tsc does not produce any warnings.

@slubowsky

This comment has been minimized.

slubowsky commented Sep 9, 2016

I get same issue when following the the dependency injection token example given in the angular docs - https://angular.io/docs/ts/latest/guide/dependency-injection.html#dependency-injection-tokens

Haven't checked if perhaps the docs have been updated but implemented in my app based on documentation as of maybe 2 months ago I get the following warning:
export 'AppConfig' was not found in '../app.config'
Whenever I import the interface.

Works fine despite warning so I've just been waiting for it to go away eventually as things mature

@filipesilva

This comment has been minimized.

Member

filipesilva commented Sep 19, 2016

@TheLarkInn can you weight in?

@xwb1989

This comment has been minimized.

xwb1989 commented Sep 21, 2016

Seeing the very same error as well.

@TheLarkInn

This comment has been minimized.

Member

TheLarkInn commented Sep 22, 2016

This is a bug we identified but I need to find it in our webpack repo to link to this one.

@talsi

This comment has been minimized.

talsi commented Sep 27, 2016

having the same issue. (Works fine despite warning)
are you exporting more than one interface/class/const from the file?
issue stopped for me after i exported each interface from its own dedicated file.

meaning if i had one file with multiple exports - i got warnings in build (export 'MyInterface1' was not found in '../file')

file.ts

export interface MyInterface1 {}
export interface MyInterface2 {}

after refactor - no warning

file1.ts

export interface MyInterface1 {}

file2.ts

export interface MyInterface2 {}
@wulfsberg

This comment has been minimized.

wulfsberg commented Oct 19, 2016

Usually (and coming from the Java world), I'd consider it good style to split such multiple definitions into separate files anyway.
But given how Angular recommends injecting interfaces (with an OpaqueToken), it seems obvious to define the interface and its related token in the same file, triggering this error.

@teledemic

This comment has been minimized.

teledemic commented Oct 19, 2016

This issue is fixed for me after upgrading to angular-cli 1.0.0-beta.17 and angular 2.1.0

@Maistho

This comment has been minimized.

Maistho commented Oct 19, 2016

@teledemic interesting, I still have the same problem on those versions.

@teledemic

This comment has been minimized.

teledemic commented Oct 19, 2016

Huh! I recently upgraded all my packages. Not sure what it could have been other than those two. FWIW:

  "dependencies": {
    "@angular/common": "2.1.0",
    "@angular/compiler": "2.1.0",
    "@angular/core": "2.1.0",
    "@angular/forms": "2.1.0",
    "@angular/http": "2.1.0",
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.1.0",
    "@angular/router": "3.1.0",
    "angular2-highcharts": "^0.3.4",
    "bootstrap": "4.0.0-alpha.4",
    "core-js": "^2.4.1",
    "jwt-decode": "2.1.0",
    "ng2-bootstrap": "^1.1.14",
    "rxjs": "5.0.0-rc.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.35",
    "@types/jwt-decode": "1.4.28",
    "angular-cli": "^1.0.0-beta.17",
    "codelyzer": "~1.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.4.3",
    "tslint": "3.15.1",
    "typescript": "^2.0.3"
  }
@wulfsberg

This comment has been minimized.

wulfsberg commented Oct 19, 2016

I'm on Angular 2.1.0 and CLI beta 17. I have a structure looking like this:

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

export const APP_CONFIG = new OpaqueToken('app.config');

export interface AppConfig {
  geoserverUrl: string;
  ...
}

which triggers a Warning:
export 'AppConfig' was not found in '../../app.config'
whenever I try to inject the named token, e.g.

constructor(private http: Http, @Inject(APP_CONFIG) private appConfig: AppConfig) {
  ...
}

If I make the AppConfig a class, it works without warnings. (Though of course it then has to be instantiated differently).
I makes me wonder if something in the build sequence just throws away the interfaces (too early), since they don't actually exist in the final JavaScript.

@b091 b091 referenced this issue Oct 23, 2016

Closed

Its all about the types #60

0 of 1 task complete
@Iverson

This comment has been minimized.

Iverson commented Nov 16, 2016

Same issue with @input property decorator. Found workaround:

@Input() myProp = <MyInterface1>null

instead of

@Input() myProp: MyInterface1

now no warnings

@jmsegrev

This comment has been minimized.

jmsegrev commented Nov 28, 2016

Can anybody update on the status of this?. I'm at v1.0.0-beta.21, and still getting the warnings.

@elmartino

This comment has been minimized.

elmartino commented Dec 8, 2016

I get an error in CLI: Cannot find name 'HERO_DI_CONFIG'. (followed complete example on angular documentation). Despite the error, all is working fine an chrome console doesn't log any errors.

@tcoz

This comment has been minimized.

tcoz commented Dec 14, 2016

Just to add what knowledge I can, if you are using the APP_CONFIG example and getting the harmony warning, I moved the interface declaration (and just the interface declartion) into another file (iapp.config.ts),

export interface IAppConfig {
  API_URL: string;
}

imported IAppConfig into app.config.ts (since it is now in another file), and did the imports in the components separately, e.g:

import { APP_CONFIG } from '../app.config';
import { IAppConfig } from '../iapp-config';

Everything else remained the same (didn't have to convert it to a class etc). The extra file/imports are bulky, but no warnings and works as expected.

@itsnotvalid

This comment has been minimized.

itsnotvalid commented Jan 18, 2017

Recently trying to create a service provider (yup, also following the DI guide at https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#injector-providers) and I copied the code into the hero.service.provider.ts file. It seems that it demands the file to export CamelCase instead of camelCase.

@catull

This comment has been minimized.

Contributor

catull commented Jan 23, 2017

Took @Maistho repo for a spin.

After ng init, overwriting most files except for app.component.*.ts.
ng build still gives the warning:

Hash: cad6eef25bd1670f6646
Time: 10163ms
chunk    {0} main.bundle.js, main.bundle.map (main) 5.23 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 1.77 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.61 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

WARNING in ./src/app/app.component.ts
18:55-68 "export 'TestInterface' was not found in './test.service'

WARNING in ./src/app/app.component.ts
18:88-101 "export 'TestInterface' was not found in './test.service'

ng version is

                         _                           _  _

__ _ _ __ __ _ _ _ | | __ _ _ __ ___ | |()
/ || '_ \ / _ || | | || | / ` || '|___ / __|| || |
| (
| || | | || (
| || |
| || || (| || | |___|| ( | || |
_
,||| || _, | _,||| _,||| _|||||
|
_/
angular-cli: 1.0.0-beta.26
node: 7.4.0
os: darwin x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.4.4
@angular/compiler-cli: 2.4.4

@colthreepv

This comment has been minimized.

colthreepv commented Jan 30, 2017

I still have this warning, as @catull reported.

The current workaround that @Iverson suggested works for me.
But I didn't understand what it meant at first.
It's a typescript type cast, it says "in myProp there is a null value (initially), but it WILL be of type MyInterface1

It can also be written as:
@Input() myProp = null as MyInterface1;

@CalebMacdonaldBlack

This comment has been minimized.

CalebMacdonaldBlack commented Jan 31, 2017

I'd really like to see this resolved

@adamrkerr

This comment has been minimized.

adamrkerr commented Jan 31, 2017

I am still experiencing exactly the issue described by @wulfsberg.

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

export let SKYPE_CONFIG_TOKEN = new OpaqueToken('skype.config');

export interface SkypeConfig {
    ...
}

Everything works, but I get this warning:

105:93-104 "export 'SkypeConfig' was not found in './skype.config'

As this seems to be legal (and recommended) code, it would be better if it did not throw a warning.

@anodynos

This comment has been minimized.

anodynos commented Feb 20, 2017

There is simpler & better solution: move all interfaces in a relevant `myfunctionality.interfaces.ts' with a normal exports

export interface MyFunctionality {
   foo: string;
}

and it works like a charm, with no warnings. And it separates your interfaces into their own files, which is nice.

@lionelB

This comment has been minimized.

lionelB commented Sep 13, 2017

Hello,
I having warnings when I export a string literal type from one file and import it in another.
I've managed to get rid of the warnings by moving that string literal types to a d.ts file.
Hope it helps !

@filipesilva

This comment has been minimized.

Member

filipesilva commented Sep 22, 2017

Heya all,

I've been working on a new compilation pipeline for Angular 5 and up that should take care of these warnings in addition to other type related issues.

@thomkok18

This comment has been minimized.

thomkok18 commented Sep 25, 2017

My warning in the console:

Warning: ./src/app/scheduler/event-form/event-form.component.ts
111:78-86 "export 'DayEvent' was not found in 'app/scheduler/month-view/month-view.component'

I fixed the warning by doing:
@input() event: DayEvent | null;

instead of doing:
@input() event: DayEvent;

@btgoodwin

This comment has been minimized.

btgoodwin commented Oct 11, 2017

I had the same problem, but couldn't use the type union because my input was a setter:

@Input() set something(s: SpecialInterface) { /** */ }

The switch from es2015, as set by the @angular/cli application generator to commonjs as noted above solved it for me.

@vpArth

This comment has been minimized.

vpArth commented Oct 17, 2017

@Inject(APP_CONFIG) config: AppConfig | AppConfig

is really strange workaround, but it just works xD

@AndyBrownlie

This comment has been minimized.

AndyBrownlie commented Oct 17, 2017

yep, I can confirm what @vpArth states worked for me also.

@cecotw

This comment has been minimized.

cecotw commented Oct 18, 2017

I am getting this warning for interfaces imported via a feature module library, however the strange workaround works to suppress the warning.

import { AccountSummary } from '@mylib/core
export class OrderComponent implements OnInit { @Input() account: AccountSummary; ...

fredguile pushed a commit to fredguile/ng2-md-datatable that referenced this issue Oct 23, 2017

Frederic Ghilini
Replaced public events interfaces by classes, to avoid CLI warnings w…
…hen using them as types decorators. You may get such warning if you're using them for a @input() for instance. Read more about this issue here: angular/angular-cli#2034 (comment)

fredguile pushed a commit to fredguile/ng2-md-datatable that referenced this issue Oct 23, 2017

Frederic Ghilini
Replaced public events interfaces by classes, to avoid CLI warnings w…
…hen using them as types decorators. You may get such warning if you're using them for a @input() for instance. Read more about this issue here: angular/angular-cli#2034 (comment)

maurizi added a commit to azavea/climate-change-components that referenced this issue Oct 24, 2017

Add api module with contents from climate-change-lab
 - Copy in climate-change-lab models/services, modified to inject in
   `apiHost` constant and `apiHttp` service
 - Support AoT bundling with angular-library-builder (`nglb`)
 - To avoid issues with type-checking interfaces, we override the
   `tsconfig.json` used by `nglb` to target the `CommonJs` module system.
   See angular/angular-cli#2034 for more info.
@rafaelbiten

This comment has been minimized.

rafaelbiten commented Nov 9, 2017

I had the same problem exporting an interface:

export interface ResourceRef {
  [id: string]: {
    expires: string;
    resources: Array<Ref>
  };
}

and using it with @Input() resourceRef: ResourceRef;

Then I simply changed the interface to be a class, which johnpapa also suggested here:

export abstract class ResourceRef {
  [id: string]: {
    expires: string;
    resources: Array<Ref>
  };
}

And the warning is gone.
Now, is there any downside to that?

@hotforfeature

This comment has been minimized.

hotforfeature commented Nov 9, 2017

@rafaelbiten using a class, even abstract, will generate extra code for that class when compiled. An interface gives type checking for plain objects without generating additional code.

@briancodes

This comment has been minimized.

briancodes commented Dec 14, 2017

Has this been resolved? I am not seeing the errors with the following versions and import (although originally I was using abstract class

Angular CLI - v1.6.0
TypeScript Workspace Version: 2.4.2
TypeScript VSCode Version: 2.6.1

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

export interface ContentfulKeysConfig {
  space: string;
  accessToken: string;
  contentTypeIds: {
    post: string;
  };
}

export const CONTENTFUL_KEYS_CONFIG = new InjectionToken<ContentfulKeysConfig>('contentful-keys.config');
import { CONTENTFUL_KEYS_CONFIG, ContentfulKeysConfig } from './config/contentful-keys.config';
private keysConfig: ContentfulKeysConfig;
constructor(@Inject(CONTENTFUL_KEYS_CONFIG) config: ContentfulKeysConfig) {
    super();
    this.keysConfig = config;
@sinedsem

This comment has been minimized.

sinedsem commented Dec 15, 2017

Why is it closed?

@stevenxi

This comment has been minimized.

stevenxi commented Dec 28, 2017

Still seeing the issue for Angular CLI v1.6.3. Why is it closed?

@yangwen2

This comment has been minimized.

yangwen2 commented Jan 9, 2018

This issue is happening. I have a one big ts file with many interfaces defined. Only two of those interfaces are causing this warning during build. However I'm able to import the interfaces just fine and intellisense is working for the affected interfaces. The stack trace shows the warning is triggered by the cli package. I assume this is ok to ignore as long as it build properly?

@jeanpchr

This comment has been minimized.

jeanpchr commented Jan 10, 2018

I assume this is ok to ignore as long as it build properly?

yes @yangwen2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment