aot build error with angular 5.1.2, ngx-clipboard: 9.0.0 #100

vincent-cm · 2017-12-21T11:41:02Z

client:157 ./node_modules/ngx-clipboard/src/clipboard.directive.ts
Module build failed: Error: .../node_modules/ngx-clipboard/src/clipboard.directive.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (.../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:649:23)
at plugin.done.then (.../node_modules/@ngtools/webpack/src/loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
@ ./src/app/modules/other/reset-password/reset-password.ngfactory.js 18:9-57
@ ./src/app/app.module.ngfactory.js
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/main.browser.ts
msgErrors @ client:157
onmessage @ socket.js:38
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:425
Zone.runTask @ zone.js:192
ZoneTask.invokeTask @ zone.js:499
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client:157 ./node_modules/ngx-clipboard/src/clipboard.service.ts
Module build failed: Error: .../node_modules/ngx-clipboard/src/clipboard.service.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (.../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:649:23)
at plugin.done.then (.../node_modules/@ngtools/webpack/src/loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
@ ./src/app/app.module.ngfactory.js 53:10-56
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/main.browser.ts
msgErrors @ client:157
onmessage @ socket.js:38
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:425
Zone.runTask @ zone.js:192
ZoneTask.invokeTask @ zone.js:499
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client:157 ./node_modules/ngx-clipboard/src/index.ts
Module build failed: Error: .../node_modules/ngx-clipboard/src/index.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (.../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:649:23)
at plugin.done.then (.../node_modules/@ngtools/webpack/src/loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
@ ./src/app/app.module.ngfactory.js 129:11-45
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/main.browser.ts

MitkoTschimev · 2017-12-24T11:09:47Z

A lot of libraries have the same issue since this upgrade.
angular/angular#20091

MitkoTschimev · 2017-12-25T08:53:00Z

in the dist/src/clipboard.service.spec.metadata.json file the content is:

[null]

this brings up the problem that i can't use the common fix for the problem to include the lib in the tsconfig because of this error

webpack: Failed to compile.
Failed to read JSON file /Users/mtschimev/ownCloud/private_workspace/visual-testing-manager/node_modules/ngx-clipboard/dist/src/clipboard.service.spec.metadata.json
/Users/mtschimev/ownCloud/private_workspace/visual-testing-manager/node_modules/@angular/compiler-cli/src/transformers/program.js:478
        throw e;
        ^

TypeError: Cannot read property 'version' of null
    at readMetadataFile (/Users/mtschimev/ownCloud/private_workspace/visual-testing-manager/node_modules/@angular/compiler-cli/src/transformers/metadata_reader.js:66:29)
    at Object.readMetadata (/Users/mtschimev/ownCloud/private_workspace/visual-testing-manager/node_modules/@angular/compiler-cli/src/transformers/metadata_reader.js:35:25)
    at TsCompilerAotCompilerTypeCheckHostAdapter.getMetadataFor (/Users/mtschimev/ownCloud/private_workspace/visual-testing-manager/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:425:34)

MitkoTschimev · 2017-12-25T15:23:36Z

just build it again and the content was not anymore null
So a new patch release with a fixed meta file should fix the lib but you still need to add the lib to the include list:

tsconfig.app.ts

...
"exclude": ["test.ts", "**/*.spec.ts", "../node_modules/ngx-clipboard/**/*.spec.ts"],
"include": ["**/*.ts", "../node_modules/ngx-clipboard/*/**.ts"]

Use 8.1.4 till 9 is getting fixed !

TRAHOMOTO · 2017-12-26T13:29:02Z

Thank You! It works

achimha · 2017-12-28T06:58:44Z

With angular-cli 1.6.2, the error message is more specific:

Hash: ERROR in ./node_modules/ngx-clipboard/src/clipboard.directive.ts9562ad204adf39670cbb
Time: 786333ms
chunk {admin.module} 
admin.module.120c6ba7f9ae1a6ea06f.chunk.js, admin.module.120c6ba7f9ae1a6ea06f.chunk.js.map () 417 kB  [rendered]
chunk {aircraft.module} Module build failed: Error: /frontend/node_modules/ngx-clipboard/src/clipboard.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
aircraft.module.5f23ce5f92ae96bc5b28.chunk.js, aircraft.module.5f23ce5f92ae96bc5b28.chunk.js.map () 878 kB  [rendered]
chunk {common} common.d797626a7c0a5e1879af.chunk.js, common.d797626a7c0a5e1879af.chunk.js.map (common) 964 kB 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). [rendered]

achimha · 2018-01-06T09:18:06Z

Any chance of this getting fixed? I don't think there is a suitable workaround at this time.

MitkoTschimev · 2018-01-06T12:36:37Z

@achimha take a look at my fix. it is working for the moment

achimha · 2018-01-06T14:58:42Z

What exactly is your fix? Use 8.1.4 and modify tsconfig.app.ts?

TRAHOMOTO · 2018-01-06T15:28:38Z

On my project last version + tsconfig.app.ts works perfectly

maxisam · 2018-01-07T09:12:54Z

I have updated cli demo with latest cli and angular. It seems working without any issue. Can anyone confirm this?

bjornharvold · 2018-01-08T07:28:14Z

Confirmed. Upgrading to v9.0.1 removes the need to manually include ngx-clipboard dependency in tsconfig.app.ts. This ticket can be closed. Thank you for a great plugin @maxisam

achimha · 2018-01-08T08:32:22Z

I don't see how the change in 9.0.1 would address the issue. The change is in the demo app. I still get the same error using 9.0.1.

ERROR in ./node_modules/ngx-clipboard/src/clipboard.directive.ts Module build failed: Error: /frontend/node_modules/ngx-clipboard/src/clipboard.directive.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).

achimha · 2018-01-08T09:07:23Z

With the exclusion in tsconfig as a workaround, 9.0.1 works for me.

The ticket should be reopened.

maxisam · 2018-01-08T15:53:01Z

@achimha did you try demo code? Have you upgraded your package (Cli/Angular) to the latest version?

achimha · 2018-01-08T18:49:24Z

My package uses Angular 5.1.3 and CLI 1.6.3. I don't see how a change to your demo app would fix this problem?

maxisam · 2018-01-08T19:33:12Z

@achimha You misunderstood what I meant. I mean it works in demo. I don't know why yours doesn't work. You might find a clue in demo to fix yours.

MitkoTschimev · 2018-01-08T22:00:01Z

Ok so i upgraded to 5.1.3 & 1.6.3 too but still have to keep the workaround in the tsconfig.app.ts

maxisam · 2018-01-08T22:17:19Z

@tfiwm Can you try cli demo code?

atmman9001 · 2018-01-09T08:43:29Z

@maxisam @achimha @tfiwm Hi all. I had the same issue with angular 5.1.3 and ngx-clipboard 9.0.1. I used typesctipt@2.6.2 and I noticed angular/cli warning about its version. It should be >= 2.4.2 and < 2.6.0. I set it as "~2.5.2" into my package.json then I updated dependencies. After that I've built the app with AoT successfully. Just check your typescript version. I hope it'll useful for you guys @achimha @tfiwm

TRAHOMOTO · 2018-01-09T09:25:42Z

Hey folks! Just updated to 9.0.1 and prod build works like a charm 👍

$ ng -v

Angular CLI: 1.6.3
Node: 8.9.0
OS: win32 x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.5.2
webpack-sources: 1.1.0
webpack: 3.10.0

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../node_modules/base64url/**/*.d.ts"
  ],
  "include": [
    "**/*.ts"
  ]
}

