errors while installation

[skriaa]

hello, i’m getting error while installation,
i imported ” SchedulerModule  from ‘smart-webcomponents-angular/scheduler’; in app.module but i get this error
“../node_modules/smart-webcomponents-angular/node_modules/@angular/core/core”‘ has no exported member ‘ɵɵFactoryDef’.
4 static ɵfac: ɵngcc0.ɵɵFactoryDef<SchedulerModule, never>; ”
<div>
<div></div>
</div>

[yavordashew]

Hi skriaa,
I have tested the latest smart-webcomponents-angular version and the Scheduler Component but I was unable to reproduce the issue that you do.
Could you please share a bit more context of your use case or maybe and example in order to be able to assess the situation and be able to give you a solution for your case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[skriaa]

Hello,
I found the solution for my problem, but is it normal that when I execute the code I get the error :
” Type ‘object | string[]’ is not assignable to type ‘SchedulerViews’. Type ‘object’ is not assignable to type ‘SchedulerViews’. Type ‘object’ is not assignable to type ‘”timelineMonth”‘. ” for both [view]=”view” and [views]=”views” ?
i’m trying to execute the doctor schedule template.
thank you.

[skriaa]

<div>
<div>Hello again, i cannot find a solution to my problem, i have always the same problem while executing the code “” Type ‘object | string[]’ is not assignable to type ‘SchedulerViews’. Type ‘object’ is not assignable to type ‘SchedulerViews’. Type ‘object’ is not assignable to type ‘”timelineMonth”‘.</div>
<div> for both</div>
<div> [view]=”view” and [views]=”views”</div>
<div></div>
</div>
<div>my package.json file :</div>
<div>
<div>{</div>
<div>    “name”: “blue-print-angular”,</div>
<div>    “version”: “0.0.1-SNAPSHOT”,</div>
<div>    “private”: true,</div>
<div>    “description”: “Description for bluePrintAngular”,</div>
<div>    “license”: “UNLICENSED”,</div>
<div>    “scripts”: {</div>
<div>        “prettier:check”: “prettier –check \”{,src/**/,webpack/}*.{md,json,yml,html,js,ts,tsx,css,scss,java}\””,</div>
<div>        “prettier:format”: “prettier –write \”{,src/**/,webpack/}*.{md,json,yml,html,js,ts,tsx,css,scss,java}\””,</div>
<div>        “lint”: “eslint . –ext .js,.ts”,</div>
<div>        “lint:fix”: “npm run lint — –fix”,</div>
<div>        “cleanup”: “rimraf target/classes/static/”,</div>
<div>        “clean-www”: “rimraf target/classes/static/app/{src,target/}”,</div>
<div>        “jest”: “jest –coverage –logHeapUsage –maxWorkers=2 –config jest.conf.js”,</div>
<div>        “start”: “npm run webapp:dev”,</div>
<div>        “start-hmr”: “ng serve –hmr”,</div>
<div>        “start-tls”: “npm run webapp:dev — –env.tls”,</div>
<div>        “serve”: “npm run start”,</div>
<div>        “build”: “npm run webapp:prod”,</div>
<div>        “pretest”: “npm run lint”,</div>
<div>        “test”: “ng test –coverage –log-heap-usage -w=2”,</div>
<div>        “test:watch”: “npm run test — –watch”,</div>
<div>        “webapp:build”: “npm run clean-www && npm run webapp:build:dev”,</div>
<div>        “webapp:build:dev”: “ng build”,</div>
<div>        “webapp:build:prod”: “ng build –prod”,</div>
<div>        “webapp:dev”: “ng serve”,</div>
<div>        “webapp:dev-verbose”: “ng serve –verbose”,</div>
<div>        “webapp:prod”: “npm run clean-www && npm run webapp:build:prod”,</div>
<div>        “webapp:test”: “npm run test”,</div>
<div>        “docker:db:up”: “docker-compose -f src/main/docker/postgresql.yml up -d”,</div>
<div>        “docker:db:down”: “docker-compose -f src/main/docker/postgresql.yml down -v –remove-orphans”,</div>
<div>        “docker:others:await”: “”,</div>
<div>        “predocker:others:up”: “”,</div>
<div>        “docker:others:up”: “”,</div>
<div>        “docker:others:down”: “”,</div>
<div>        “ci:e2e:prepare:docker”: “npm run docker:db:up && npm run docker:others:up && docker ps -a”,</div>
<div>        “ci:e2e:prepare”: “npm run ci:e2e:prepare:docker”,</div>
<div>        “ci:e2e:teardown:docker”: “npm run docker:db:down –if-present && npm run docker:others:down && docker ps -a”,</div>
<div>        “ci:e2e:teardown”: “npm run ci:e2e:teardown:docker”,</div>
<div>        “backend:info”: “./mvnw -ntp enforcer:display-info –batch-mode”,</div>
<div>        “backend:doc:test”: “./mvnw -ntp javadoc:javadoc –batch-mode”,</div>
<div>        “backend:nohttp:test”: “./mvnw -ntp checkstyle:check –batch-mode”,</div>
<div>        “java:jar”: “./mvnw -ntp verify -DskipTests –batch-mode”,</div>
<div>        “java:war”: “./mvnw -ntp verify -DskipTests –batch-mode -Pwar”,</div>
<div>        “java:docker”: “./mvnw -ntp verify -DskipTests jib:dockerBuild”,</div>
<div>        “backend:unit:test”: “./mvnw -ntp -P-webapp verify –batch-mode -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.com.assystem.bluerintangular=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF”,</div>
<div>        “java:jar:dev”: “npm run java:jar — -Pdev,webapp”,</div>
<div>        “java:jar:prod”: “npm run java:jar — -Pprod”,</div>
<div>        “java:war:dev”: “npm run java:war — -Pdev,webapp”,</div>
<div>        “java:war:prod”: “npm run java:war — -Pprod”,</div>
<div>        “java:docker:dev”: “npm run java:docker — -Pdev,webapp”,</div>
<div>        “java:docker:prod”: “npm run java:docker — -Pprod”,</div>
<div>        “ci:backend:test”: “npm run backend:info && npm run backend:doc:test && npm run backend:nohttp:test && npm run backend:unit:test”,</div>
<div>        “ci:server:package”: “npm run java:$npm_package_config_packaging:$npm_package_config_default_environment”,</div>
<div>        “ci:e2e:package”: “npm run java:$npm_package_config_packaging:$npm_package_config_default_environment — -Pe2e -Denforcer.skip=true”,</div>
<div>        “preci:e2e:server:start”: “npm run docker:db:await –if-present && npm run docker:others:await –if-present”,</div>
<div>        “ci:e2e:server:start”: “java -jar target/e2e.$npm_package_config_packaging –spring.profiles.active=$npm_package_config_default_environment -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.com.assystem.bluerintangular=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF –logging.level.org.springframework.web=ERROR”,</div>
<div>        “ci:frontend:build”: “npm run webapp:build:$npm_package_config_default_environment”,</div>
<div>        “ci:frontend:test”: “npm run ci:frontend:build && npm test”</div>
<div>    },</div>
<div>    “config”: {</div>
<div>        “backend_port”: “1995”,</div>
<div>        “default_environment”: “prod”,</div>
<div>        “packaging”: “jar”</div>
<div>    },</div>
<div>    “dependencies”: {</div>
<div>        “@angular/animations”: “^11.2.9”,</div>
<div>        “@angular/cdk”: “^11.2.11”,</div>
<div>        “@angular/common”: “11.2.5”,</div>
<div>        “@angular/compiler”: “11.2.5”,</div>
<div>        “@angular/core”: “11.2.5”,</div>
<div>        “@angular/forms”: “11.2.5”,</div>
<div>        “@angular/localize”: “11.2.5”,</div>
<div>        “@angular/material”: “^11.2.11”,</div>
<div>        “@angular/material-moment-adapter”: “^11.2.11”,</div>
<div>        “@angular/platform-browser”: “11.2.5”,</div>
<div>        “@angular/platform-browser-dynamic”: “11.2.5”,</div>
<div>        “@angular/router”: “11.2.5”,</div>
<div>        “@fortawesome/angular-fontawesome”: “0.8.2”,</div>
<div>        “@fortawesome/fontawesome-svg-core”: “1.2.35”,</div>
<div>        “@fortawesome/free-solid-svg-icons”: “5.15.3”,</div>
<div>        “@material/form-field”: “^11.0.0”,</div>
<div>        “@ng-bootstrap/ng-bootstrap”: “9.0.2”,</div>
<div>        “@ng-select/ng-select”: “^6.1.0”,</div>
<div>        “@ngx-translate/core”: “13.0.0”,</div>
<div>        “@ngx-translate/http-loader”: “6.0.0”,</div>
<div>        “@smart-webcomponents-angular/scheduler”: “9.2.22”,</div>
<div>        “angular-bootstrap-colorpicker”: “^3.0.32”,</div>
<div>        “angular-bootstrap-md”: “^11.1.0”,</div>
<div>        “angular-calendar”: “^0.28.22”,</div>
<div>        “angular-calendar-scheduler”: “^11.0.6”,</div>
<div>        “angular-paginator”: “^7.0.0”,</div>
<div>        “angular-scrollable-table”: “^1.1.2”,</div>
<div>        “angular-weekly-scheduler”: “^0.0.6”,</div>
<div>        “angularx-flatpickr”: “^6.5.2”,</div>
<div>        “bootstrap”: “4.6.0”,</div>
<div>        “bootstrap-select”: “^1.13.18”,</div>
<div>        “bootswatch”: “4.6.0”,</div>
<div>        “date-fns”: “^2.22.1”,</div>
<div>        “dayjs”: “1.10.4”,</div>
<div>        “express”: “^4.17.1”,</div>
<div>        “flatpickr”: “^4.6.9”,</div>
<div>        “leaflet”: “1.7.1”,</div>
<div>        “mat-select-filter”: “^2.3.7”,</div>
<div>        “ng-table-virtual-scroll”: “^1.3.6”,</div>
<div>        “ng2-search-filter”: “^0.5.1”,</div>
<div>        “ngx-infinite-scroll”: “10.0.1”,</div>
<div>        “ngx-mat-select-search”: “^3.2.0”,</div>
<div>        “ngx-time-scheduler”: “^1.7.1”,</div>
<div>        “ngx-toastr”: “^13.2.1”,</div>
<div>        “ngx-webstorage”: “7.0.1”,</div>
<div>        “rxjs”: “6.6.6”,</div>
<div>        “smart-webcomponents-angular”: “^9.3.102”,</div>
<div>        “swagger-ui-dist”: “3.45.0”,</div>
<div>        “tslib”: “2.1.0”,</div>
<div>        “zone.js”: “0.11.3”</div>
<div>    },</div>
<div>    “devDependencies”: {</div>
<div>        “@angular-builders/custom-webpack”: “11.1.1”,</div>
<div>        “@angular-builders/jest”: “11.1.1”,</div>
<div>        “@angular-eslint/eslint-plugin”: “2.0.2”,</div>
<div>        “@angular/cli”: “^11.2.6”,</div>
<div>        “@angular/compiler-cli”: “11.2.5”,</div>
<div>        “@angular/service-worker”: “11.2.5”,</div>
<div>        “@types/jest”: “26.0.20”,</div>
<div>        “@types/leaflet”: “1.7.0”,</div>
<div>        “@types/node”: “14.14.35”,</div>
<div>        “@typescript-eslint/eslint-plugin”: “4.18.0”,</div>
<div>        “@typescript-eslint/parser”: “4.18.0”,</div>
<div>        “ajv”: “^7.2.4”,</div>
<div>        “browser-sync”: “2.26.14”,</div>
<div>        “browser-sync-webpack-plugin”: “2.3.0”,</div>
<div>        “concurrently”: “6.0.0”,</div>
<div>        “copy-webpack-plugin”: “6.4.1”,</div>
<div>        “eslint”: “^7.22.0”,</div>
<div>        “eslint-config-prettier”: “8.1.0”,</div>
<div>        “eslint-webpack-plugin”: “2.5.2”,</div>
<div>        “friendly-errors-webpack-plugin”: “1.7.0”,</div>
<div>        “generator-jhipster”: “7.0.0”,</div>
<div>        “husky”: “4.3.8”,</div>
<div>        “jest”: “26.6.3”,</div>
<div>        “jest-date-mock”: “1.0.8”,</div>
<div>        “jest-junit”: “12.0.0”,</div>
<div>        “jest-sonar-reporter”: “2.0.0”,</div>
<div>        “lint-staged”: “10.5.4”,</div>
<div>        “merge-jsons-webpack-plugin”: “1.0.21”,</div>
<div>        “prettier”: “2.2.1”,</div>
<div>        “prettier-plugin-java”: “1.0.2”,</div>
<div>        “prettier-plugin-packagejson”: “2.2.10”,</div>
<div>        “rimraf”: “3.0.2”,</div>
<div>        “simple-progress-webpack-plugin”: “1.1.2”,</div>
<div>        “typescript”: “4.1.5”,</div>
<div>        “wait-on”: “5.2.1”,</div>
<div>        “webpack”: “4.46.0”,</div>
<div>        “webpack-bundle-analyzer”: “4.4.0”,</div>
<div>        “webpack-notifier”: “1.13.0”</div>
<div>    },</div>
<div>    “engines”: {</div>
<div>        “node”: “>=14.16.0″</div>
<div>    },</div>
<div>    “cacheDirectories”: [</div>
<div>        “node_modules”</div>
<div>    ],</div>
<div>    “jestSonar”: {</div>
<div>        “reportPath”: “target/test-results/jest”,</div>
<div>        “reportFile”: “TESTS-results-sonar.xml”</div>
<div>    }</div>
<div>}</div>
</div>

