Angular 16 — /app/src/polyfill.ngtypecheck.ts не найден
Я использую Angular 16. Поскольку я установил зависимость Dragula ng2-dragula, у меня возникла проблема с компиляцией. Как сказано в файле readme модуля => «Важно: добавьте в ваш polyfills.ts следующую строку:
(window as any).global = window;
«Я создал polytillls.ts, потому что в Angular 16 этого файла больше нет.
Я добавил файлpolytils.ts в свою папку app/src/
В моем angular.json я отредактировал строку с такими полифилами => "polyfills": "src/polyfills.ts",
И в tsconfig.app.json я добавил такие полифилы =>
"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.
полифиллы.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": []
...
Добавьте 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
@ Fizik26 воспроизведите проблему и поделитесь ею, добавили ли вы полифилы в tsconfig.app.json, также попробуйте удалить папку .angular node_modules и блокировку пакета json и выполнить новую установку
Я удалил папки, как вы упомянули, но проблема осталась та же... Я пытаюсь воспроизвести ее на Stackblitz, но на данный момент мне это не удается xD
У вас есть идеи, почему на моем локальном компьютере он ищет этот файл? полифилл.ngtypecheck.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.
Ошибка: XXXXXXXX\app\src\polyfills.ts отсутствует в TypeScript. компиляция. Пожалуйста, убедитесь, что он находится в вашем tsconfig через «файлы». или «включить» свойство.
В вашем рабочем каталоге НЕТ такого файла, как polyfills.ts.
Спасибо, но я следил за этим в своем приложении. Но у меня все еще есть та же проблема :( Мое приложение работало хорошо за несколько месяцев до того, как я добавил ng2-dragula, и я не понимаю, почему у меня эта ошибка, я не вижу в этом смысла. Но в вашем stackblitz да, это работает хорошо