Angular 16 - /app/src/polyfill.ngtypecheck.ts' not found

I'm using Angular 16. Since I've install the Dragula dependency ng2-dragula I have an issue on compilation. As it's said on the readme of the module => "Important: add the following line to your polyfills.ts:

(window as any).global = window;

", I've created a polytills.ts because on Angular 16 we don't have this file anymore.

I've added my polytills.ts file in my folder app/src/

On my angular.json I've edited the line with polyfills like that => "polyfills": "src/polyfills.ts",

And on tsconfig.app.json I've added the polyfills like that =>

"files": [
    "src/main.ts",
    "src/polyfill.ts"
  ],

When I run ng serve, I got this error :

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):

Error: XXXXXXXX\app\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Error: error TS6053: File 'XXXXXXXX/app/src/polyfill.ngtypecheck.ts' not found.
  The file is in the program because:
    Root file specified for compilation


Error: error TS6053: File 'XXXXXXXX/app/src/polyfill.ts' not found.
  The file is in the program because:
Root file specified for compilation

I don't understand what I did wrong and after I've checked multiple links on Google I can't fix my issue.

If someone has an idea, please feel free to share <3 Thanks in advance

Just follow the below steps.

First install ng2-dragula as seen in the docs:

npm install ng2-dragula
# or
yarn add ng2-dragula

Then create the polyfills.ts create it inside the src folder.

polyfills.ts

(window as any).global = window;

After creating, open tsconfig.app.json and add the polyfills.ts.

tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

Then add the polyfills.ts to the angular.json, polyfills array.

Also add the styles file "node_modules/dragula/dist/dragula.css" to the styles array.

angular.json

  ...
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/test",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": ["src/polyfills.ts", "zone.js"],
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["src/favicon.ico", "src/assets"],
        "styles": [
          "node_modules/dragula/dist/dragula.css",
          "src/styles.scss"
        ],
        "scripts": []
        ...

2. Add DragulaModule.forRoot() to your application module.

    import { DragulaModule } from 'ng2-dragula';
    @NgModule({
      imports: [
        ...,
        DragulaModule.forRoot()
      ],
    })
    export class AppModule { }
   

On any child modules (like lazy loaded route modules), just use DragulaModule.

Then you can include the optional CSS in styles.scss

/* in-flight clone */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  filter: alpha(opacity=80);
  pointer-events: none;
}
/* high-performance display:none; helper */
.gu-hide {
  left: -9999px !important;
}
/* added to mirrorContainer (default = body) while dragging */
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
/* added to the source element while its mirror is dragged */
.gu-transit {
  opacity: 0.2;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20);
}

Sample Component HTML:

<div>
  <div class="wrapper">
    <div class="container" dragula="DRAGULA_FACTS">
      <div>You can move these elements between these two containers</div>
      <div>Moving them anywhere else isn't quite possible</div>
      <div>
        There's also the possibility of moving elements around in the same
        container, changing their position
      </div>
    </div>
    <div class="container" dragula="DRAGULA_FACTS">
      <div>
        This is the default use case. You only need to specify the containers
        you want to use
      </div>
      <div>More interactive use cases lie ahead</div>
      <div>
        Make sure to check out the
        <a href="https://github.com/bevacqua/dragula#readme"
          >documentation on GitHub!</a
        >
      </div>
    </div>
  </div>
</div>

Stackblitz Demo -> cd test -> npm i -> npm run start