@igniteui/angular-templates 18.1.1341 → 18.1.1400-beta.2

package/AngularTypeScriptFileUpdate.d.ts

@@ -0,0 +1,83 @@
+import { KeyValuePair, FormatSettings, PropertyAssignment, TemplateDependency, TypeScriptFileUpdate, RouteEntry } from '@igniteui/cli-core';
+import { AngularRouteLike } from './types';
+export declare class AngularTypeScriptFileUpdate extends TypeScriptFileUpdate {
+    protected filePath: string;
+    private standalone;
+    protected formatSettings?: FormatSettings;
+    /**
+     * Creates a new AngularTypeScriptFileUpdate instance for the given file.
+     * @param standalone Whether the file is a standalone component.
+     * @param formatSettings Custom formatting settings to apply.
+     */
+    constructor(filePath: string, standalone?: boolean, formatSettings?: FormatSettings);
+    /**
+     * Adds a route entry to the Angular routing module's routes variable instance.
+     * @param route The route to add.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     *  If no anchor is provided, the new entry will be added to the start or end of the array.
+     * @param anchorElement The anchor element to insert to.
+     */
+    addRoute(route: AngularRouteLike, multiline?: boolean, prepend?: boolean, anchorElement?: PropertyAssignment): void;
+    addChildRoute(parentPath: string, route: AngularRouteLike, asIdentifier?: boolean, multiline?: boolean): void;
+    /**
+     * Adds an import identifier to a standalone component's metadata.
+     * @param dep The dependency to add to the standalone component's metadata.
+     * @param variables Variables to replace in the dependency strings.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addStandaloneComponentMeta(dep: TemplateDependency, variables?: KeyValuePair<string>, multiline?: boolean): void;
+    /**
+     * Adds metadata to an NgModule decorator.
+     * @param dep The dependency to add to the NgModule decorator.
+     * @param variables Variables to replace in the dependency strings.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addNgModuleMeta(dep: TemplateDependency, variables?: KeyValuePair<string>, multiline?: boolean): void;
+    /**
+     * Includes `{ bindToComponentInputs: true }` for a `forRoot` call in an `NgModule`'s `imports` member.
+     *
+     * For standalone projects, includes an `withComponentInputBinding` call in a `providers` variable. Mainly present in an `app.config` file.
+     */
+    allowComponentInputBinding(): void;
+    /**
+     * Provides the `HttpClient` for standalone applications.
+     */
+    provideHttpClientForStandaloneAppConfig(): void;
+    protected buildRouteStructure(route: AngularRouteLike, multiline: boolean): RouteEntry[];
+    /**
+     * Add an imort declaration for the dependency.
+     * @param meta The metadata to use for the import declaration.
+     * @param moduleName The name of the module to import from.
+     * @param variables Variables to replace in the dependency strings.
+     */
+    private addImportDeclarationForDependency;
+    /**
+     * Applies mutations to an Angular decorator's metadata.
+     * @param decoratorName The name of the decorator to update.
+     * @param meta The metadata to use for the mutations.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    private applyDecoratorMutations;
+    /**
+     * Updates an Angular decorator's metadata.
+     * @param name The name of the decorator to update.
+     * @param meta Names of identifiers to be added.
+     * @param target The target metadata property to update.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    private mutateNgDecoratorMeta;
+    /**
+     * Checks if a node has an ancestor with a specific decorator.
+     * @param name The name of the decorator.
+     * @param node The node to start checking from.
+     */
+    private checkNgDecorator;
+    /**
+     * Finds a property assignment that exists in a specific NG decorator meta.
+     * @param decoratorName The name of the decorator to check.
+     * @param propName The property name to check.
+     * @param node The node to start checking from.
+     */
+    private findNgDecoratorProperty;
+}

package/AngularTypeScriptFileUpdate.js

