chore(demos): strict templates, import warnings, update dock manager demo (#14587)

Author: damyanpetev

.github/workflows/nodejs.yml

@@ -66,6 +66,8 @@ jobs:
             fi
       - name: Test Elements
         run: npm run test:elements
+      - name: Build Demos
+        run: npm run build
       - name: Bundle Tree-Shake & SSR Test
         run: npm run build:bundletest
       - name: Publish to coveralls.io

angular.json

@@ -38,7 +38,6 @@
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
-            "aot": false,
             "stylePreprocessorOptions": {
               "includePaths": [
                 "node_modules"

src/app/action-strip/action-strip.sample.html

@@ -32,7 +32,7 @@ <h5>Grid Pinning Action</h5>
         </igx-action-strip>
     </igx-grid>
 </div>
-<button igxButton="outlined" (click)="this.grid1.transactions.commit(this.grid1.data)">Commit</button>
+<button igxButton="outlined" (click)="grid1.transactions.commit(grid1.data)">Commit</button>
 
 <div class="sample-column">
     <h5>Grid Pinning and Editing Actions</h5>

src/app/action-strip/action-strip.sample.ts

@@ -7,7 +7,6 @@ import {
     IgxActionStripComponent,
     IgxActionStripMenuItemDirective,
     IgxButtonDirective,
-    IgxButtonGroupComponent,
     IgxCellTemplateDirective,
     IgxColumnComponent,
     IgxGridComponent,
@@ -65,7 +64,6 @@ class User {
     imports: [
         NgIf,
         NgFor,
-        IgxButtonGroupComponent,
         IgxButtonDirective,
         IgxActionStripComponent,
         IgxIconComponent,

src/app/app.component.ts

@@ -292,7 +292,7 @@ export class AppComponent implements OnInit {
             name: 'Grid Auto Size'
         },
         {
-            link: '/gridDocManager',
+            link: '/gridDockManager',
             icon: 'view_column',
             name: 'Grid in DockManager'
         },

src/app/app.routes.ts

@@ -138,7 +138,7 @@ import { GridValidationSampleComponent } from './grid-validation/grid-validation
 import { GridExportComponent } from './grid-export/grid-export.sample';
 import { DividerComponent } from './divider/divider.component';
 import { MonthPickerSampleComponent } from './month-picker/month-picker.sample';
-import { GridDocManagerSampleComponent } from './docmanager-grid/docmanager-grid.sample';
+import { GridDockManagerSampleComponent } from './dockmanager-grid/dockmanager-grid.sample';
 import { HoundComponent } from './hound/hound.component';
 import { LabelSampleComponent } from "./label/label.sample";
 import { GridRecreateSampleComponent } from './grid-re-create/grid-re-create.sample';
@@ -614,8 +614,8 @@ export const appRoutes: Routes = [
         component: GridAutoSizeSampleComponent
     },
     {
-        path: 'gridDocManager',
-        component: GridDocManagerSampleComponent
+        path: 'gridDockManager',
+        component: GridDockManagerSampleComponent
     },
     {
         path: 'gridFlex',

src/app/button/button.sample.ts

@@ -1,14 +1,14 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
-import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular';
+import { IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconService } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 
 @Component({
     selector: 'app-button-sample',
     styleUrls: ['button.sample.scss'],
     templateUrl: 'button.sample.html',
     encapsulation: ViewEncapsulation.None,
-    imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective, SizeSelectorComponent]
+    imports: [IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective, SizeSelectorComponent]
 })
 export class ButtonSampleComponent implements OnInit {
     @ViewChild('inactive', { read: IgxIconButtonDirective, static: true })

src/app/calendar-views/calendar-views.sample.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { DateRangeType, IgxButtonDirective, IgxCardComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxRippleDirective, IgxYearsViewComponent } from 'igniteui-angular';
+import { DateRangeType, IgxButtonDirective, IgxDaysViewComponent, IgxMonthsViewComponent, IgxRippleDirective, IgxYearsViewComponent } from 'igniteui-angular';
 
 
 @Component({
@@ -10,7 +10,6 @@ import { DateRangeType, IgxButtonDirective, IgxCardComponent, IgxDaysViewCompone
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
         FormsModule,
-        IgxCardComponent,
         IgxMonthsViewComponent,
         IgxYearsViewComponent,
         IgxDaysViewComponent,

src/app/calendar/calendar.sample.ts

@@ -14,13 +14,10 @@ import {
     IgxDateRangePickerModule,
     IgxCalendarComponent,
     IgxCalendarView,
-    IgxCardComponent,
     IgxHintDirective,
     IgxIconComponent,
     IgxInputDirective,
     IgxInputGroupComponent,
-    IgxLabelDirective,
-    IgxRippleDirective,
     IgxSwitchComponent,
     IViewDateChangeEventArgs,
     DateRange,
@@ -72,13 +69,10 @@ defineComponents(IgcCalendarComponent);
     ],
     imports: [
         IgxButtonDirective,
-        IgxRippleDirective,
         IgxDateRangePickerModule,
-        IgxCardComponent,
         IgxCalendarComponent,
         IgxButtonGroupComponent,
         IgxInputGroupComponent,
-        IgxLabelDirective,
         IgxInputDirective,
         IgxHintDirective,
         FormsModule,

src/app/carousel/carousel.sample.ts

@@ -1,14 +1,14 @@
 import { Component, ViewChild } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
+import { NgFor } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { CarouselIndicatorsOrientation, IgxButtonDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxSlideComponent, IgxSwitchComponent, IgxToggleActionDirective } from 'igniteui-angular';
+import { CarouselIndicatorsOrientation, IGX_CAROUSEL_DIRECTIVES, IgxButtonDirective, IgxCarouselComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxSwitchComponent, IgxToggleActionDirective } from 'igniteui-angular';
 
 
 @Component({
     selector: 'app-carousel-sample',
     styleUrls: ['carousel.sample.scss'],
     templateUrl: 'carousel.sample.html',
-    imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, NgIf]
+    imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IGX_CAROUSEL_DIRECTIVES]
 })
 export class CarouselSampleComponent {
     @ViewChild('car', { static: true })