angulartypescriptpolyfillsangular16ng2-dragula

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


Solution

  • 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": []
            ...
    
    1. 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