@@ -0,0 +1,269 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularTypeScriptFileUpdate = void 0;
+const ts = require("typescript");
+const cli_core_1 = require("@igniteui/cli-core");
+const types_1 = require("./types");
+class AngularTypeScriptFileUpdate extends cli_core_1.TypeScriptFileUpdate {
+    /**
+     * Creates a new AngularTypeScriptFileUpdate instance for the given file.
+     * @param standalone Whether the file is a standalone component.
+     * @param formatSettings Custom formatting settings to apply.
+     */
+    constructor(filePath, standalone = false, formatSettings) {
+        super(filePath, formatSettings);
+        this.filePath = filePath;
+        this.standalone = standalone;
+        this.formatSettings = formatSettings;
+    }
+    //#region Public API
+    /**
+     * Adds a route entry to the Angular routing module's routes variable instance.
+     * @param route The route to add.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     *  If no anchor is provided, the new entry will be added to the start or end of the array.
+     * @param anchorElement The anchor element to insert to.
+     */
+    addRoute(route, multiline = false, prepend = true, anchorElement = cli_core_1.ANCHOR_ELEMENT) {
+        if (!route.lazyload) {
+            this.requestImportForRouteIdentifier(route);
+        }
+        const structure = this.buildRouteStructure(route, multiline);
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        this.astTransformer.requestNewMembersInArrayLiteral((0, cli_core_1.variableAsParentCondition)(this.astTransformer, cli_core_1.ROUTES_VARIABLE_NAME), [newRoute], prepend, anchorElement);
+    }
+    addChildRoute(parentPath, route, asIdentifier = false, multiline = false) {
+        super.addChildRoute(parentPath, route, asIdentifier, multiline);
+    }
+    /**
+     * Adds an import identifier to a standalone component's metadata.
+     * @param dep The dependency to add to the standalone component's metadata.
+     * @param variables Variables to replace in the dependency strings.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addStandaloneComponentMeta(dep, variables, multiline = false) {
+        if (!this.standalone || !dep.standalone)
+            return;
+        const copy = {
+            imports: this.asArray(dep.import || [], variables || {}),
+            providers: this.asArray(dep.provide || [], variables || {}),
+            schemas: this.asArray(dep.schema || [], variables || {}),
+        };
+        if (dep.from) {
+            this.addImportDeclarationForDependency(copy, dep.from, variables);
+        }
+        this.applyDecoratorMutations(cli_core_1.NG_SA_DECORATOR_NAME, copy, multiline);
+    }
+    /**
+     * Adds metadata to an NgModule decorator.
+     * @param dep The dependency to add to the NgModule decorator.
+     * @param variables Variables to replace in the dependency strings.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addNgModuleMeta(dep, variables, multiline = false) {
+        if (this.standalone || dep.standalone)
+            return;
+        const copy = {
+            imports: this.asArray(dep.import || [], variables || {}),
+            declarations: this.asArray(dep.declare || [], variables || {}),
+            providers: this.asArray(dep.provide || [], variables || {}),
+            exports: this.asArray(dep.export || [], variables || {}),
+            schemas: this.asArray(dep.schema || [], variables || {}),
+        };
+        if (dep.from) {
+            this.addImportDeclarationForDependency(copy, dep.from, variables);
+        }
+        if (dep.root && copy.imports.length > 0) {
+            // add forRoot to the module
+            copy.imports = copy.imports.map((i) => this.astTransformer.printer.printNode(ts.EmitHint.Unspecified, this.astTransformer.createCallExpression(i, cli_core_1.NG_FOR_ROOT_IDENTIFIER_NAME), this.astTransformer.sourceFile));
+        }
+        this.applyDecoratorMutations(cli_core_1.NG_MODULE_DECORATOR_NAME, copy, multiline);
+    }
+    /**
+     * Includes `{ bindToComponentInputs: true }` for a `forRoot` call in an `NgModule`'s `imports` member.
+     *
+     * For standalone projects, includes an `withComponentInputBinding` call in a `providers` variable. Mainly present in an `app.config` file.
+     */
+    allowComponentInputBinding() {
+        if (this.standalone) {
+            this.astTransformer.requestNewImportDeclaration({
+                identifiers: [{ name: cli_core_1.WITH_COMPONENT_INPUT_BINDING }],
+                moduleName: cli_core_1.NG_ROUTER_PACKAGE,
+            });
+            // create withComponentInputBinding()
+            const callExpr = ts.factory.createCallExpression(ts.factory.createIdentifier(cli_core_1.WITH_COMPONENT_INPUT_BINDING), undefined, // type args
+            [] // args
+            );
+            this.astTransformer.requestNewArgumentInMethodCallExpression((node) => ts.isIdentifier(node.expression) &&
+                node.expression.text === cli_core_1.PROVIDE_ROUTER &&
+                (0, cli_core_1.variableAsParentCondition)(this.astTransformer, cli_core_1.NG_DECORATOR_PROVIDERS)(node), callExpr);
+        }
+        else {
+            const objLiteral = this.astTransformer.createObjectLiteralExpression([{ bindToComponentInputs: cli_core_1.TRUE_CLAUSE }], false, // multiline
+            () => ts.factory.createTrue());
+            this.astTransformer.requestNewArgumentInMethodCallExpression((node) => ts.isPropertyAccessExpression(node.expression) &&
+                ts.isIdentifier(node.expression.name) &&
+                node.expression.name.text === cli_core_1.NG_FOR_ROOT_IDENTIFIER_NAME &&
+                this.checkNgDecorator(cli_core_1.NG_MODULE_DECORATOR_NAME, node), objLiteral);
+        }
+    }
+    /**
+     * Provides the `HttpClient` for standalone applications.
+     */
+    provideHttpClientForStandaloneAppConfig() {
+        this.astTransformer.requestNewImportDeclaration({
+            identifiers: [{ name: cli_core_1.NG_HTTP_CLIENT_PROVIDER }],
+            moduleName: cli_core_1.NG_COMMON_HTTP_PACKAGE,
+        });
+        // create provideHttpClient()
+        const callExpr = ts.factory.createCallExpression(ts.factory.createIdentifier(cli_core_1.NG_HTTP_CLIENT_PROVIDER), undefined, // type args
+        [] // args
+        );
+        this.astTransformer.requestNewMembersInArrayLiteral((0, cli_core_1.variableAsParentCondition)(this.astTransformer, cli_core_1.NG_DECORATOR_PROVIDERS), [callExpr]);
+    }
+    //#endregion
+    //#region Protected Overrides
+    buildRouteStructure(route, multiline) {
+        var _a, _b, _c, _d, _e;
+        let structure = [];
+        // lazily loaded route
+        if (route.lazyload &&
+            route.path &&
+            route.identifierName &&
+            route.modulePath) {
+            const lazyLoadedModule = this.createDynamicImport(route.modulePath, route.identifierName, route.root);
+            const propAssignmentName = route.root
+                ? types_1.AngularRouteTarget.LoadChildren
+                : types_1.AngularRouteTarget.LoadComponent;
+            structure = [
+                {
+                    name: cli_core_1.RouteTarget.Path,
+                    value: ts.factory.createStringLiteral(route.path, (_a = this.formatSettings) === null || _a === void 0 ? void 0 : _a.singleQuotes),
+                },
+                { name: propAssignmentName, value: lazyLoadedModule },
+            ];
+        }
+        if (route.redirectTo) {
+            // redirect route
+            structure = [
+                {
+                    name: cli_core_1.RouteTarget.Path,
+                    value: ts.factory.createStringLiteral(route.path || '', (_b = this.formatSettings) === null || _b === void 0 ? void 0 : _b.singleQuotes),
+                },
+                {
+                    name: types_1.AngularRouteTarget.RedirectTo,
+                    value: ts.factory.createStringLiteral(route.redirectTo, (_c = this.formatSettings) === null || _c === void 0 ? void 0 : _c.singleQuotes),
+                },
+            ];
+            if (route.pathMatch) {
+                structure.push({
+                    name: types_1.AngularRouteTarget.PathMatch,
+                    value: ts.factory.createStringLiteral(route.pathMatch, (_d = this.formatSettings) === null || _d === void 0 ? void 0 : _d.singleQuotes),
+                });
+            }
+        }
+        else if (!route.lazyload) {
+            // default route
+            structure = [
+                {
+                    name: cli_core_1.RouteTarget.Path,
+                    value: ts.factory.createStringLiteral(route.path, (_e = this.formatSettings) === null || _e === void 0 ? void 0 : _e.singleQuotes),
+                },
+                {
+                    name: cli_core_1.RouteTarget.Component,
+                    value: ts.factory.createIdentifier(route.aliasName || route.identifierName),
+                },
+            ];
+        }
+        if (route.data) {
+            structure.push({
+                name: types_1.AngularRouteTarget.Data,
+                value: this.astTransformer.createObjectLiteralExpression([route.data], multiline, (value) => {
+                    var _a;
+                    return ts.factory.createStringLiteral(value, (_a = this.formatSettings) === null || _a === void 0 ? void 0 : _a.singleQuotes);
+                }),
+            });
+        }
+        return structure;
+    }
+    //#endregion
+    //#region Internals
+    /**
+     * Add an imort declaration for the dependency.
+     * @param meta The metadata to use for the import declaration.
+     * @param moduleName The name of the module to import from.
+     * @param variables Variables to replace in the dependency strings.
+     */
+    addImportDeclarationForDependency(meta, moduleName, variables) {
+        // add an import declaration for the dependency
+        const uniqueIdentifiers = new Set(Object.values(meta).flat());
+        const identifiers = [...uniqueIdentifiers].map((name) => ({ name }));
+        this.astTransformer.requestNewImportDeclaration({
+            identifiers,
+            moduleName: this.applyConfigTransformation(moduleName, variables),
+        });
+    }
+    /**
+     * Applies mutations to an Angular decorator's metadata.
+     * @param decoratorName The name of the decorator to update.
+     * @param meta The metadata to use for the mutations.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    applyDecoratorMutations(decoratorName, meta, multiline = false) {
+        for (const key of Object.keys(meta)) {
+            if (meta[key].length > 0) {
+                this.mutateNgDecoratorMeta(decoratorName, meta[key], key, multiline);
+            }
+        }
+    }
+    /**
+     * Updates an Angular decorator's metadata.
+     * @param name The name of the decorator to update.
+     * @param meta Names of identifiers to be added.
+     * @param target The target metadata property to update.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    mutateNgDecoratorMeta(name, meta, target, multiline = false) {
+        const identifiers = meta.map(ts.factory.createIdentifier);
+        const targetMetaProp = this.findNgDecoratorProperty(name, target);
+        const value = targetMetaProp && !ts.isArrayLiteralExpression(targetMetaProp.initializer)
+            ? [targetMetaProp.initializer, ...identifiers]
+            : identifiers;
+        this.astTransformer.requestNewMemberInObjectLiteral((node) => this.checkNgDecorator(name, node), target, this.astTransformer.createArrayLiteralExpression(value, multiline), multiline);
+    }
+    /**
+     * Checks if a node has an ancestor with a specific decorator.
+     * @param name The name of the decorator.
+     * @param node The node to start checking from.
+     */
+    checkNgDecorator(name, node) {
+        const getNodeExpressionTokenName = (node) => {
+            const nodeExpression = ts.isDecorator(node) &&
+                ts.isCallExpression(node.expression) &&
+                node.expression;
+            const token = nodeExpression &&
+                ts.isIdentifier(nodeExpression.expression) &&
+                nodeExpression.expression;
+            return ts.isIdentifier(token) && token.text;
+        };
+        return !!this.astTransformer.findNodeAncestor(node, (node) => getNodeExpressionTokenName(node) === name);
+    }
+    /**
+     * Finds a property assignment that exists in a specific NG decorator meta.
+     * @param decoratorName The name of the decorator to check.
+     * @param propName The property name to check.
+     * @param node The node to start checking from.
+     */
+    findNgDecoratorProperty(decoratorName, propName) {
+        const ngDecoratorExists = (node) => !!this.astTransformer.findNodeAncestor(node, (node) => {
+            const nodeExpressionToken = ts.isDecorator(node) && node.expression.getFirstToken();
+            return (ts.isIdentifier(nodeExpressionToken) &&
+                nodeExpressionToken.text === decoratorName);
+        });
+        return this.astTransformer.findPropertyAssignment((node) => ts.isIdentifier(node.name) &&
+            node.name.text === propName &&
+            ngDecoratorExists(node));
+    }
+}
+exports.AngularTypeScriptFileUpdate = AngularTypeScriptFileUpdate;

