Angular 8 to 9 upgrade issues due to IVY

Question

I recently upgraded my Angular 8 application to Angular 9 and it all went smooth, but upon running the application I keep getting this error.

    Uncaught TypeError: Cannot set property ɵfac of function ngf(element) {
            this.element = element;
            this.filters = [];
            this.lastFileCount =...... } which has only a getter
        at ngf.directive.js:335
        at Module../node_modules/angular-file/__ivy_ngcc__/file-upload/ngf.directive.js (ngf.directive.js:339)
        at __webpack_require__ (bootstrap:79)
        at Object../node_modules/angular-file/__ivy_ngcc__/file-upload/ngfSelect.directive.js (ngfSelect.directive.js:26)
        at __webpack_require__ (bootstrap:79)
        at Object../node_modules/angular-file/__ivy_ngcc__/index.js (index.js:6)
        at __webpack_require__ (bootstrap:79)
        at Module../src/app/app.module.ts (app.component.ts:13)
        at __webpack_require__ (bootstrap:79)
        at Module../src/main.ts (main.ts:1)
    

My tsconfig.app.json file looks like this

    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["node"],
        "moduleResolution": "node"
      },
      "files": [
        "src/main.ts",
        "src/polyfills.ts"
      ],
      "angularCompilerOptions": {
        "enableIvy": true
      },
      "exclude": ["src/**/*.spec.ts", "src/test/**/*", "e2e/**/*"]
    }

tsconfig.json:

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "types": ["jest"],
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom"]
      }
    }

Output of ng --version

    Angular CLI: 9.1.12
    Node: 12.3.1
    OS: darwin x64
    
    Angular: 9.1.12
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    Ivy Workspace: Yes
    
    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.901.12
    @angular-devkit/build-angular      0.901.12
    @angular-devkit/build-optimizer    0.901.12
    @angular-devkit/build-webpack      0.901.12
    @angular-devkit/core               9.1.12
    @angular-devkit/schematics         9.1.12
    @angular/cdk                       9.2.4
    @angular/material                  9.2.4
    @angular/material-moment-adapter   9.2.4
    @ngtools/webpack                   9.1.12
    @schematics/angular                9.1.12
    @schematics/update                 0.901.12
    rxjs                               6.6.3
    typescript                         3.8.3
    webpack                            4.42.0

I am not sure if I have missed any configuration which is specific to Angular 9.

Answer 1

It looks like issue is on angular-file node_module

Solution could be on upgrade to version 2.0 according with repo owner comment. He mention that package has Ivy support on version 2

https://github.com/AckerApple/angular-file/issues/65#issuecomment-549402306