Angular example is broken

Murderlon commented 1 year ago

Initial checklist

[X] I understand this is a bug report and questions should be posted in the Community Forum
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

Setup the Uppy repository

yarn workspace @uppy-example/angular start

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: not set
Local setting: disabled
Effective status: disabled
⠙ Generating browser application bundles (phase: setup)...DeprecationWarning: 'getMutableClone' has been deprecated since v4.0.0. Use an appropriate `factory.update...` method instead, use `setCommentRange` or `setSourceMapRange`, and avoid setting `parent`.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.22 MB |
polyfills.js          | polyfills     | 320.10 kB |
styles.css, styles.js | styles        | 295.57 kB |
main.js               | main          |  11.47 kB |
runtime.js            | runtime       |   6.53 kB |

                      | Initial Total |   2.84 MB

Build at: 2022-11-25T14:20:27.430Z - Hash: cf3f635ce578a284 - Time: 4364ms

Warning: /Users/merlijn/code/uppy/node_modules/@uppy/core/lib/Uppy.js depends on 'lodash.throttle'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/merlijn/code/uppy/node_modules/@uppy/core/lib/Uppy.js depends on 'namespace-emitter'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/merlijn/code/uppy/node_modules/@uppy/provider-views/lib/Browser.js depends on 'classnames'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/merlijn/code/uppy/node_modules/@uppy/webcam/lib/Webcam.js depends on 'is-mobile'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/merlijn/code/uppy/node_modules/tus-js-client/lib.esm/upload.js depends on 'url-parse'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

./src/app/app.module.ts:4:0-177 - Error: Module not found: Error: Can't resolve '@uppy/angular' in '/Users/merlijn/code/uppy/examples/angular-example/src/app'

Error: src/app/app.component.ts:25:5 - error NG8001: 'uppy-dashboard-modal' is not a known element:
1. If 'uppy-dashboard-modal' is an Angular component, then verify that it is part of this module.
4. If 'uppy-dashboard-modal' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

25     <uppy-dashboard-modal [uppy]='uppy' [open]='showModal' [props]='dashboardModalProps'></uppy-dashboard-modal>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:25:27 - error NG8002: Can't bind to 'uppy' since it isn't a known property of 'uppy-dashboard-modal'.
1. If 'uppy-dashboard-modal' is an Angular component and it has 'uppy' input, then verify that it is part of this module.
2. If 'uppy-dashboard-modal' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
5. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

25     <uppy-dashboard-modal [uppy]='uppy' [open]='showModal' [props]='dashboardModalProps'></uppy-dashboard-modal>
                             ~~~~~~~~~~~~~

Error: src/app/app.component.ts:25:41 - error NG8002: Can't bind to 'open' since it isn't a known property of 'uppy-dashboard-modal'.
1. If 'uppy-dashboard-modal' is an Angular component and it has 'open' input, then verify that it is part of this module.
2. If 'uppy-dashboard-modal' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
4. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

25     <uppy-dashboard-modal [uppy]='uppy' [open]='showModal' [props]='dashboardModalProps'></uppy-dashboard-modal>
                                           ~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:25:60 - error NG8002: Can't bind to 'props' since it isn't a known property of 'uppy-dashboard-modal'.
1. If 'uppy-dashboard-modal' is an Angular component and it has 'props' input, then verify that it is part of this module.
2. If 'uppy-dashboard-modal' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

25     <uppy-dashboard-modal [uppy]='uppy' [open]='showModal' [props]='dashboardModalProps'></uppy-dashboard-modal>
                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:34:3 - error NG8001: 'uppy-drag-drop' is not a known element:
1. If 'uppy-drag-drop' is an Angular component, then verify that it is part of this module.
2. If 'uppy-drag-drop' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

34   <uppy-drag-drop [uppy]='uppy' [props]='{}'></uppy-drag-drop>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:34:19 - error NG8002: Can't bind to 'uppy' since it isn't a known property of 'uppy-drag-drop'.
1. If 'uppy-drag-drop' is an Angular component and it has 'uppy' input, then verify that it is part of this module.
2. If 'uppy-drag-drop' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

34   <uppy-drag-drop [uppy]='uppy' [props]='{}'></uppy-drag-drop>
                     ~~~~~~~~~~~~~

Error: src/app/app.component.ts:34:33 - error NG8002: Can't bind to 'props' since it isn't a known property of 'uppy-drag-drop'.
1. If 'uppy-drag-drop' is an Angular component and it has 'props' input, then verify that it is part of this module.
2. If 'uppy-drag-drop' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

34   <uppy-drag-drop [uppy]='uppy' [props]='{}'></uppy-drag-drop>
                                   ~~~~~~~~~~~~

Error: src/app/app.component.ts:37:3 - error NG8001: 'uppy-progress-bar' is not a known element:
1. If 'uppy-progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'uppy-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

37   <uppy-progress-bar [uppy]='uppy' [props]='{ hideAfterFinish: false }'></uppy-progress-bar>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:37:22 - error NG8002: Can't bind to 'uppy' since it isn't a known property of 'uppy-progress-bar'.
1. If 'uppy-progress-bar' is an Angular component and it has 'uppy' input, then verify that it is part of this module.
2. If 'uppy-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

37   <uppy-progress-bar [uppy]='uppy' [props]='{ hideAfterFinish: false }'></uppy-progress-bar>
                        ~~~~~~~~~~~~~

Error: src/app/app.component.ts:37:36 - error NG8002: Can't bind to 'props' since it isn't a known property of 'uppy-progress-bar'.
1. If 'uppy-progress-bar' is an Angular component and it has 'props' input, then verify that it is part of this module.
2. If 'uppy-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

37   <uppy-progress-bar [uppy]='uppy' [props]='{ hideAfterFinish: false }'></uppy-progress-bar>
                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:10:8 - error TS2307: Cannot find module '@uppy/angular' or its corresponding type declarations.

10 } from '@uppy/angular'
          ~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:15:12 - error NG1010: Value

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✖ Failed to compile.

Expected behavior

Starts example successfully

Actual behavior

Failed with errors

Murderlon commented 1 year ago

Note that there is also a massive polyfill bundle:

polyfills.js          | polyfills     | 320.10 kB |

Is that really necessary?

charlesritchea commented 9 months ago

This is breaking AOT, @Murderlon did you find a workaround? UPDATE: We were using 0.6.x which peerDeps angular 16, but with angular 15. After downgrading to 0.5.x I no longer get this error during AOT

Murderlon commented 9 months ago

We currently lack Angular experience on the maintainer side so if you would be willing to make a PR that would be very appreciated.

charlesritchea commented 8 months ago

From my perspective there is no bug as I was using an unsupported version. Angular 15- requires zone.js polyfill, so that is probably why it's that size, just a guess

lakesare commented 1 month ago

Angular example works fine for me when I set it up with these instructions, I think we can close this issue @Murderlon?

transloadit / uppy