package/IgniteUIForAngularTemplate.d.ts

@@ -1,9 +1,10 @@
-import { AddTemplateArgs, ControlExtraConfiguration, Template, TemplateDependency, TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { AddTemplateArgs, ControlExtraConfiguration, Template, TemplateDependency } 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;
@@ -32,7 +33,6 @@ 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,6 +10,7 @@ class IgniteUIForAngularTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;
         this.listInComponentTemplates = true;
+        this.addAsNgModelDeclaration = true;
         this.listInCustomTemplates = false;
         this.framework = "angular";
         this.projectType = "igx-ts";
@@ -46,30 +47,36 @@ class IgniteUIForAngularTemplate {
         // tslint:disable-next-line:variable-name
         const TsUpdate = 
         // tslint:disable-next-line:no-submodule-imports
-        require("@igniteui/cli-core/typescript").TypeScriptFileUpdate;
-        // standalone components
+        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`;
+        // standalone components
         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 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 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 componentFile = new TsUpdate(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`));
+            const componentFile = new TsUpdate(componentFilePath, true, { indentSize: 2, singleQuotes: true });
             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(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));
+                    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));
                     continue;
                 }
-                componentFile.addStandaloneImport(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+                componentFile.addStandaloneComponentMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
             }
             componentFile.finalize();
             return;
