我正在使用 Angular 16。由于我安装了 Dragula 依赖项因此我在编译时遇到了问题。正如模块自述文件中所述 => “重要：将以下行添加到 polyfills.ts：

(window as any).global = window;

“，我创建了一个 polytills.ts，因为在 Angular 16 上我们不再有这个文件。

我已将 polytills.ts 文件添加到我的文件夹中app/src/

在我的 angular.json 上，我用如下的 polyfill 编辑了该行 => "polyfills": "src/polyfills.ts",

我在 tsconfig.app.json 上添加了如下 polyfill =>

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

当我运行时ng serve，出现此错误：

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

我不明白我做错了什么，在 Google 上检查了多个链接后，我仍然无法解决我的问题。

如果有人有想法，请随时分享<3提前致谢


最佳答案
2

只需按照以下步骤操作即可。

首次安装ng2-dragula如下

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

然后在文件夹polyfills.ts内创建它src。

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

  1. 将 DragulaModule.forRoot() 添加到您的应用程序模块。

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

在任何子模块（如延迟加载的路由模块）上，只需使用 DragulaModule。

然后您可以在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>

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

5

  • 谢谢，但这是我在应用程序上遵循的。但我仍然遇到同样的问题 🙁 在添加 ng2-dragula 之前几个月，我的应用程序运行良好，我不明白为什么会出现这个错误，我不明白这一点。但在你的 stackblitz 上，它运行良好


    – 


  • @Fizik26 复制问题并分享回来，你是否将 polyfill 添加到 tsconfig.app.json，还尝试删除 .angular 文件夹 node_modules 和包锁定 json 并进行全新安装


    – 

  • 我按照你的说法删除了文件夹，但问题仍然存在…我试图在 Stackblitz 上重现它，但目前没有成功 xD


    – 

  • 你知道为什么我的本地电脑要寻找这个文件吗？ polyfill.ngtypecheck.ts


    – 

  • 1
    伙计……问题是因为我将文件命名为 polyfill.ts 而不是 polyfills.ts ……怎么会浪费 3 个小时……再次感谢您的帮助


    – 

我认为您的安装没有问题，我认为这是您命名文件的方式，这仅仅是因为您的错误指向那里。

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

错误：TypeScript 编译中缺少 XXXXXXXX\app\src\polyfills.ts。请通过“files”或“include”属性确保它位于您的 tsconfig 中。

您的工作目录中没有这样的文件。polyfills.ts