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.

[MickL]

Guys this issue was explained here: https://github.com/angular/angular-cli/issues/2034#issuecomment-302666897

This is a problem with about how Webpack works. @filipesilva is there any chance this will be fixed some day? Are there open issues to address this problem?

Frustrating, but just use a class instead of an interface and it will work without any warnings.

[jalberto-ghub]

I was facing the same issue on and @Input() types by an interface. Solved by having one file with only interfaces (and type definitions), and moving constants and classes to a different file. A little bit of a headache but not as bad as requiring separate files for every interface or type or anything like that.

Still, if what someone above said is correct and cli is happy with:

@Input() foo = null;

I do not see why the trans-compiled code should be much different for:

@Input() foo: Bar;

To the extend that webpack will implode. Is there some specific semantic difference between the two (besides the explicit null assignment)?

[GersonDias]

I noticed that this error occurs when I try to export an Enum and an Interface in the same file. Since I split the Enum declaration of the Interfaces declarations, it's fine, even if I define a lot of interfaces in the same file. I didn't like to split my interface and enums into differents files because they share the same "domain context" in this case, but it's was the only way to get rid of this warning.

[polyglotinc]

In Angular 4.3.1, I strangely get similar errors when importing into one .ts file but not another one in same folder. Again, the same import works fine in one file, but the other one gets

WARNING in ./src/app/foo/bar.ts
19:50-54 "export 'Tags' was not found in '../tar/tag.model'

with tag.model.ts being

export type Tag = string;
export type Tags = Tag[];
export class TagSet {
    constructor(public category:string, public tags:Tags[]){}
}
export type TagList = TagSet[];

[jalberto-ghub]

@polyglotinc, I would think the reason you only see the problem in one file is because of the way the imported types are used. In my case a file containing something like:

@Input() foo: Tag; // This will cause the warning @Input() bar: Tag[]; // This will not cause the warning

The reason I think is that after transpilation you still need to know what "Tag" represents on the former, but not for the latter, which is just a JS Array.

[bam-dreymers]

I got around this setting it equal to null and casting the type:

@Input() foo = <SomeType>null

[tariknz]

This will fix it: @Inject(MD_DIALOG_DATA) public order: Order | undefined

Might be better for null-checking. There is more info on the webpack issue: https://github.com/webpack/webpack/issues/2977

Also using a class instead of an interface might fix it

[seanharr11]

Additionally, you can use @Input() property: PropertyType | null; to get around this. Not sold on this workaround, or any other workarounds though. They're just bandaids slapped on the underlying problem.

[lionelB]

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]

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]

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]

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]

@Inject(APP_CONFIG) config: AppConfig | AppConfig

is really strange workaround, but it just works xD

[AndyBrownlie]

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

[tim-white87]

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; ...

[rafaelbiten]

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]

@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]

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]

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!

https://github.com/webpack/webpack/issues/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

https://github.com/angular/angular-cli/issues/2034#issuecomment-249813801 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 https://github.com/angular/angular-cli/issues/14876. A fix seems to be coming in the next release.

[angular-automatic-lock-bot[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.}