@@ -79,25 +86,37 @@ 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 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
-            );
+            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();
         }
         //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);
-        this.addClassDeclaration(mainModule, projectPath, name, modulePath);
+        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
+        );
         // 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));
+                mainModule.addNgModuleMeta(copy, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
+                );
             }
             else {
-                mainModule.addNgModuleMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+                mainModule.addNgModuleMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
+                );
             }
         }
         mainModule.finalize();
@@ -109,9 +128,6 @@ 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/dock-manager/default/index.js

@@ -15,8 +15,5 @@ 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/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" });
+                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms", standalone: true });
                         // 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%>" });
+                        this.dependencies.push({ import: "IgxDatePickerComponent", from: "<%=igxPackage%>", standalone: true });
                         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" });
+                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms", standalone: true });
                         break;
                     case "Row Selection":
                         const gridFeatureText = `rowSelection="multiple"`;

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

@@ -1,27 +1,19 @@
 import { ApplicationConfig, ErrorHandler, Provider, importProvidersFrom } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { provideRouter } 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';
 
-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 }
-  ]
+// 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()
 ];
 
 if (environment.production) {

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { ApplicationConfig, Provider, importProvidersFrom } from '@angular/core';
+import { provideRouter } 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';
 
-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 }
-  ]
-};
+// 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 };

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

