Our pure JavaScript Scheduler component


Post by Oliver Grösser »

Hi,

We are experiencing issues when integrating the scheduler-4.0.8-trial with Angular 11.0, we are using NodeJS v12.11.0 and npm 6.11.3

Once we've done all what is specified by the documentation the following error breaks the build of our project:

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 134:13-40
"export 'ɵɵNgOnChangesFeature' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 772:13-40
"export 'ɵɵNgOnChangesFeature' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 116:23-47
"export 'ɵɵdefineComponent' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 314:27-51
"export 'ɵɵdefineComponent' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 627:26-50
"export 'ɵɵdefineComponent' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1697:23-47
"export 'ɵɵdefineComponent' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1857:23-47
"export 'ɵɵdefineComponent' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1925:34-57
"export 'ɵɵdefineInjector' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1922:34-57
"export 'ɵɵdefineNgModule' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 113:36-60
"export 'ɵɵdirectiveInject' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 311:40-64
"export 'ɵɵdirectiveInject' (imported as 'ɵngcc0') was not found in '@angular/core'


"export 'ɵɵdirectiveInject' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1854:36-60
"export 'ɵɵdirectiveInject' (imported as 'ɵngcc0') was not found in '@angular/core'

Error: C:/.../repos/scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared/__ivy_ngcc__/fesm2015/bryntum-angular-shared.js 1930:53-78
"export 'ɵɵsetNgModuleScope' (imported as 'ɵngcc0') was not found in '@angular/core'

The folder is not in our project.

Is there anything we are missing?

Thank you in advance.


Post by alex.l »

Hi Oliver,

This a known issue with Angular versions compatibility. That happens if you update the app using ng update that uses all latests versions, so some of them should be changed to previous, but it's hard to do automatically or with general instructions, it should be done manually.
We will be happy to help you if you'll attach your application here with all configuration files, we will review it and fix for you. So, please zip your app and attach it here.

All the best,
Alex

All the best,
Alex


Post by Oliver Grösser »

Here you have our package.json file:

{
  "name": "anago-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve",
    "prebuild": "npm run lint",
    "build": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build",
    "build-stage": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --configuration=stage",
    "build-prod": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --prod",
    "preserve": "npm run lint",
    "serve": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve",
    "test": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test",
    "lint": "eslint -c .eslintrc.js --ext .ts src --quiet",
    "e2e": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng e2e",
    "clean": "if exist \"dist\" rd /s /q dist",
    "extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/es.json ./src/assets/i18n/en.json ./src/assets/i18n/de.json --clean --sort --format json --marker _",
    "lint:fix": "eslint -c .eslintrc.js --ext .ts src --fix --quiet",
    "format:fix": "pretty-quick --staged",
    "build-serve": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.9",
    "@angular/cdk": "^11.0.4",
    "@angular/common": "^11.0.9",
    "@angular/compiler": "^11.0.9",
    "@angular/core": "^11.0.9",
    "@angular/forms": "^11.0.8",
    "@angular/localize": "^11.0.8",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "^11.0.8",
    "@angular/platform-browser-dynamic": "^11.0.8",
    "@angular/router": "^11.0.8",
    "@devexpress/analytics-core": "20.1.6",
    "@ng-select/ng-select": "^5.0.15",
    "@ngrx/effects": "^10.1.2",
    "@ngrx/entity": "^10.1.2",
    "@ngrx/schematics": "^10.1.2",
    "@ngrx/store": "^10.1.2",
    "@ngrx/store-devtools": "^10.1.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-material-sidenav": "^0.1.1",
    "bryntum-angular-shared": "file:../../../scheduler-4.0.8-trial/examples/angular/_shared",
    "bryntum-scheduler": "file:../../../scheduler-4.0.8-trial/build",
    "core-js": "^3.8.2",
    "devexpress-reporting-angular": "20.1.6",
    "devextreme": "^20.2.5",
    "devextreme-angular": "^20.2.5",
    "devextreme-schematics": "^1.2.10",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "ngx-avatar": "^4.0.0",
    "ol": "^6.5.0",
    "rxjs": "6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.7",
    "@angular-eslint/builder": "1.1.0",
    "@angular-eslint/eslint-plugin": "1.1.0",
    "@angular-eslint/eslint-plugin-template": "1.1.0",
    "@angular-eslint/schematics": "1.1.0",
    "@angular-eslint/template-parser": "1.1.0",
    "@angular/cli": "^11.0.7",
    "@angular/compiler-cli": "^11.0.9",
    "@angular/language-service": "^11.0.9",
    "@biesbjerg/ngx-translate-extract": "^7.0.3",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.21",
    "@types/ol": "^6.4.2",
    "@typescript-eslint/eslint-plugin": "4.13.0",
    "@typescript-eslint/parser": "4.13.0",
    "bootstrap": "^4.5.3",
    "codelyzer": "^6.0.0",
    "eslint": "7.17.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.13",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^3.3.1",
    "husky": "^4.3.8",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~6.0.0",
    "jquery": "^3.5.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^2.0.1",
    "popper.js": "^1.16.1",
    "prettier": "2.2.1",
    "pretty-quick": "^3.1.0",
    "protractor": "^7.0.0",
    "puppeteer": "^5.5.0",
    "ts-node": "^9.1.1",
    "typescript": "^4.0.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run format:fix && npm run lint:fix"
    }
  }
}

