Warnings when using an exported interface in a class

[Maistho]

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:

https://github.com/Maistho/angular-cli-input-issue/commit/e5c483081bfd7af3dafd0db074179b3090668e27

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]

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]

@TheLarkInn can you weight in?

[xwb1989]

Seeing the very same error as well.

[TheLarkInn]

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

[talsi]

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]

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 issue is fixed for me after upgrading to angular-cli 1.0.0-beta.17 and angular 2.1.0

[Maistho]

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

[teledemic]

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]

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.

[Iverson]

Same issue with @input property decorator. Found workaround:

@Input() myProp = <MyInterface1>null

instead of

@Input() myProp: MyInterface1

now no warnings

[jmsegrev]

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

[elmartino]

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]

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]

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]

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]

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]

I'd really like to see this resolved

[adamrkerr]

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]

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.

[scheysni]

This issue is very annoying.
Could you please fix it?

[sinedsem]

Why is it closed?

[stevenxi]

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

[yangwen2]

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]

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

yes @yangwen2

[andrew-humu]

In case anyone's looking for it, this appears to be the upstream webpack issue that @TheLarkInn mentioned!

webpack/webpack#7378

[Maxim-Mazurok]

In my case, restarting ng serve helped. I had only one export in my ts file

[pradeepbp1310]

I just restarted the server and the warnings are gone.

[imrjack]

This is not an issue anymore. I used abstract class instead.

[Aviking88]

This is not an issue anymore. I used abstract class instead.

is there any impact on types if we change interface to abstract class

[mpgo13]

Got this issue today when updating angular's packages to 8.0.4 / 0.800.4

#2034 (comment) fixed it for me

[hijazikaram]

Having this issue after upgrading to angular 8

[th0r]

Having this issue after upgrading to angular 8

Just move out app the interface/types from the problematic file into a separate *.ts file and don't add the actual code there.

[hijazikaram]

@th0r do you mean the interface thats causing the issue to remove them and put them into there own separate file

[th0r]

@hijazikaram yes. In my projects in case of such errors I just move all the interfaces/types from the file that triggers an error into a separate file e.g. <filename>.types.ts and export all of them. Also this file should not contain any real code e.g. classes, functions, variable etc.

[evgeniyefimov]

Same issue. Moving interface to a separate file doesn't help if use barrel.

[jeffwhelpley]

Same issue. really don't want to move interfaces to separate files. Also, issue for aggregator ts files that do a lot of export * from.

[hijazikaram]

@jeffwhelpley I just added | null which fixed the issue for me

[hijazikaram]

Why is angular/typescript making it hard for us? 😞

[tbnovaes]

same as @mpgo13. I started getting the issue when updated to version 8.0.4 / 0.800.4,

But in my case #2034 (comment) didn't work for me.

Error is not just happening within my own libs, but also in one of the ngrx libraries

[dmitry-urenev]

@tbnovaes I got the same issue few days ago. After setting the fixed version of angular devDependencies to 8.0.0 / 0.800.0 it was gone.

[larrifax]

For those of you who got this error after upgrading to 8.0.4 / 0.800.4, see #14876. A fix seems to be coming in the next release.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}