@igniteui/angular-templates 18.0.1400-beta.0 → 18.1.1340

package/IgniteUIForAngularTemplate.d.ts

@@ -1,10 +1,9 @@
-import { AddTemplateArgs, ControlExtraConfiguration, Template, TemplateDependency } from "@igniteui/cli-core";
+import { AddTemplateArgs, ControlExtraConfiguration, Template, TemplateDependency, TypeScriptFileUpdate } from "@igniteui/cli-core";
 export declare class IgniteUIForAngularTemplate implements Template {
     private rootPath;
     components: string[];
     controlGroup: string;
     listInComponentTemplates: boolean;
-    addAsNgModelDeclaration: boolean;
     listInCustomTemplates: boolean;
     id: string;
     name: string;
@@ -33,6 +32,7 @@ export declare class IgniteUIForAngularTemplate implements Template {
     getExtraConfiguration(): ControlExtraConfiguration[];
     setExtraConfiguration(extraConfigKeys: {}): void;
     fileExists(filePath: string): boolean;
+    protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string): void;
     protected getBaseVariables(name: string): {
         [key: string]: string;
     };

package/IgniteUIForAngularTemplate.js

@@ -10,7 +10,6 @@ class IgniteUIForAngularTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;
         this.listInComponentTemplates = true;
-        this.addAsNgModelDeclaration = true;
         this.listInCustomTemplates = false;
         this.framework = "angular";
         this.projectType = "igx-ts";
@@ -47,36 +46,30 @@ class IgniteUIForAngularTemplate {
         // tslint:disable-next-line:variable-name
         const TsUpdate = 
         // tslint:disable-next-line:no-submodule-imports
-        require("@igniteui/angular-templates").AngularTypeScriptFileUpdate;
-        const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
-        const folderName = this.folderName(name);
-        const fileName = this.fileName(name);
-        const componentFilePath = path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`);
-        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}Component`;
+        require("@igniteui/cli-core/typescript").TypeScriptFileUpdate;
         // standalone components
+        const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
         if (!this.fileExists(mainModulePath)) {
             const appRoutesPath = "src/app/app.routes.ts";
+            const folderName = this.folderName(name);
+            const fileName = this.fileName(name);
             if (!(options && options.skipRoute) && this.fileExists(appRoutesPath)) {
-                const routesConfigPath = path.join(projectPath, appRoutesPath);
-                const rountesConfig = new TsUpdate(routesConfigPath, true, { indentSize: 2, singleQuotes: true });
-                rountesConfig.addRoute({
-                    modulePath: cli_core_1.Util.relativePath(routesConfigPath, componentFilePath, true, true),
-                    path: this.fileName(name),
-                    data: { text: cli_core_1.Util.nameFromPath(name) },
-                    identifierName: className
-                });
-                rountesConfig.finalize();
+                const rountesConfig = new TsUpdate(path.join(projectPath, appRoutesPath));
+                rountesConfig.addRoute(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`), this.fileName(name), //path
+                cli_core_1.Util.nameFromPath(name) //text
+                );
             }
-            const componentFile = new TsUpdate(componentFilePath, true, { indentSize: 2, singleQuotes: true });
+            const componentFile = new TsUpdate(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`));
             for (const dep of this.dependencies) {
                 if (dep.from && dep.from.startsWith(".")) {
                     // relative file dependency
                     const copy = Object.assign({}, dep);
-                    copy.from = cli_core_1.Util.relativePath(componentFilePath, path.join(projectPath, copy.from), true, true);
-                    componentFile.addStandaloneComponentMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+                    copy.from = cli_core_1.Util.relativePath(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`), path.join(projectPath, copy.from), true, true);
+                    // can use addNgModuleMeta here instead?
+                    componentFile.addStandaloneImport(copy, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
                     continue;
                 }
-                componentFile.addStandaloneComponentMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+                componentFile.addStandaloneImport(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
             }
             componentFile.finalize();
             return;
@@ -86,37 +79,25 @@ class IgniteUIForAngularTemplate {
             //1) import the component class name,
             //2) and populate the Routes array with the path and component
             //for example: { path: 'combo', component: ComboComponent }
-            const routingModulePath = path.join(projectPath, "src/app/app-routing.module.ts");
-            const routingModule = new TsUpdate(routingModulePath, false, { indentSize: 2, singleQuotes: true });
-            routingModule.addRoute({
-                modulePath: cli_core_1.Util.relativePath(routingModulePath, componentFilePath, true, true),
-                path: this.fileName(name),
-                data: { text: cli_core_1.Util.nameFromPath(name) },
-                identifierName: className
-            });
-            routingModule.finalize();
+            const routingModule = new TsUpdate(path.join(projectPath, "src/app/app-routing.module.ts"));
+            routingModule.addRoute(path.join(projectPath, `src/app/${this.folderName(name)}/${this.fileName(name)}.component.ts`), this.fileName(name), //path
+            cli_core_1.Util.nameFromPath(name) //text
+            );
         }
         //3) add an import of the component class from its file location.
         //4) populate the declarations portion of the @NgModule with the component class name.
-        const mainModule = new TsUpdate(mainModulePath, false, { indentSize: 2, singleQuotes: true });
-        mainModule.addNgModuleMeta({
-            declare: this.addAsNgModelDeclaration ? [className] : [],
-            from: cli_core_1.Util.relativePath(mainModulePath, componentFilePath, true, true),
-            export: modulePath !== "app.module.ts" ? [className] : []
-        }, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
-        );
+        const mainModule = new TsUpdate(mainModulePath);
+        this.addClassDeclaration(mainModule, projectPath, name, modulePath);
         // import IgxModules and other dependencies
         for (const dep of this.dependencies) {
             if (dep.from && dep.from.startsWith(".")) {
                 // relative file dependency
                 const copy = Object.assign({}, dep);
                 copy.from = cli_core_1.Util.relativePath(mainModulePath, path.join(projectPath, copy.from), true, true);
-                mainModule.addNgModuleMeta(copy, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
-                );
+                mainModule.addNgModuleMeta(copy, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
             }
             else {
-                mainModule.addNgModuleMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
-                );
+                mainModule.addNgModuleMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
             }
         }
         mainModule.finalize();
@@ -128,6 +109,9 @@ class IgniteUIForAngularTemplate {
     fileExists(filePath) {
         return cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists(filePath);
     }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        mainModule.addDeclaration(path.join(projPath, `src/app/${this.folderName(name)}/${this.fileName(name)}.component.ts`), modulePath !== "app.module.ts");
+    }
     getBaseVariables(name) {
         const config = {};
         config["name"] = cli_core_1.Util.nameFromPath(name);

package/igx-ts/bullet-graph/default/index.js

@@ -12,7 +12,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Bullet Graph";
         this.description = "IgxBulletGraph with different animations.";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-gauges@~17.2.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-gauges@~18.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxBulletGraphTemplate();

package/igx-ts/category-chart/default/index.js

@@ -11,7 +11,7 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
         this.projectType = "igx-ts";
         this.name = "Category Chart";
         this.description = "basic category chart with chart type selector.";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxCategoryChartTemplate();

package/igx-ts/custom-templates/awesome-grid/index.js

@@ -10,7 +10,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.listInCustomTemplates = true;
         this.name = "Awesome Grid";
         this.description = "Awesome IgxGrid";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxGridAwesomeTemplate();

package/igx-ts/custom-templates/crm-grid/index.js

@@ -10,7 +10,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
         this.listInCustomTemplates = true;
         this.name = "CRM Grid";
         this.description = "CRM IgxGrid";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxGridCRMTemplate();

package/igx-ts/custom-templates/fintech-grid/index.js

@@ -10,7 +10,7 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.listInCustomTemplates = true;
         this.name = "FinTech Grid";
         this.description = "Grid with simulated high-frequency data feed";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxFinTechGridTemplate();

package/igx-ts/dock-manager/default/index.js

@@ -15,5 +15,8 @@ class IgcDockManagerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         // "igniteui-dockmanager@~1.0.0":
         this.packages = [`${(0, cli_core_1.resolvePackage)(cli_core_1.NPM_DOCK_MANAGER)}@~1.8.0`];
     }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
 }
 module.exports = new IgcDockManagerTemplate();

package/igx-ts/financial-chart/default/index.js

@@ -10,7 +10,7 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.id = "financial-chart";
         this.projectType = "igx-ts";
         this.name = "Financial Chart";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxFinancialChartTemplate();

package/igx-ts/grid/grid-custom/index.js

@@ -95,7 +95,7 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
                         checkBoxBind = `[ngModel]="cell.value" (ngModelChange)="cell.update($event)"`;
                         // enable Date Picker, ngModel
                         // this.dependencies.push({ import: "IgxDatePickerModule", from: "<%=igxPackage%>" });
-                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms", standalone: true });
+                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms" });
                         // datePickerEditor = EOL +
                         // 	`<ng-template igxCellEditor let-cell="cell">` + EOL +
                         // 	`  <igx-date-picker cancelButtonLabel="cancel" todayButtonLabel="today" [(ngModel)]="cell.value"` +
@@ -107,7 +107,7 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
                         break;
                     case "Row Editing":
                         gridFeatures.push(`[rowEditable]="true"`);
-                        this.dependencies.push({ import: "IgxDatePickerComponent", from: "<%=igxPackage%>", standalone: true });
+                        this.dependencies.push({ import: "IgxDatePickerComponent", from: "<%=igxPackage%>" });
                         break;
                     case "Row Selection":
                         const gridFeatureText = `rowSelection="multiple"`;

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/index.js

@@ -111,7 +111,7 @@ class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIF
                         break;
                     case "Cell Editing":
                         columnFeatures.push(`[editable]="true"`);
-                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms", standalone: true });
+                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms" });
                         break;
                     case "Row Selection":
                         const gridFeatureText = `rowSelection="multiple"`;

package/igx-ts/linear-gauge/default/index.js

@@ -12,7 +12,7 @@ class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Linear Gauge";
         this.description = "IgxLinearGauge with different animations.";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-gauges@~17.2.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-gauges@~18.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxLinearGaugeTemplate();

package/igx-ts/map/default/index.js

@@ -11,7 +11,7 @@ class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
         this.projectType = "igx-ts";
         this.name = "Geographic Map";
         this.description = "Basic IgxGeographicMap.";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0", "igniteui-angular-maps@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0", "igniteui-angular-maps@~18.0.0"];
     }
 }
 module.exports = new IgxGeographicMapTemplate();

package/igx-ts/projects/_base/files/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser-dynamic": "~18.0.0",
     "@angular/router": "~18.0.0",
 	  "hammerjs": "~2.0.8",
-    "igniteui-angular": "~18.0.0",
+    "igniteui-angular": "~18.1.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.0",
     "tslib": "~2.3.0",

package/igx-ts/projects/_base/files/src/app/app.config.ts

@@ -1,19 +1,27 @@
 import { ApplicationConfig, ErrorHandler, Provider, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  IgxNavigationDrawerModule,
+  IgxNavbarModule,
+  IgxLayoutModule,
+  IgxRippleModule,
+} from 'igniteui-angular';
 
 import { routes } from './app.routes';
 import { GlobalErrorHandlerService } from './error-routing/error/global-error-handler.service';
 import { environment } from '../environments/environment';
 
-// provide the HAMMER_GESTURE_CONFIG token
-// to override the default settings of the HammerModule
-// { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
-const providers: Provider = [
-  provideRouter(routes),
-  importProvidersFrom(BrowserModule, HammerModule),
-  provideAnimations()
+const providers: Provider[] = [
+  [
+    provideRouter(routes, withComponentInputBinding()),
+    importProvidersFrom(BrowserModule),
+    provideAnimations()
+    // provide the HAMMER_GESTURE_CONFIG token
+    // to override the default settings of the HammerModule
+    // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
+  ]
 ];
 
 if (environment.production) {

package/igx-ts/projects/_base_with_home/files/src/app/app.config.ts

@@ -1,10 +1,8 @@
-import { ApplicationConfig, Provider } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 
-const providers: Provider = [
-  provideRouter(routes)
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes, withComponentInputBinding())]
+};

package/igx-ts/projects/empty/files/src/app/app.config.ts

@@ -1,10 +1,8 @@
-import { ApplicationConfig, Provider } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 
-const providers: Provider = [
-  provideRouter(routes)
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes, withComponentInputBinding())]
+};

package/igx-ts/projects/side-nav/files/src/app/app.config.ts

@@ -1,5 +1,5 @@
-import { ApplicationConfig, Provider, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import {
@@ -11,20 +11,20 @@ import {
 
 import { routes } from './app.routes';
 
-// provide the HAMMER_GESTURE_CONFIG token
-// to override the default settings of the HammerModule
-// { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
-const providers: Provider = [
-  provideRouter(routes),
-  importProvidersFrom(
-    BrowserModule,
-    HammerModule,
-    IgxLayoutModule,
-    IgxNavbarModule,
-    IgxNavigationDrawerModule,
-    IgxRippleModule
-  ),
-  provideAnimations()
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    importProvidersFrom(
+      BrowserModule,
+      HammerModule,
+      IgxLayoutModule,
+      IgxNavbarModule,
+      IgxNavigationDrawerModule,
+      IgxRippleModule
+    ),
+    provideAnimations()
+    // provide the HAMMER_GESTURE_CONFIG token
+    // to override the default settings of the HammerModule
+    // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
+  ]
+};

package/igx-ts/projects/side-nav-auth/files/package.json

@@ -11,32 +11,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~17.2.0",
-    "@angular/common": "~17.2.0",
-    "@angular/compiler": "~17.2.0",
-    "@angular/core": "~17.2.0",
-    "@angular/forms": "~17.2.0",
-    "@angular/platform-browser": "~17.2.0",
-    "@angular/platform-browser-dynamic": "~17.2.0",
-    "@angular/router": "~17.2.0",
+    "@angular/animations": "~18.0.0",
+    "@angular/common": "~18.0.0",
+    "@angular/compiler": "~18.0.0",
+    "@angular/core": "~18.0.0",
+    "@angular/forms": "~18.0.0",
+    "@angular/platform-browser": "~18.0.0",
+    "@angular/platform-browser-dynamic": "~18.0.0",
+    "@angular/router": "~18.0.0",
     "angular-auth-oidc-client": "~15.0.4",
     "hammerjs": "~2.0.8",
-    "igniteui-angular": "~17.2.0",
+    "igniteui-angular": "~18.0.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.0",
     "tslib": "~2.3.0",
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~17.2.0",
-    "@angular-eslint/builder": "~17.2.0",
-    "@angular-eslint/eslint-plugin": "~17.2.0",
-    "@angular-eslint/eslint-plugin-template": "~17.2.0",
-    "@angular-eslint/schematics": "~17.2.0",
-    "@angular-eslint/template-parser": "~17.2.0",
-    "@angular/cli": "~17.2.0",
-    "@angular/compiler-cli": "~17.2.0",
-    "@angular/language-service": "~17.2.0",
+    "@angular-devkit/build-angular": "~18.0.0",
+    "@angular-eslint/builder": "~18.0.0",
+    "@angular-eslint/eslint-plugin": "~18.0.0",
+    "@angular-eslint/eslint-plugin-template": "~18.0.0",
+    "@angular-eslint/schematics": "~18.0.0",
+    "@angular-eslint/template-parser": "~18.0.0",
+    "@angular/cli": "~18.0.0",
+    "@angular/compiler-cli": "~18.0.0",
+    "@angular/language-service": "~18.0.0",
     "@types/facebook-js-sdk": "~3.3.6",
     "@types/hammerjs": "~2.0.41",
     "@types/jasmine": "~5.1.1",

package/igx-ts/projects/side-nav-auth/files/src/app/app.config.ts

@@ -1,5 +1,5 @@
-import { ApplicationConfig, Provider, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import {
@@ -12,22 +12,22 @@ import {
 import { AuthenticationModule, ExternalAuthService } from './authentication';
 import { routes } from './app.routes';
 
-// provide the HAMMER_GESTURE_CONFIG token
-// to override the default settings of the HammerModule
-// { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
-const providers: Provider = [
-  provideRouter(routes),
-  importProvidersFrom(
-    BrowserModule,
-    HammerModule,
-    IgxLayoutModule,
-    IgxNavbarModule,
-    IgxNavigationDrawerModule,
-    IgxRippleModule,
-    AuthenticationModule
-  ),
-  provideAnimations(),
-  ExternalAuthService
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    importProvidersFrom(
+      BrowserModule,
+      HammerModule,
+      IgxLayoutModule,
+      IgxNavbarModule,
+      IgxNavigationDrawerModule,
+      IgxRippleModule,
+      AuthenticationModule
+    ),
+    provideAnimations(),
+    ExternalAuthService
+    // provide the HAMMER_GESTURE_CONFIG token
+    // to override the default settings of the HammerModule
+    // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
+  ]
+};

package/igx-ts/radial-gauge/default/index.js

@@ -12,7 +12,7 @@ class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Radial Gauge";
         this.description = "IgxRadialGauge with different animations";
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-gauges@~17.2.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-gauges@~18.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxRadialGaugeTemplate();

package/igx-ts-legacy/bullet-graph/default/index.js

@@ -15,7 +15,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
                 import: ["IgxBulletGraphModule"],
                 from: "igniteui-angular-gauges"
             }];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-gauges@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-gauges@~18.0.0"];
     }
 }
 module.exports = new IgxBulletGraphTemplate();

package/igx-ts-legacy/category-chart/default/index.js

@@ -15,7 +15,7 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
             { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxCategoryChartTemplate();

package/igx-ts-legacy/custom-templates/awesome-grid/index.js

@@ -33,7 +33,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxGridAwesomeTemplate();

package/igx-ts-legacy/custom-templates/crm-grid/index.js

@@ -43,7 +43,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxGridCRMTemplate();

package/igx-ts-legacy/custom-templates/fintech-grid/index.js

@@ -30,7 +30,7 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxFinTechGridTemplate();

package/igx-ts-legacy/dock-manager/default/index.js

@@ -8,7 +8,6 @@ class IgcDockManagerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.components = ["Dock Manager"];
         this.controlGroup = "Layouts";
         this.listInComponentTemplates = true;
-        this.addAsNgModelDeclaration = false;
         this.id = "dock-manager";
         this.projectType = "igx-ts";
         this.name = "Dock Manager";
@@ -19,5 +18,8 @@ class IgcDockManagerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         // "igniteui-dockmanager@~1.0.0":
         this.packages = [`${(0, cli_core_1.resolvePackage)(cli_core_1.NPM_DOCK_MANAGER)}@~1.8.0`];
     }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
 }
 module.exports = new IgcDockManagerTemplate();

package/igx-ts-legacy/financial-chart/default/index.js

@@ -13,7 +13,7 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.dependencies = [
             { import: "IgxFinancialChartModule", from: "igniteui-angular-charts" }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0"];
     }
 }
 module.exports = new IgxFinancialChartTemplate();

package/igx-ts-legacy/linear-gauge/default/index.js

@@ -17,7 +17,7 @@ class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
                 from: "igniteui-angular-gauges"
             }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-gauges@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-gauges@~18.0.0"];
     }
 }
 module.exports = new IgxLinearGaugeTemplate();

package/igx-ts-legacy/map/default/index.js

@@ -21,7 +21,7 @@ class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
                 from: "igniteui-angular-charts"
             }
         ];
-        this.packages = ["igniteui-angular-core@~17.2.0", "igniteui-angular-charts@~17.2.0", "igniteui-angular-maps@~17.2.0"];
+        this.packages = ["igniteui-angular-core@~18.0.0", "igniteui-angular-charts@~18.0.0", "igniteui-angular-maps@~18.0.0"];
     }
 }
 module.exports = new IgxGeographicMapTemplate();

package/igx-ts-legacy/projects/_base/files/package.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "~18.0.0",
     "@angular/router": "~18.0.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "~18.0.0",
+    "igniteui-angular": "~18.1.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.0",
     "tslib": "~2.3.0",

package/igx-ts-legacy/projects/_base/files/src/app/app-routing.module.ts

@@ -11,7 +11,7 @@ export const routes: Routes = [
 ];
 
 @NgModule({
-	imports: [RouterModule.forRoot(routes), ErrorRoutingModule],
+	imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true }), ErrorRoutingModule],
 	exports: [RouterModule, ErrorRoutingModule]
 })
 export class AppRoutingModule { }