I am trying to reproduce dimo-labling git repo for Web-based UI of 6D pose annotation tool.
I get the following error:
(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng serve
Workspace extension with invalid name (defaultProject) found.
Option "browserTarget" is deprecated: Use 'buildTarget' instead.
⠋ Generating browser application bundles (phase: setup)... TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.
Initial chunk files | Names | Raw size
vendor.js | vendor | 6.66 MB |
styles.css, styles.js | styles | 399.99 kB |
polyfills.js | polyfills | 336.44 kB |
main.js | main | 153.51 kB |
scripts.js | scripts | 32.99 kB |
runtime.js | runtime | 6.51 kB |
| Initial total | 7.57 MB
Build at: 2024-03-25T19:10:13.161Z - Hash: 5cadd8a72f282b85 - Time: 4654ms
Warning: /home/mona/dimo-labeling/frontend/src/app/image-render-overlay/image-render-overlay.component.ts depends on 'panzoom'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Error: src/app/app.component.html:24:76 - error TS2551: Property 'option' does not exist on type 'MatSelectionListChange'. Did you mean 'options'?
24 (selectionChange)="selectPositionedPart($event.option.value)">
~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
I have:
(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng version
Workspace extension with invalid name (defaultProject) found.
_ _ ____ _ ___
/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ | '_ / _` | | | | |/ _` | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
Angular CLI: 17.3.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64
Angular: 17.3.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.2
@angular-devkit/build-angular 17.3.2
@angular-devkit/core 17.3.2
@angular-devkit/schematics 17.3.2
@angular/cli 17.3.2
@schematics/angular 17.3.2
rxjs 7.8.1
typescript 5.4.3
zone.js 0.14.4
and
(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ cat package.json
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~17.3.1",
"@angular/cdk": "^17.3.1",
"@angular/common": "~17.3.1",
"@angular/compiler": "~17.3.1",
"@angular/core": "~17.3.1",
"@angular/forms": "~17.3.1",
"@angular/material": "^17.3.1",
"@angular/platform-browser": "~17.3.1",
"@angular/platform-browser-dynamic": "~17.3.1",
"@angular/router": "~17.3.1",
"@types/three": "^0.162.0",
"panzoom": "^9.4.3",
"rxjs": "~7.8.1",
"three": "^0.162.0",
"tslib": "^2.6.2",
"zone.js": "~0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~17.3.2",
"@angular/cli": "^17.3.2",
"@angular/compiler-cli": "~17.3.1",
"@types/jasmine": "~5.1.4",
"@types/node": "^20.11.30",
"jasmine-core": "~5.1.2",
"karma": "~6.4.3",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"model": "^0.0.6",
"typescript": "~5.4.3"
}
}
If I change
(selectionChange)="selectPositionedPart($event.option.value)">
to
`(selectionChange)="selectPositionedPart($event.options[0].value)">`
the UI works but doesn’t load Scenes or Images, as shown below,
(dimo-labeling) mona@ada:~/dimo-labeling/frontend$ ng serve
Workspace extension with invalid name (defaultProject) found.
Option "browserTarget" is deprecated: Use 'buildTarget' instead.
⠋ Generating browser application bundles (phase: setup)... TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.
Initial chunk files | Names | Raw size
vendor.js | vendor | 6.66 MB |
styles.css, styles.js | styles | 399.99 kB |
polyfills.js | polyfills | 336.44 kB |
main.js | main | 153.52 kB |
scripts.js | scripts | 32.99 kB |
runtime.js | runtime | 6.51 kB |
| Initial total | 7.57 MB
Build at: 2024-03-25T19:13:06.165Z - Hash: c1ff3d16f683b71f - Time: 4131ms
Warning: /home/mona/dimo-labeling/frontend/src/app/image-render-overlay/image-render-overlay.component.ts depends on 'panzoom'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
I have:
In this UI, clicking on Scenes or Images is not responsive but I am able to click on Part and select 1.
More details https://github.com/pderoovere/dimo-labeling/issues/5