Here is the tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noFallthroughCasesInSwitch": true,
    "strict": true,
    "strictNullChecks": false,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "skipLibCheck": true,
    "paths": {
      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["../node_modules/core-js/es/*"],
      "@app/*": ["app/*"],
      "@app/core/*": ["app/core/*"],
      "@testing/*": ["testing/*"],
      "@styles/*": ["styles/*"],
      "@env/*": ["environments/*"],
      "jszip": ["../node_modules/jszip/dist/jszip.min.js"],
      "ol": ["node_modules/ol/src"],
      "ol/*": ["node_modules/ol/src/*"],
      "bryntum-angular-shared":[
        "../../../../scheduler-4.0.8-trial/examples/angular/_shared/dist/bryntum-angular-shared"
      ]
    }
  }
}

Finally, here you have our angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AnagoWeb": {
      "root": "src",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "baseHref": "/anago/",
            "assets": ["src/favicon.ico", "src/assets", "src/web.config"],
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.material.orange.light.compact.css",
              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/@ng-select/ng-select/themes/material.theme.css",
              "node_modules/ol/ol.css",
              "src/styles/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles/"]
            },
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "stage": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AnagoWeb:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AnagoWeb:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AnagoWeb:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["src/styles/styles.scss"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": ".eslintrc.js",
            "lintFilePatterns": ["**/*.spec.ts", "**/*.d.ts"]
          }
        }
      }
    },
    "AnagoWeb-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AnagoWeb:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AnagoWeb:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "AnagoWeb",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  }
}

Do you have enough with those files? What else do you need to solve the issue, as you can imagine it's quite sensitive for the company to share the app code.


Post by alex.l »

I applied your configurations to our examples and here is result.
I had an error, but it is a different one. The core of the problem I faced is in strict mode, noUnusedLocals and noUnusedParameters settings in your tsconfig.json.
Please, check the app I've attached. I simply used your package.json with our examples (named angular-8) and now it uses angular v11. The only thing I changed to make it runnable is "typescript": "^4.0.5" to "typescript": "4.0.5".
Try to use the application I've attached as an example to find the root cause of the problem you reported in your application. It still doesn't look like the problem with our product for me but we will be happy to help you with it.

All the best,
Alex

Attachments
angular-11.zip
(883.94 KiB) Downloaded 123 times

All the best,
Alex


Post by Oliver Grösser »

We've been trying to figure out the issues but we couldn't figure it out.

Is it possible that the file ngcc.config.js with the following code has something to do with the problem?

// ngcc.config.js
module.exports = {
  packages: {
    'devextreme-angular': {
      ignorableDeepImportMatchers: [/devextreme\//]
    }
  }
};

Post by alex.l »

Very hard to say since we have no opportunity to reproduce the problem.
Our ngcc.config.js in some of angular examples looks like:

module.exports = {
    packages : {
        'bryntum-angular-shared' : {
            ignorableDeepImportMatchers : [
                /bryntum-scheduler\//
            ]
        }
    }
};

Try to merge it with yours and see the result.

All the best,
Alex


Post by Oliver Grösser »

We tried this last option but still not working.

We've reproduced the error in a simple app. Here you have the application attached as you told us initially to do. We couldn't manage to figure out the solution to this error.

Thank you so much for your time.

Attachments
AnagoWeb.zip
(19.36 KiB) Downloaded 103 times

Post by alex.l »

Hi Oliver,

Thank you for the test case, I was able to reproduce that bug after some manipulations, as well as got a green build result.

Please try to add "preserveSymlinks": true options into your angular.json file to build.options section . I've attached a version that works for me with that change.

Please let us know if you unblocked now.

All the best,
Alex

Attachments
angular.json
(4.37 KiB) Downloaded 124 times

All the best,
Alex


Post by Oliver Grösser »

We are facing the same error. Is there anything else you've modified from the solution?

Should we send you the bryntum-trial-4.0.8 folder also zipped so you can see the full picture of the issue?


Post by alex.l »

Yes. To make it runnable I also replaced scripts section in the package.json file on:

  "scripts": {
    "builder": "node ../../_shared/scripts/build.js",
    "guide": "npm run builder guide scheduler angular",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "preinstall": "npm run builder"
  },

This is what we use in our examples.

I've attached your app after my modifications.

Attachments
AnagoWeb_edited.zip
(3.63 MiB) Downloaded 125 times

All the best,
Alex


Post Reply