angular-builders
angular-builders copied to clipboard
just-jeb
errors "is part of the Typescript compilation but its unused " "@angular-builders/custom-webpack": "11.1.1"
I tried everything suggested here: https://stackoverflow.com/questions/57729518/how-to-get-rid-of-the-warning-ts-file-is-part-of-the-typescript-compilation-but
In my case a custom webpack could be the problem as mentioned in the above issue.
{
"name": "m",
"version": "1.0.0",
"main": "src/main.ts",
"eslintConfig": {
"globals": {
"Polymer": true,
"module": true
},
"env": {
"browser": true,
"amd": true,
"node": true
}
},
"nodemonConfig": {
"watch": [
"src",
"apps",
"libs"
],
"ext": "ts,js,html,scss",
"ignore": [
"dist/*.*",
"marmind/dist/*.*"
]
},
"scripts": {...
},
"keywords": [],
"private": true,
"license": "UNLICENSED",
"dependencies": {
"@ag-grid-community/all-modules": "25.1.0",
"@ag-grid-enterprise/all-modules": "25.1.0",
"@angular/animations": "^11.0.0 || ^12.0.0-0",
"@angular/cdk": "11.2.5",
"@angular/forms": "^11.2.6",
"@angular/material": "11.2.5",
"@ng-select/ng-select": "6.1.0",
"@types/video.js": "7.2.5",
"ag-grid": "18.1.2",
"angular": "1.6.8",
"angular-animate": "1.6.8",
"angular-bindonce": "0.3.1",
"angular-carousel": "1.1.0",
"angular-cookies": "1.6.8",
"angular-drag-and-drop-lists": "2.1.0",
"angular-dynamic-locale": "0.1.32",
"angular-elastic": "2.5.1",
"angular-i18n": "1.6.8",
"angular-jquery-timepicker": "0.13.1",
"angular-loading-bar": "0.9.0",
"angular-resource": "1.6.8",
"angular-sanitize": "1.6.8",
"angular-spectrum-colorpicker": "1.4.5",
"angular-touch": "1.7.8",
"angular-translate": "2.17.0",
"angular-ui-bootstrap": "2.5.6",
"angular-ui-grid": "4.1.3",
"angular-ui-mention": "0.0.8",
"angular-ui-router": "0.4.3",
"angular-ui-select2": "https://github.com/m/ui-select2.git#v0.0.5.2",
"angular-ui-validate": "1.2.3",
"angular-xeditable": "0.8.1",
"angular2-text-mask": "9.0.0",
"angulartics": "1.3.0",
"angulartics-piwik": "https://github.com/m/angulartics-piwik.git#master",
"core-js": "3.6.5",
"cropper": "3.1.3",
"cssnano": "4.1.10",
"d3": "5.7.0",
"fs-extra": "5.0.0",
"fullcalendar": "3.9.0",
"grunt-contrib-watch": "1.1.0",
"grunt-exec": "3.0.0",
"grunt-po2json-angular-translate": "https://github.com/marmind/grunt-po2json-angular-translate.git#master",
"inputmask": "5.0.3",
"jodit": "git+https://github.com/marmind/jodit.git",
"jquery": "3.4.1",
"jquery-backstretch": "2.1.16",
"jquery-migrate": "3.3.2",
"jquery-ui": "1.12.1",
"jquery.fancytree": "github:marmind/fancytree#addfad81f1fde0dc73f3bdb1895bd5cebbe40e6c",
"jsplumb": "2.6.9",
"jsrender": "0.9.90",
"juxtaposejs": "1.1.6",
"load-grunt-tasks": "3.5.2",
"moment": "2.27.0",
"moment-timezone": "0.5.31",
"ng-file-upload": "12.2.13",
"ng-fittext": "4.2.3",
"ng-juxtapose": "1.0.2",
"ng-metadata": "4.0.1",
"ng-quill": "4.5.1",
"pdfjs-dist": "2.5.147",
"pixi.js": "4.7.3",
"quill": "1.3.7",
"quill-emoji": "0.1.7",
"rxjs": "~6.5.5",
"signalr": "2.4.1",
"sortablejs": "1.10.2",
"spectrum-colorpicker": "1.8.0",
"terser-webpack-plugin": "5.1.1",
"timepicker": "1.11.12",
"tslib": "^2.0.0",
"ui-cropper": "1.0.6",
"ui-select": "https://github.com/m/ui-select.git#v0.16.1.1",
"underscore": "1.8.3",
"video.js": "7.2.3",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "11.1.1",
"@angular-devkit/build-angular": "0.1102.5",
"@angular-devkit/core": "11.2.5",
"@angular/cli": "11.2.5",
"@angular/common": "11.2.6",
"@angular/compiler": "11.2.6",
"@angular/compiler-cli": "11.2.6",
"@angular/core": "11.2.6",
"@angular/platform-browser": "11.2.6",
"@angular/platform-browser-dynamic": "11.2.6",
"@angular/upgrade": "11.2.6",
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
"@babel/plugin-proposal-optional-chaining": "7.11.0",
"@babel/preset-env": "^7.7.7",
"@compodoc/compodoc": "1.1.11",
"@pixi/core": "6.0.0",
"@pixi/filter-drop-shadow": "4.0.0",
"@pixi/filter-glow": "4.0.0",
"@pixi/math": "6.0.0",
"@pixi/settings": "6.0.0",
"@pixi/utils": "6.0.0",
"@storybook/addon-actions": "6.2.0-rc.2",
"@storybook/addon-essentials": "6.2.0-rc.2",
"@storybook/addon-links": "6.2.0-rc.2",
"@storybook/angular": "6.2.0-rc.2",
"@types/angular": "1.6.57",
"@types/angular-dynamic-locale": "0.1.35",
"@types/angular-resource": "1.5.15",
"@types/angular-translate": "2.16.2",
"@types/angular-ui-bootstrap": "0.13.46",
"@types/angular-ui-router": "1.1.40",
"@types/core-js": "0.9.46",
"@types/d3": "5.7.2",
"@types/jquery": "3.3.31",
"@types/jqueryui": "1.12.15",
"@types/jsrender": "0.0.29",
"@types/lodash": "4.14.105",
"@types/pixi.js": "4.7.3",
"@types/underscore": "1.8.6",
"@typescript-eslint/parser": "^4.1.0",
"angular-mocks": "1.6.4",
"autoprefixer": "9.7.6",
"babel-loader": "8.1.0",
"bootstrap": "3.3.7",
"concurrently": "6.0.0",
"copy-webpack-plugin": "6.1.1",
"cross-env": "6.0.3",
"cypress": "5.1.0",
"file-loader": "5.0.2",
"font-awesome": "4.7.0",
"grunt": "1.0.4",
"grunt-contrib-copy": "1.0.0",
"imports-loader": "1.2.0",
"jasmine-core": "~3.5.0",
"jest": "26.6.3",
"jest-preset-angular": "8.3.2",
"karma": "~5.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"lodash": "4.17.15",
"material-icons": "0.5.4",
"mdi": "2.2.43",
"ng-packagr": "11.2.4",
"nodemon": "2.0.4",
"postcss": "8.2.8",
"protractor": "~7.0.0",
"speed-measure-webpack-plugin": "1.3.1",
"typescript": "4.1.5",
"webpack": "4.46.0"
},
"engines": {
"node": ">= 8.x",
"npm": ">= 5"
},
"browser": {
"http": false
}
}
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"m-enterprise": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "less,sass"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack-m.config.js"
},
"allowedCommonJsDependencies": ["rxjs", "rxjs-compat", "inputmask", "quill-emoji", "pixi.js"],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"deleteOutputPath": false,
"outputHashing": "none",
"tsConfig": "tsconfig.app.json",
"namedChunks": false,
"showCircularDependencies": false,
"extractLicenses": false,
"statsJson": false,
"progress": true,
"sourceMap": false,
"buildOptimizer": false,
"aot": true,
"preserveSymlinks": false,
"optimization": {
"styles": false,
"scrypts": false,
"fonts": false
},
"vendorChunk": true,
"commonChunk": true,
"watch": false,
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"src/styles.less",
"node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.css",
"node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css",
"node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css",
"node_modules/@ng-select/ng-select/themes/material.theme.css",
"node_modules/material-icons/iconfont/material-icons.css",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/typeface-nunito/index.css",
"styles.scss",
"m/m-app-theme.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/underscore/underscore-min.js",
"libs-manual/modernizr/modernizr.js",
"node_modules/moment/moment.js",
"node_modules/angular/angular.js",
"node_modules/angular-resource/angular-resource.js",
"node_modules/angular-bindonce/bindonce.js",
"node_modules/pixi.js/dist/pixi.js",
"node_modules/signalr/jquery.signalR.js"
]
},
"configurations": {...
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "m-enterprise:build"
},
"configurations": {
"production": {
"browserTarget": "m-enterprise:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "m-enterprise:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "m/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/img"],
"styles": ["src/styles.less"],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "m-enterprise:serve"
},
"configurations": {
"production": {
"devServerTarget": "m-enterprise:serve:production"
}
}
}
}
}
},
"defaultProject": "m-enterprise"
}
@just-jeb https://stackoverflow.com/questions/57729518/how-to-get-rid-of-the-warning-ts-file-is-part-of-the-typescript-compilation-but
It is mentioned in the above post from Dec 2020 that the warnings appear if the custom-webpack version is not up to date if using custom-webpack, so I assumed that you encountered the issue before and fixed it but in the newest version the issue appears again(the warnings):
Following part:
Are you using @angular-builders/custom-webpack? I was getting bombarded with these messages in Angular 10 having never seen them before. Changing includes made no difference.
Then I found https://github.com/angular/angular/pull/36211.
This is essentially the same error as raised in this question but for ngtypecheck.ts files (whatever they are exactly i'm not sure!)
WARNING in /home/circleci/ng/aio/src/main.ngtypecheck.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig.
It looks like for me it's actually to do with @angular-builders/custom-webpack.
https://github.com/just-jeb/angular-builders/issues/781 where an issue was only just opened. Thanks to https://stackoverflow.com/a/62573294/16940 for pointing this out.
Updating to the v10.0.1 fixed it for me, but see the above issue for the latest.
"@angular-builders/custom-webpack": "10.0.1" // as of today
seems like exporting from d.ts is causing this... What do you mean by that?
Did you have this issue in v11.1.0 as well? Or just v11.1.1?
Can you create a minimal reproduction that I can look into?
@just-jeb with both, downgrading didn't help.
I can try but its a large comp. project, could take a couple of days till I find the time.
the warnings are caused by this bit from the "Jodit"(https://github.com/xdan/jodit) library(index.d.ts), the commented out part:
import { Jodit as Super } from 'jodit/src/jodit';
import type { IComponent, Nullable } from 'jodit/src/types';
// export * from 'jodit/src/types';
// export { Jodit };
declare global {
const Jodit: typeof Super;
const isProd: boolean;
const appVersion: string;
interface HTMLElement {
component: Nullable<IComponent>;
}
interface Function {
originalConstructor: Function;
}
}
I was able to fix most of the warnings by importing it like this(and not using the index.d.ts of the jodit library): import { Jodit } from 'jodit/src/jodit'; import { IJodit, IUIButton, IUIButtonStatePartial } from 'jodit/src/types'; instead of this: import { IJodit, IUIButton, IUIButtonStatePartial, Jodit } from 'jodit';
I experienced this same problem when migrating from Angular 8 to 12 (I know, I know..) I had been using this quite successfully (ty btw) at version 8.4 prior to the upgrade.
The project is an in-place migration from jQuery for a huge enterprise app, so there are a lot of 3rd party JS files previously included via script tags relying purely on the existence of global objects.
- The custom webpack config only defines some aliases (e.g.
jquery: path.resolve(__dirname, "src/web/vendor/jquery/js/jquery.min.js")). I forget why honestly, but I think it was for the sake of extension libs that think they're getting loaded as modules now. - Necessary things are barreled and imported as modules via
require. E.g.:- In main.ts:
require('./legacy-js-bootstrap'); - In legacy-js.bootstrap.js:
require('src/web/vendor/jquery');among others
- In main.ts:
- In tsconfig.app.json:
"include": [ "**/*.ts", "./web/**/*.js" ]
In 8.4, no warnings whatsoever. In 12.1, I get
Warning: C:/projects/core/angular-web-migration/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Warning: C:/projects/core/angular-web-migration/src/testing/index.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
...
It's followed by a lot of others, but those are legacy js files and libraries and I'm not confident they're imported right (and at least one is actually unused, though several absolutely are.)
I know environment.prod.ts has been addressed already, but looks like just by narrowing the includes folder so that it only comes in via the import statement (import { environment } from './environments/environment'; in main.ts for Angular 8 projects, not sure if that's changed.)
So it seems likely that some errors in using custom-webpack were simply covered up and are now visible, but it's also hard to say how many of these may have actually been in use in a way that webpack's not able to recognize.
For example, in my chain of requires, I eventually import jquery.nestable.min.js, which is not warned on, and neither are any of its apparent dependencies, but I now have a console error of Uncaught ReferenceError: eCancel is not defined, which nestable uses, but I don't know where it was originally imported from. This is a different error obviously, but evidence something is being excluded that was previously used.
I resolved my vaguely, potentially related issue. It turns out this was a global variable being set (so not declared anywhere.) Angular has you change the target in tsconfig from es5 to es2015 as part of the upgrade, and I guess that added some wrapping or context around the library import that made it no longer like that. Changing it back to es5 took care of it.
@jlabaj
my workaround was to have a reference :p
import { IStorage } from 'jodit/types/types/storage';
export let unusedIStorage: IStorage;