achimha · 2018-01-11T18:48:21Z

I'm on TypeScript 2.6.2 which is newer than the supported 2.5.x so this might be the reason. I had to go to it due to a bug that was addressed in 2.6.

Still it's curious this this package is the only one of several dozens that causes the problem.

maxisam · 2018-01-11T22:47:03Z

@achimha There is an easy way to find out. Try Demo and update the typescript to 2.6 and see if it still works.

FrancescoBorzi · 2018-01-15T12:45:51Z

I'm also experiencing this issue, but using version 9.1.1.

ERROR in ./node_modules/ngx-clipboard/src/clipboard.directive.ts
Module build failed: Error: /home/francesco/sources/IMS-frontend-rewrite/node_modules/ngx-clipboard/src/clipboard.directive.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).

my environment:

Angular CLI: 1.6.4
Node: 8.9.1
OS: linux x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.37
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.45
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.12
typescript: 2.6.2
webpack: 3.10.0

FrancescoBorzi · 2018-01-15T12:51:45Z

PS: comment #100 (comment) solves the issue, whoever this is a workaround and I guess the issue should be properly fixed @maxisam

maxisam · 2018-01-15T18:27:45Z

@ShinDarth could you try typescript 2.5? 2.6.2 is not official supported by Angular yet

FrancescoBorzi · 2018-01-15T21:12:56Z

