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.
(window as any).global = window;
After creating, open tsconfig.app.json
and add the polyfills.ts.
/* 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.
...
"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": []
...
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);
}
<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