Build failed in Angular 5 (in development mode)

[Ivan-Perez]

Hi!

I'm trying to install this module into my Angular 5 application. After running npm install ng2-file-drop --save, the dependency is correctly saved into the node_modules folder.

Then I added the module into the app.module, and started serving my application (using ng serve). Compilation fails with this error message:

ERROR in ./node_modules/ng2-file-drop/index.ts
Module build failed: Error: ...\node_modules\ng2-file-drop\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (...\node_modules\@ngtools\webpack\src\angular_compiler
_plugin.js:663:23)
    at plugin.done.then (...\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/app.module.ts 25:22-46
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Inside the error, there's a link explaining why angular-cli thinks this plugin may be incorrectly packaged: https://goo.gl/jB3GVv

This is my environment:

Angular CLI: 1.6.8
Node: 8.9.4
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

I've tried to follow the installation guide, but had no success because in my project (almost a blank project started two days ago) there is no systemjs.config.js file. I don't know if my issue is related to the lack of that file.

Thanks in advance for your help!

[DnNexus]

Hi Ivan, it just happened to me, you don't need the systemjs.config.js file because you ( or Angular CLI ) use Webpack instead of SystemJs, the only way I have managed to make it work by now is by putting the following in tsconfig.json:

"include": [ "src/**/*", "node_modules/ng2-file-drop/**/*.ts", "node_modules/tslerp/**/*.ts" ]

In this way you tell Typescript compiler to include all your code (assuming it's in the src folder) and also the libraries that it complains about, because in Angular 5 .ts files that are outside the source folder ( in node_modules for example ) are not included automatically in the compilation. Good luck

[julia-string]

Thank you @DnNexus, I can confirm, this works. However, I'd classify this as a temporary work-around, but not as a solution.

[Ivan-Perez]

Hi @DnNexus

I've done what you say and it works perfectly. Thank you very much!

To @leewinder - I don't know if you want to fix or at least document this work around, so it's up to you to close this issue.

[charles-owen]

I wasn't able to get this to work in Angular 5 at all. Every time I tried to fix something it broke something else.

As noted, it does not include the files, so I added this to tsconfig.app.json:

"include": [ "/*.ts", "../node_modules/ng-autosize/index.ts", "../node_modules/tslerp//.ts", "../node_modules/ng2-file-drop/**/.ts" ]

BTW, I prefer:

"include": [ "**/*.ts", "../node_modules/ng-autosize/index.ts", "../node_modules/tslerp/index.ts", "../node_modules/ng2-file-drop/index.ts" ]

The generates this error:

Both allow it to build, but it fails at runtime with this error:

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/ng2-file-drop/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

I removed the node_modules directory completely. I don't think it should be in the package. Then I get this error:

Uncaught Error: Unexpected module 'FileDropModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

Angular CLI: 1.6.4 Node: 6.10.3 OS: win32 x64 Angular: 5.2.1 ... common, compiler, compiler-cli, core, forms, http ... language-service, platform-browser, platform-browser-dynamic ... router

@angular/animations: 5.2.7 @angular/cdk: 5.2.3 @angular/cli: 1.6.4 @angular/material: 5.2.3 @angular-devkit/build-optimizer: 0.0.38 @angular-devkit/core: 0.0.25 @angular-devkit/schematics: 0.0.48 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.4 @schematics/angular: 0.1.13 @schematics/schematics: 0.0.13 typescript: 2.5.3 webpack: 3.10.0