input-mask.module.ts is not part of the compilation output

[domzinhuu]

@angular/common = ^5.0.0
@angular/cli = "1.6.0

When i run "ng serve" this error appears

Module build failed: Error: /home/maique/projetos/centroDiagnostico/node_modules/ng2-inputmask/src/input-mask.module.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (/home/maique/projetos/centroDiagnostico/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:648:23)
    at plugin.done.then (/home/maique/projetos/centroDiagnostico/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 15:0-48
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

i search for the solution and found this post: https://github.com/angular/angular-cli/issues/8284

Hey all, this is a side effect of the stricter tsconfig as described in https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced#148d.

The tsconfig file is what determines what TS files are compiled. The error you are getting means that the files mentioned are NOT being compiled.

Before we used to compile all files, essentially ignoring what tsconfig listed. This was a bug, because if you don't include a file in the compilation then it should not be compiled.

By default ./src/tsconfig.app.json will only pick up files inside src/. If you have a file outside source, it won't be picked up. But you can add more files to the tsconfig via either files or include.

So for @thaoula's case, you probably want to add this the files in ../models to your tsconfig.app.json and also to your tsconfig.spec.json:

{ "extends": "../tsconfig.json", "compilerOptions": { // ... }, "include": [ "../models/**/*.ts" ], "exclude": [ // ... ], } You can read more about tsconfig files in https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tsconfig.json.md.

@rolaveric's case is slightly different. You have TS files in your node_modules. This really goes against how libraries should be packaged: libraries should never ship their source .ts files.

The reason for this rule is that the TypeScript version your app isn't necessarily the same as the TS version your library uses. Different versions of TS can produce different output, and give different errors for the same input. They don't even support the same language features. So packaging libraries with TS sources will always break someone's project.

So we don't really support using incorrectly packaged libraries with TS sources. It's something you do at your risk.

That being said, maybe you can try adding it to the include array. But I can't guarantee that will work in the future because it's still an incorrectly packaged library.

Regarding AOT: as far as I can tell, AOT is still incorrectly compiling TS that is not included in the tsconfig. I'll bring this up with the compiler team.

[BlackyWolf]

I'm having pretty much the same issue:

"angular/cli": "~1.7.1" "angular/common": "^5.2.0"

With this error:

ERROR in ./node_modules/ng2-inputmask/src/input-mask.module.ts Module build failed: Error: C:\myapp\node_modules\ng2-inputmask\src\input-mask.module.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 (C:\myapp\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:674:23) at plugin.done.then (C:\myapp\node_modules@ngtools\webpack\src\loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:188:7)

Adding this .ts file to the include array in tsconfig.json works, but for whatever reason it forces me to also include my main.ts and polyfills.ts files in the include array also.

@M-Ulyanov Would it be possible to package this library according to this format? https://goo.gl/jB3GVv

[meyer20]

I think that i have the same problem

@angular/common": "~5.2.1; @angular/cli": "^1.6.4

Error: ERROR in ./node_modules/ng2-inputmask/src/input-mask.module.ts Module build failed: Error: D:\fluig\frontend\forms_app\src\main\angular\node_modules\ng2-inputmask\src\input-mask.module.ts is missing from the TypeScript compilation. Please make sure it is in y our 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 it s author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (D:\fluig\frontend\forms_app\src\main\angular\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:674:23) at plugin.done.then (D:\fluig\frontend\forms_app\src\main\angular\node_modules\@ngtools\webpack\src\loader.js:467:39) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)

[meyer20]

Again... @M-Ulyanov Would it be possible to package this library according to this format? https://goo.gl/jB3GVv

[BlackyWolf]

@meyer20 In case you need it, what I've done for now is used the Inputmask library by Robin Herbots and stuck it in a directive. It's very simple but this did most of what I wanted:

package.json

{
    "dependencies": {
        "inputmask": "^4.0.0"
    }
}

Directive

import { Directive, ElementRef } from '@angular/core';
import Inputmask from "inputmask";

@Directive({
    selector: '[mask]'
})
export class InputMaskDirective {
    constructor(private element: ElementRef) {
        this.setInputMask(element);
    }

    private setInputMask(element: ElementRef) {
        // Get the value of the mask attribute
        const mask = element.nativeElement.getAttribute('mask');

        if (mask) {
            // Set the input mask and then mask the element the directive was used on
            Inputmask({ 'mask': mask }).mask(element);
        }
    }
}

Use case on phone number field

<input type="text" id="phone" [(ngModel)]="model.phone" name="phone" mask="(999) 999-9999" placeholder="(555) 555-5555" />

[meyer20]

@BlackyWolf It worked, thank you!

Saved my day, thx!

[edoardoo]

Same here:

ERROR in ./node_modules/ng2-inputmask/src/input-mask.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /Users/edo/Gits/italfabrics-controllo-colore/node_modules/ng2-inputmask/src/input-mask.module.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 (/Users/edo/Gits/italfabrics-controllo-colore/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:719:23)
   at plugin.done.then (/Users/edo/Gits/italfabrics-controllo-colore/node_modules/@ngtools/webpack/src/loader.js:41:31)
   at process._tickCallback (internal/process/next_tick.js:68:7)