Angular 16 — /app/src/polyfill.ngtypecheck.ts не найден

Просто выполните следующие шаги.

Сначала установите ng2-dragula, как показано в документации:

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

Затем создайте polyfills.ts внутри папки src.

полифиллы.ts

(window as any).global = window;

После создания откройте tsconfig.app.json и добавьте файл 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"]
}

Затем добавьте polyfills.ts в массив angular.json, polyfills.

Также добавьте файл стилей "node_modules/dragula/dist/dragula.css" в массив стилей.

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. Добавьте DragulaModule.forRoot() в модуль вашего приложения.

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

В любых дочерних модулях (например, модулях маршрутов с отложенной загрузкой) просто используйте DragulaModule.

Затем вы можете включить дополнительный CSS в 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);
}

Пример 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 -> cd test -> npm i -> npm run start

Я не думаю, что у вас проблемы с установкой. Я думаю, это то, как вы называете свои файлы, исключительно потому, что ваша ошибка указывает именно на это.

./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.

Ошибка: XXXXXXXX\app\src\polyfills.ts отсутствует в TypeScript. компиляция. Пожалуйста, убедитесь, что он находится в вашем tsconfig через «файлы». или «включить» свойство.

В вашем рабочем каталоге НЕТ такого файла, как polyfills.ts.