[yavordashew]

Hi skriaa,
I was able to asses your use case a bit more with the info that you have shared and reproduce your issue.
Also I have prepared a code snippet that could solve your situation:

//In your app.component.ts file
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { SchedulerComponent, SchedulerDataSource, SchedulerViewType, SchedulerViews, SchedulerViewSelectorType, SchedulerTimelineDayScale, SchedulerResource } from 'smart-webcomponents-angular/scheduler';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('scheduler', { read: SchedulerComponent, static: false }) scheduler: SchedulerComponent;
    view = 'workWeek' as SchedulerViewType;
    views = [{
        label: 'Work Week',
        value: 'workWeek',
        type: 'week',
        shortcutKey: 'W'
    }, 'month'] as SchedulerViews[];
// rest of your code

The problem is in the typescript definition for the Scheduler views.
Let me know if my suggestion above works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[skriaa]

Hello,
thank you for your reply, i tested the script that you shared and unfortunately i’m having the same error  with “views”:
Type ‘SchedulerViewType[]’ is not assignable to type ‘SchedulerViewType’. Type ‘SchedulerViewType[]’ is not assignable to type ‘”timelineMonth”‘.
 
app.component.ts:
<div>
<div> view = ‘workWeek’ as SchedulerViewType;</div>
<div>  views = [{</div>
<div>    label: ‘Work Week’,</div>
<div>    value: ‘workWeek’,</div>
<div>    type: ‘week’,</div>
<div>    shortcutKey: ‘W'</div>
<div>}, ‘month’] as SchedulerViews[];</div>
<div></div>
</div>
and in my app.component.html :
<div>
<div>[views]=”views”</div>
</div>
thank you.
Best regards

[yavordashew]

Hi skria,
If you take a look at the typescript definition of the SchedulerViewType you will see that it accepts only string as a value, and if you want to define it as a object you will have to do it like this:

    views:(object | SchedulerViewType)[] = [{
            label: 'Work Week',
            value: 'workWeek',
            type: 'week',
            shortcutKey: 'W'
    }, 'month'];

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi skriaa,
If you take a look at the typescript definition of the SchedulerViewType you will see that it accepts only string as a value, and if you want to define it as a object you will have to do it like this:

    views:(object | SchedulerViewType)[] = [{
            label: 'Work Week',
            value: 'workWeek',
            type: 'week',
            shortcutKey: 'W'
    }, 'month'];

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts