Igniteui-angular: Several warnings on app launch 6.2.0 RC1 and now 7.0.2

[corganfuzz]

Description

When installing the default version of ignite angular. several warnings show up in the console

• igniteui-angular version: 6.2.0 RC1
• browser:
  Chrome

Steps to reproduce

1. add IgxNavigationDrawer to an empty angular cli project

Result

igniteui-angular.js:15519 IgxIconComponent: 'iconName' property is deprecated. To set the icon name for 'material' icons place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons use 'name' property.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:15837
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:15843
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#emptyTemplate' is deprecated.
Use `igxComboEmpty` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27891
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#headerTemplate' is deprecated.
Use `igxComboHeader` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27897
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#footerTemplate' is deprecated.
Use `igxComboFooter` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27903
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#itemTemplate' is deprecated.
Use `igxComboItem` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27909
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#addItemTemplate' is deprecated.
Use `igxComboAddItem` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27915
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15519 IgxComboComponent: Setting combo item template with '#headerItemTemplate' is deprecated.
Use `igxComboHeaderItem` directive instead.
(anonymous) @ igniteui-angular.js:15519
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:27921
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:27928
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15501 IgxDatePickerComponent: 'igx-datePicker' selector is deprecated. Use 'igx-date-picker' selector instead.
(anonymous) @ igniteui-angular.js:15501
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:29304
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:29310
__webpack_require__ @ bootstrap:78
./src/app/ignite/ignite.module.ts @ header.component.ts:8
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:15510 Function: IgxGridModule.forRoot method is deprecated. Use IgxGridModule instead.

Expected result

What is the expected result after following the steps to reproduce?
no warnings

Attachments

Attach a sample if available, and screenshots, if applicable.

[damyanpetev]

That's kind of expected - those are the standard deprecation warnings we use. Unfortunately the typescript decorators are tied in to the class definitions or in other words the warnings will be logged as soon as the class definition is parsed.

That's why as long as the igniteui-angular module is parsed those warnings are present regardless of the component used. If you build with tree shaking those should go away if the respective component is not used in the app (e.g. ng serve --prod/ng build --prod).

@kdinev @bkulov Maybe not be a bad idea to limit logs to dev builds (i.e. disable entirely in --prod)?

There are also options to warn only on use for methods such as IgxGridModule.forRoot and property setters. Last I checked for selectors there's no way to get those in a component other than looking at the DOM node.

[bkulov]

@damyanpetev The idea of these warning messages is to warn the users that we are deprecating something so they could adjust their code. That's why the warning messages should be present in production build too.
We could investigate if it's possible to show those message only when the given component or property is used.

[jjonas3]

Can you point me to what the warnings refer to ? What the recommended fixes are ?

[corganfuzz]

there is not really a fix, according to infragistics this is by design. warnings should go away once you build

igniteui-angular.js:17334 IgxIconComponent: 'iconName' property is deprecated. To set the icon name for 'material' icons place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons use 'name' property.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:17679
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:17685
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#emptyTemplate' is deprecated.
Use `igxComboEmpty` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32565
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#headerTemplate' is deprecated.
Use `igxComboHeader` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32571
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#footerTemplate' is deprecated.
Use `igxComboFooter` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32577
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#itemTemplate' is deprecated.
Use `igxComboItem` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32583
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#addItemTemplate' is deprecated.
Use `igxComboAddItem` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32589
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17334 IgxComboComponent: Setting combo item template with '#headerItemTemplate' is deprecated.
Use `igxComboHeaderItem` directive instead.
(anonymous) @ igniteui-angular.js:17334
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:32595
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:32602
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17314 IgxDatePickerComponent: 'igx-datePicker' selector is deprecated. Use 'igx-date-picker' selector instead.
(anonymous) @ igniteui-angular.js:17314
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:34262
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:34267
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:17324 Function: IgxGridModule.forRoot method is deprecated. Use IgxGridModule instead.
(anonymous) @ igniteui-angular.js:17324
__decorate @ tslib.es6.js:54
(anonymous) @ igniteui-angular.js:55851
./node_modules/igniteui-angular/fesm5/igniteui-angular.js @ igniteui-angular.js:55858
__webpack_require__ @ bootstrap:78
./src/app/drawer/drawer.component.ts @ main.js:791
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:567
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:9
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
igniteui-angular.js:64483 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://localhost:4200/MaterialIcons-Regular.woff2

[kdinev]

We will remove old deprecation warnings as the deprecated selectors/properties/etc. get removed. The warnings are dev messages warning that certain deprecated features should not be used and tell the dev what to use instead. If updates of igniteui-angular are made using ng update then automatic migrations would be executed for anything that is deprecated and would be replaced by the alternative that should be used, but we still want to make sure that we warn anyone who has not gone through the migrations.

In general, if none of the things mentioned in the warnings is used in your project, then you have nothing to worry about!

[corganfuzz]

@damyanpetev @kdinev @bkulov here is my build script and this is the result I get after I deploy

and when I go to my browser I get:

so Im not using any datepicker, iconName, nor any edit mode and forRoot option, is this by design also ?

[kdinev]

@corganfuzz We can't really analyze the app at build time to determine what components are used, so all warnings are given, regardless of whether the component is used or not.

@damyanpetev @bkulov We shouldn't be showing these warnings after a production build. Please take a look!

[bkulov]

Will take a look.

[mrdick47]

Showing these console warnings regardless of whether the component is being used is just confusing and clutters up the console.

Here is one of the Deprecated

export class IgxIconModule {
    @DeprecateMethod('IgxIconModule.forRoot method is deprecated. Use IgxIconModule instead.')
    public static forRoot() {
        return {
            ngModule: IgxIconModule
        };
    }
}

Normally, one would have a deprecated warning inside the deprecated method so the warning only shows when it is called. This helps developers know when they've completely updated since the warnings will no longer be present.

For the igx-date-picker and igx-datePicker selector warning, the class decorator could simply check if(document.querySelector('ig-datePicker')).

Please consider fixing this kind of effortless warning spam, it's counter productive and frustrating to look at.

[bkulov]

@MrDick47 The issue is already in development.

[grosch]

This is definitely an annoyance having those warnings appear even though I'm not using any of those deprecated methods.