@maxisam it is supported: https://blog.angular.io/angular-5-2-now-available-312d1099bd81

maxisam · 2018-01-16T04:06:38Z

How about CLI?

…

On Jan 15, 2018 3:12 PM, "Francesco Borzì" ***@***.***> wrote: @maxisam <https://github.com/maxisam> it is supported: https://blog.angular.io/angular-5-2-now-available-312d1099bd81 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#100 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAb4ZypxPwP1nUuBHlEzXEqtKvj6n7igks5tK79YgaJpZM4RJtcR> .

topce · 2018-01-17T17:03:28Z

Hi @maxisam
I think it is problem how library is packaged and publish.
Normally typescript code should not be publish, just javascript
for more details please check this
comment
There is also Angular Package Format APF
They mentioned https://github.com/dherges/ng-packagr
and https://github.com/jvandemo/generator-angular2-library
Maybe to try some of those tool to generate proper Angular Package Format

topce · 2018-01-17T17:22:00Z

With typescript 2.5.3 it works
and with typescript 2.6.2 it does not
angular/cli: 1.6.4
Angular: 5.2.0

brannon-darby · 2018-01-18T18:49:39Z

this works for me as a temp solution in an nx-workspace with latest deps:

(tsconfig.json)

{
...
  "compilerOptions": {
    "paths": {
      "ngx-clipboard": ["node_modules/ngx-clipboard/dist"]
    }
  },
...
}

highly recommend https://github.com/dherges/ng-packagr

a decent setup if you're interested (trace scripts in package.json):

https://github.com/ngx-plus/ngx-forms/blob/master/package.json#L48-L54

SafeEval · 2018-01-19T00:57:16Z

Using the most recent Angular, CLI, and ngx-clipboard packages, the highest version of TypeScript that worked for me with --aot was 2.6.0-rc.

Any higher breaks the build with the "missing from the TypeScript compilation" error.

I didn't need to modify any other config files, include tsconfig.json.

package.json:

...
    "@angular/core": "^5.2.1",
    "@angular/material": "^5.1.0",
    "@angular/cli": "^1.6.4",
    "ngx-clipboard": "^9.1.2",
    "typescript": "^2.6.0-rc",
...

$ npm view typescript versions | grep -ve "dev\|insider"
...
  '2.5.2',
  '2.5.3',
  '2.6.0-rc',
  '2.6.1',
  '2.6.2',
  '2.7.0-rc'

achimha · 2018-01-19T09:09:45Z

angular-cli 1.6.5 supports TypeScript 2.6.2 so this non working config is now the default config for current Angular projects.

maxisam · 2018-01-19T15:20:29Z

Cool, I will try to fix it this weekend.

…

On Fri, Jan 19, 2018 at 3:09 AM, Achim Hasenmueller < ***@***.***> wrote: angular-cli 1.6.5 supports TypeScript 2.6.2 so this non working config is now the default config for current Angular projects. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#100 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAb4Z15x3OevveiVeCAIg-mwiQH1cWJnks5tMFvZgaJpZM4RJtcR> .

maxisam · 2018-01-21T00:04:20Z

Can anyone test 9.1.3? It works on my end.

fix: #100 packaging issue

bjornharvold · 2018-01-21T04:39:36Z

Works great! 👍

FrancescoBorzi · 2018-01-22T09:18:18Z

the fix works, thanks a lot @maxisam

ceaguilera · 2018-02-28T20:22:35Z

Helme!!
"ngx-clipboard": "^10.0.0"

tsconfig.server.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "commonjs",
"types": ["node"],
"experimentalDecorators": true,
"target": "es5",
"lib": ["es6", "dom"]
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"server.ts"
],
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}

Webpack.config.js

const path = require('path');
var nodeExternals = require('webpack-node-externals');

module.exports = {
entry: {
server: './src/server.ts'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {
'main.server': path.join(__dirname, 'dist', 'server', 'main.bundle.js')
}
},
target: 'node',
externals: [nodeExternals()],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /.ts$/, loader: 'ts-loader' }
]
}
}

comand:

