angular drag and drop

Around 2024 we switched from ng-drag-drop to material dnd.

The reason is mostly because of warnings in the js console and the fact that this wont be fixed since there has been no publish for 6 years : [https://www.npmjs.com/package/ng-drag-drop]

But along the way it seemed better to use standalone components and get rid of the app.module.ts.

standalone angular

troubleshooting

Such as " | keyvalue" and for async

<app-sidebar *ngIf="authService.user | async"></app-sidebar>

These are all present in commonmodule, in fact commonmodule is a good bet to include anyway, because directives like *ngfor are also in there. (see next problem)

When in doubt : add CommonModule !

import { CommonModule } from '@angular/common';
...
    imports: [ CommonModule, SidebarComponent ],
...

ngfor ngIf directives missing :

In the js console :

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'p' (used in the 'SidebarComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

It has the solution: add CommonModule (see previous problem

formGroup errors

Error: src/app/config-editor/config-editor.component.html:3:6 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'div'.

3 <div [formGroup]="configGroup"
       ~~~~~~~~~~~~~~~~~~~~~~~~~

The solution is adding ReactiveForms module. Also switch to standalone :

import { ReactiveFormsModule } from '@angular/forms';

...

@Component({
  standalone: true,
  selector: 'app-vehicle-editor',
  templateUrl: './vehicle-editor.component.html',
  styleUrls: ['./vehicle-editor.component.scss'],
  imports: [ ReactiveFormsModule ]
})

Explanation : https://www.telerik.com/blogs/fixing-cant-bind-to-formgroup-since-not-known-property-of-form-error-angular

Value is of type '[(not statically analyzable)]'.

Note that this error replaces the object in the code. So this error :

 Value is of type '[LayoutComponent, MatIconModule, (not statically analyzable), MatDividerModule]'.

Comes from this code :

 imports: [ LayoutComponent,
        MatIconModule,
        MaterialModule,
        MatDividerModule ],

So it is MaterialModule that causes the problem !!

Mostly this is because of a wrong import. For instance

import { LayoutComponent } from './layout/layout.component';
# intead of (correct)
import { LayoutComponent } from '../layout/layout.component';

...
  standalone: true,
  imports: [ LayoutComponent ],

mat-nav-list' is not a known element:

Always the same, you need to explicitly add the correct module to the imports of your component. Get the old app.module.ts file to more easily find it.

Or use this page : https://material.angular.io/components/sidenav/api look at the api tab for the import.

ERR_CONNECTION_REFUSED on the backend.

Mostly : restart apache ?

But why ?!?! Investigate (TODO)

ugly icons

In all iconbars.. They now look horrible, are we missing styles ?

Can't bind to 'dragData'

Can't bind to 'dragData' since it isn't a known property of 'div'. This is mainly because of the standalone change. First try to solv3e it with the drag-n-drop module.