ANovokmet / svelte-gantt

:calendar: Interactive JavaScript Gantt chart/resource booking component
https://anovokmet.github.io/svelte-gantt/
MIT License
516 stars 106 forks source link

svelte-gantt in angular 18 - No known conditions for "./svelte" #241

Open conlaoch1 opened 3 weeks ago

conlaoch1 commented 3 weeks ago
svelte-gantt version: 4.4.2
angular version: 18.2.2

Hi,

we are trying to implement svelte-gantt in our angular project and it has problems with the current version (4.4.2):

[error] Error: No known conditions for "./svelte" specifier in "svelte-gantt" package
    at e (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:45942:25)
    at n (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:45942:646)
    at o (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:45942:1297)
    at resolveExportsOrImports (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:46563:18)
    at resolveDeepImport (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:46586:25)
    at tryNodeResolve (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:46351:16)
    at ResolveIdContext.resolveId (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:46101:19)
    at PluginContainer.resolveId (file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:48893:17)
    at async file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:66140:15
    at async file:///C:/Users/43650/projects/project/project-client/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:49798:14

Here is the code:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {MatButton} from "@angular/material/button";
import {SvelteGantt, SvelteGanttComponent, SvelteGanttTable} from "svelte-gantt/svelte";
import moment from "moment";
import {RowModel} from "svelte-gantt/svelte/core/row";

@Component({
    selector: 'gantt',
    standalone: true,
    templateUrl: './gantt.component.html',
    imports: [
        MatButton
    ],
    styleUrl: './gantt.component.css'
})

export class GanttComponent implements AfterViewInit {
    gantt!: SvelteGanttComponent;
    @ViewChild('ganttElement', {static: false}) ganttElement!: ElementRef;

    ngAfterViewInit() {
        this.initializeGantt();
    }

    private initializeGantt() {
        this.gantt = new SvelteGantt({
            target: this.ganttElement.nativeElement,
            props: {
                tasks: [
                    {
                        id: 1,
                        resourceId: 1,
                        label: 'Homework',
                        classes: 'orange',
                        from: moment().startOf('day').set('hour', 10).valueOf(),
                        to: moment().startOf('day').set('hour', 14).valueOf()
                    },
                    {
                        id: 2,
                        resourceId: 2,
                        label: 'Clean dishes',
                        classes: 'green',
                        from: moment().startOf('day').valueOf(),
                        to: moment().startOf('day').valueOf()
                    }
                ],
                rows: [
                    {id: 1, label: 'Row #1', height: null} as RowModel,
                    {id: 2, label: 'Row #2', height: null} as RowModel,
                    {id: 3, label: 'Row #3', height: null} as RowModel
                ],
                from: moment().startOf('day').valueOf(),
                to: moment().endOf('day').valueOf(),
                fitWidth: true,
                ganttTableModules: [SvelteGanttTable]
            }
        });
    }
} 

HTML Template: <div #ganttElement></div>

Is there any way to fix this?

Thanks!

Coabec commented 1 week ago

I have the same problem.. Is there any solution for this? @ANovokmet