carlos@carlos-linux:~/Proyectos/website$ node dist/server.js
/home/carlos/Proyectos/website/node_modules/ngx-clipboard/dist/src/clipboard.directive.js:5
import { Directive, EventEmitter, HostListener, Input, Output } from "@angular/core";
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:588:28)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object. (/home/carlos/Proyectos/website/dist/server.js:1:1351477)

Axure · 2018-04-25T10:28:41Z

@maxisam 9.1.3 is not working with TypeScript 2.6.2

None of the fixes work for me.

8tomo8 · 2018-05-18T22:36:50Z

Just sharing what worked for me with angular 5.2

Install this version
npm install ngx-clipboard@8.1.1 --save

tsconfig.app.json should look like this
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"/*.spec.ts",
"../node_modules/base64url//.d.ts"
],
"include": [
"**/.ts"
]
}

vincent-cm changed the title ~~error during build aot in angular 5.1.2~~ aot build error with angular 5.1.2, ngx-clipboard: 9.0.0 Dec 21, 2017

tamasfoldi mentioned this issue Dec 24, 2017

Complie error with Angular 5.1 prod build #99

Closed

maxisam closed this as completed Jan 8, 2018

vincent-cm mentioned this issue Jan 16, 2018

Aot build error still exists in angular 5.2.0 and ngx-clipboard 9.1.2 #110

Closed

maxisam reopened this Jan 16, 2018

maxisam closed this as completed in e6c5fbd Jan 21, 2018

maxisam added a commit that referenced this issue Jan 21, 2018

Merge pull request #111 from maxisam/fix/new-packaging2

6a73bf3

fix: #100 packaging issue

maxisam mentioned this issue Jan 21, 2018

clipboard.service.ts is missing from the TypeScript compilation. #105

Closed

aot build error with angular 5.1.2, ngx-clipboard: 9.0.0 #100

aot build error with angular 5.1.2, ngx-clipboard: 9.0.0 #100

Comments

vincent-cm commented Dec 21, 2017 • edited Loading

MitkoTschimev commented Dec 24, 2017

MitkoTschimev commented Dec 25, 2017

MitkoTschimev commented Dec 25, 2017 • edited Loading

TRAHOMOTO commented Dec 26, 2017

achimha commented Dec 28, 2017

achimha commented Jan 6, 2018

MitkoTschimev commented Jan 6, 2018

achimha commented Jan 6, 2018

TRAHOMOTO commented Jan 6, 2018

maxisam commented Jan 7, 2018 • edited Loading

bjornharvold commented Jan 8, 2018

achimha commented Jan 8, 2018

achimha commented Jan 8, 2018

maxisam commented Jan 8, 2018

achimha commented Jan 8, 2018

maxisam commented Jan 8, 2018

MitkoTschimev commented Jan 8, 2018

maxisam commented Jan 8, 2018

atmman9001 commented Jan 9, 2018

TRAHOMOTO commented Jan 9, 2018 • edited Loading

achimha commented Jan 11, 2018

maxisam commented Jan 11, 2018

FrancescoBorzi commented Jan 15, 2018

FrancescoBorzi commented Jan 15, 2018

maxisam commented Jan 15, 2018

FrancescoBorzi commented Jan 15, 2018

maxisam commented Jan 16, 2018 via email

topce commented Jan 17, 2018

topce commented Jan 17, 2018 • edited Loading

brannon-darby commented Jan 18, 2018

SafeEval commented Jan 19, 2018

achimha commented Jan 19, 2018

maxisam commented Jan 19, 2018 via email

maxisam commented Jan 21, 2018 • edited Loading

bjornharvold commented Jan 21, 2018

FrancescoBorzi commented Jan 22, 2018

ceaguilera commented Feb 28, 2018

Axure commented Apr 25, 2018 • edited Loading

8tomo8 commented May 18, 2018 • edited Loading

vincent-cm commented Dec 21, 2017 •

edited

Loading

MitkoTschimev commented Dec 25, 2017 •

edited

Loading

maxisam commented Jan 7, 2018 •

edited

Loading

TRAHOMOTO commented Jan 9, 2018 •

edited

Loading

topce commented Jan 17, 2018 •

edited

Loading

maxisam commented Jan 21, 2018 •

edited

Loading

Axure commented Apr 25, 2018 •

edited

Loading

8tomo8 commented May 18, 2018 •

edited

Loading