Angular-cli: ng generate web-worker breaks tsconfig.app.json

Created on 14 Jun 2019  Β·  13Comments  Β·  Source: angular/angular-cli

🐞 Bug report

Command (mark with an x)


- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?


Yes, the previous version in which this bug was not present was: ....
Haven't tried web workers before so I do not known

Description

A clear and concise description of the problem...
When I generate a web worker the file tsconfig.app.json is broken
Here is the file generated

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": ["test.ts", "**/*.spec.ts",]    "src/**/*.worker.ts"

}

πŸ”¬ Minimal Reproduction

ng generate web-worker save/stat-period/stat-period
CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/save/stat-period/stat-period.worker.ts (157 bytes)
UPDATE src/tsconfig.app.json (180 bytes)
UPDATE angular.json (4228 bytes)
UPDATE src/app/save/stat-period/stat-period.component.ts (11072 bytes)

πŸ”₯ Exception or Error




ng serve --proxy-config proxy.conf.json 
src/tsconfig.app.json(7,46): error TS1005: ',' expected.

Error: src/tsconfig.app.json(7,46): error TS1005: ',' expected.

    at AngularCompilerPlugin._setupOptions (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:95:19)
    at new AngularCompilerPlugin (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:54:14)
    at _createAotPlugin (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:72:12)
    at Object.getNonAotConfig (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:78:19)
    at getCompilerConfig (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/browser/index.js:77:95)
    at /home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/browser/index.js:53:9
    at /home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:56:26
    at Array.map ()
    at generateWebpackConfig (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:31:26)
    at async Object.generateBrowserWebpackConfigFromContext (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:98:20)
    at async setup (/home/erwan/Projets/SaveTrack/st-angular/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:70:37)

🌍 Your Environment





     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / β–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.1
Node: 12.3.1
OS: linux x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@angular/pwa                      0.12.4
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

schematicangular low broken bufix
Source
picture ErwSim
👍3

All 13 comments

Hi, I am unable to replicate this issue, can you please share your tsconfig.app.json before the update?

Thanks.

alan-agius4 picture alan-agius4 on 14 Jun 2019

Sure, here it is

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
ErwSim picture ErwSim on 14 Jun 2019
👍1

(I updated it for the format it really had)

ErwSim picture ErwSim on 14 Jun 2019

Managed to replicate this if the exclude is in a single line ie:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}
alan-agius4 picture alan-agius4 on 14 Jun 2019
👍1

I just tried to add "src/*/.worker.ts" in the exclude and if I run ng serve I have

ng serve --proxy-config proxy.conf.json 

Date: 2019-06-14T09:35:37.040Z
Hash: e638712da3e53497111b
Time: 11287ms
chunk {main} main.js, main.js.map (main) 1.91 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 145 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 462 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 407 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.36 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]

ERROR in node_modules/typescript/lib/lib.dom.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.dom.d.ts(3473,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(3474,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.webworker.d.ts(85,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(86,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(1074,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1360,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1434,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'FormData' must be of type '{ new (form?: HTMLFormElement): FormData; prototype: FormData; }', but here has type '{ new (): FormData; prototype: FormData; }'.
node_modules/typescript/lib/lib.webworker.d.ts(2170,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Notification' must be of type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; requestPermission(deprecatedCallback?: NotificationPermissionCallback): Promise<...>; }', but here has type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; }'.
node_modules/typescript/lib/lib.webworker.d.ts(4322,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onmessage' must be of type '(this: Window, ev: MessageEvent) => any', but here has type '(this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(4332,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'location' must be of type 'Location', but here has type 'WorkerLocation'.
node_modules/typescript/lib/lib.webworker.d.ts(4333,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onerror' must be of type 'OnErrorEventHandlerNonNull', but here has type '(this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(4335,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'self' must be of type 'Window', but here has type 'WorkerGlobalScope'.
node_modules/typescript/lib/lib.webworker.d.ts(4344,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
β„Ή ο½’wdmο½£: Failed to compile.

Should I open a new issue ?

ErwSim picture ErwSim on 14 Jun 2019

@ErwSim, yes please and kindly share a minimal repo.
Thanks

alan-agius4 picture alan-agius4 on 14 Jun 2019

Also when I generated web worker I see
WARNING in new Worker() will only be bundled if passed a String

splincode picture splincode on 25 Jun 2019
👍1

I managed to fix it by correcting the "exclude" array, but then I immediately started seeing the same warning as @splincode

christianlundberg picture christianlundberg on 11 Jul 2019

Anybody working on this ticket? I've managed to reproduce the bug with the current version of https://github.com/stephanrauh/extended-pdf-viewer-showcase. Just clone it, run ng generate web-worker save/stat-period/stat-period, and have a look at the tsconfig.app.json.

stephanrauh picture stephanrauh on 11 Jul 2019

This doesn't cause the WARNING in new Worker() will only be bundled if passed a String warning:
const myWorker = new Worker('my-worker.worker', {type: 'module'})
This does:
const workerName: string = 'my-worker.worker' const myWorker = new Worker(workerName', {type: 'module'})

jcjolley picture jcjolley on 31 Jul 2019

I'm seeing the same issue.

WARNING in new Worker() will only be bundled if passed a String.

`Angular CLI: 8.3.0
Node: 11.15.0
OS: darwin x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package Version

@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-ng-packagr 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.0.6
@angular-devkit/schematics 8.3.0
@angular/cdk 8.1.3
@angular/cli 8.3.0
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.1.3
@ngtools/webpack 8.0.6
@nguniversal/express-engine 8.1.1
@nguniversal/module-map-ngfactory-loader 8.1.1
@schematics/angular 8.3.0
@schematics/update 0.803.0
ng-packagr 5.5.0
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0`

playground picture playground on 17 Oct 2019

I think this is a problem with work-plugin though I'm not 100% sure if this is what cli uses internally but I have found that warning line their source code. Also they have an issue that has been going on for a year now. We should probably move the discussion over there.

akphi picture akphi on 25 Oct 2019

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

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hartjo picture hartjo  Β·  3Comments
ericel picture ericel  Β·  3Comments
delasteve picture delasteve  Β·  3Comments
5amfung picture 5amfung  Β·  3Comments
hareeshav picture hareeshav  Β·  3Comments