@@ -1,5 +1,5 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { ApplicationConfig, Provider, importProvidersFrom } from '@angular/core';
+import { provideRouter } 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';
 
-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 }
-  ]
-};
+// 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 };

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

@@ -8,6 +8,7 @@ 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";
@@ -18,8 +19,5 @@ 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/projects/_base/files/src/app/app-routing.module.ts

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

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

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

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

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

package/index.d.ts

@@ -1,4 +1,6 @@
-import * as standalone from "./igx-ts";
-export * from "./IgniteUIForAngularTemplate";
+import * as standalone from './igx-ts';
+export * from './IgniteUIForAngularTemplate';
+export * from './AngularTypeScriptFileUpdate';
+export * from './types';
 declare const _default: (typeof standalone)[];
 export default _default;

package/index.js

@@ -17,4 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const standalone = require("./igx-ts");
 const legacy = require("./igx-ts-legacy");
 __exportStar(require("./IgniteUIForAngularTemplate"), exports);
+__exportStar(require("./AngularTypeScriptFileUpdate"), exports);
+__exportStar(require("./types"), exports);
 exports.default = [standalone, legacy];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-templates",
-  "version": "18.1.1341",
+  "version": "18.1.1400-beta.2",
   "description": "Templates for Ignite UI for Angular projects and components",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "author": "Infragistics",
   "license": "MIT",
   "dependencies": {
-    "@igniteui/cli-core": "~13.4.1",
+    "@igniteui/cli-core": "~14.0.0-beta.2",
     "typescript": "~5.4.3"
   }
 }

package/types/AngularRouteEntry.d.ts

@@ -0,0 +1,6 @@
+import { RouteEntry, RouteTarget } from "@igniteui/cli-core";
+import { AngularRouteTarget } from "./index";
+/** Represents an Angular route entry in a routes collection. */
+export interface AngularRouteEntry extends Pick<RouteEntry, "value"> {
+    name: RouteTarget | AngularRouteTarget;
+}

package/types/AngularRouteEntry.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/AngularRouteLike.d.ts

@@ -0,0 +1,10 @@
+import { RouteLike, KeyValuePair } from "@igniteui/cli-core";
+/** A route member in an Angular routes collection. */
+export interface AngularRouteLike extends RouteLike {
+    /** The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'. */
+    pathMatch?: "prefix" | "full";
+    /** For lazy loaded routes - if it should load the routes' children or its component. */
+    root?: boolean;
+    /** Additional developer-defined data provided to the component via `ActivatedRoute`. */
+    data?: KeyValuePair<string>;
+}

package/types/AngularRouteLike.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/enumerations/AngularDecoratorMetaTarget.d.ts

@@ -0,0 +1,9 @@
+/** TODO: Unify this with `packages/core/types/TemplateDependency.ts` */
+/** Represents possible meta data members in an Angular decorator. */
+export interface AngularDecoratorMetaTarget {
+    imports?: string[];
+    declarations?: string[];
+    providers?: string[];
+    exports?: string[];
+    schemas?: string[];
+}

package/types/enumerations/AngularDecoratorMetaTarget.js

@@ -0,0 +1,3 @@
+"use strict";
+/** TODO: Unify this with `packages/core/types/TemplateDependency.ts` */
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/enumerations/AngularRouteTarget.d.ts

@@ -0,0 +1,10 @@
+/** Represents possible members in an Angular route object. */
+export declare enum AngularRouteTarget {
+    PathMatch = "pathMatch",
+    Root = "root",
+    Data = "data",
+    Children = "children",
+    RedirectTo = "redirectTo",
+    LoadChildren = "loadChildren",
+    LoadComponent = "loadComponent"
+}

package/types/enumerations/AngularRouteTarget.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularRouteTarget = void 0;
+/** Represents possible members in an Angular route object. */
+var AngularRouteTarget;
+(function (AngularRouteTarget) {
+    AngularRouteTarget["PathMatch"] = "pathMatch";
+    AngularRouteTarget["Root"] = "root";
+    AngularRouteTarget["Data"] = "data";
+    AngularRouteTarget["Children"] = "children";
+    AngularRouteTarget["RedirectTo"] = "redirectTo";
+    AngularRouteTarget["LoadChildren"] = "loadChildren";
+    AngularRouteTarget["LoadComponent"] = "loadComponent";
+})(AngularRouteTarget || (exports.AngularRouteTarget = AngularRouteTarget = {}));

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./enumerations/AngularDecoratorMetaTarget";
+export * from "./enumerations/AngularRouteTarget";
+export * from "./AngularRouteEntry";
+export * from "./AngularRouteLike";

package/types/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./enumerations/AngularDecoratorMetaTarget"), exports);
+__exportStar(require("./enumerations/AngularRouteTarget"), exports);
+__exportStar(require("./AngularRouteEntry"), exports);
+__exportStar(require("./AngularRouteLike"), exports);