@igniteui/angular-templates 17.2.1321 → 17.2.1322-beta.1

package/AngularTypeScriptFileUpdate.d.ts

@@ -0,0 +1,93 @@
+import * as ts from 'typescript';
+import { KeyValuePair, FormatSettings, PropertyAssignment, TemplateDependency, TypeScriptFileUpdate } from '@igniteui/cli-core';
+import { AngularRouteLike } from './types';
+export declare class AngularTypeScriptFileUpdate extends TypeScriptFileUpdate {
+    protected targetPath: string;
+    private standalone;
+    constructor(targetPath: 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): ts.SourceFile;
+    /**
+     * Adds a child route to a parent route.
+     * @param parentPath The path of the parent route.
+     * @param route The child route to add.
+     * @param asIdentifier Whether to initialize the {@link RouteTarget.Children} member with an identifier or an array literal.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to prepend the new added routes.
+     * @param anchorElement The anchor element to insert to.
+     * @remarks The `parentPath` is used to determine where the child route should be added.
+     */
+    addChildRoute(parentPath: string, route: AngularRouteLike, asIdentifier?: boolean, multiline?: boolean, prepend?: boolean, anchorElement?: PropertyAssignment): ts.SourceFile;
+    /** // TODO: update description
+     * 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): ts.SourceFile;
+    /**
+     * 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): ts.SourceFile;
+    /**
+     * Adds a new not lazy-loaded route entry to the routes array. With a component identifier and path.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    protected addRouteEntry(route: AngularRouteLike, visitCondition: (node: ts.Node) => boolean, multiline: boolean, prepend: boolean, anchorElement: PropertyAssignment): ts.SourceFile;
+    /**
+     * Adds a new not lazy-loaded route entry to the routes array. With a redirect option.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    protected addRedirectRouteEntry(route: AngularRouteLike, visitCondition: (node: ts.Node) => boolean, multiline: boolean, prepend: boolean, anchorElement: PropertyAssignment): ts.SourceFile;
+    /**
+     * 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;
+    /**
+     * Adds a new lazy-loaded route entry to the routes array.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    private addLazyLoadedRouteEntry;
+}

package/AngularTypeScriptFileUpdate.js

@@ -0,0 +1,296 @@
+"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 {
+    constructor(targetPath, standalone = false, formatSettings) {
+        super(targetPath, formatSettings);
+        this.targetPath = targetPath;
+        this.standalone = standalone;
+    }
+    //#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 &&
+            route.path &&
+            route.identifierName &&
+            route.modulePath) {
+            return this.addLazyLoadedRouteEntry(route, (0, cli_core_1.RoutesVariableAsParentCondition)(this.astTransformer), multiline, prepend, anchorElement);
+        }
+        return this.addRedirectOrSimpleRouteEntry(route, (0, cli_core_1.RoutesVariableAsParentCondition)(this.astTransformer), multiline, prepend, anchorElement);
+    }
+    /**
+     * Adds a child route to a parent route.
+     * @param parentPath The path of the parent route.
+     * @param route The child route to add.
+     * @param asIdentifier Whether to initialize the {@link RouteTarget.Children} member with an identifier or an array literal.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to prepend the new added routes.
+     * @param anchorElement The anchor element to insert to.
+     * @remarks The `parentPath` is used to determine where the child route should be added.
+     */
+    addChildRoute(parentPath, route, asIdentifier = false, multiline = false, prepend = false, anchorElement = cli_core_1.ANCHOR_ELEMENT) {
+        if (route.lazyload &&
+            route.path &&
+            route.identifierName &&
+            route.modulePath) {
+            return this.addLazyLoadedRouteEntry(route, (0, cli_core_1.PropertyAssignmentWithStringLiteralValueCondition)(cli_core_1.RouteTarget.Path, parentPath), multiline, true, // prepend
+            cli_core_1.ANCHOR_ELEMENT);
+        }
+        return super.addChildRoute(parentPath, route, asIdentifier, multiline, prepend, anchorElement);
+    }
+    /** // TODO: update description
+     * 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 this.astTransformer.sourceFile;
+        const copy = {
+            import: this.asArray(dep.import || [], variables || {}),
+            provide: this.asArray(dep.provide || [], variables || {}),
+        };
+        if (dep.from) {
+            // add an import declaration for the dependency
+            const uniqueIdentifiers = new Set([
+                ...copy.import,
+                ...copy.provide,
+            ]);
+            const identifiers = [...uniqueIdentifiers]
+                .filter((name) => !this.astTransformer.importDeclarationCollides({ name }))
+                .map((name) => ({ name }));
+            this.astTransformer.addImportDeclaration({
+                identifiers,
+                moduleName: this.applyConfigTransformation(dep.from, variables),
+            });
+        }
+        if (copy.import.length > 0) {
+            return this.mutateNgDecoratorMeta(cli_core_1.NG_SA_DECORATOR_NAME, copy.import, types_1.AngularDecoratorMetaTarget.Imports, multiline);
+        }
+        if (copy.provide.length > 0) {
+            return this.mutateNgDecoratorMeta(cli_core_1.NG_SA_DECORATOR_NAME, copy.provide, types_1.AngularDecoratorMetaTarget.Providers, multiline);
+        }
+        return this.astTransformer.sourceFile;
+    }
+    /**
+     * 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 this.astTransformer.sourceFile;
+        const copy = {
+            import: this.asArray(dep.import || [], variables || {}),
+            declare: this.asArray(dep.declare || [], variables || {}),
+            provide: this.asArray(dep.provide || [], variables || {}),
+            export: this.asArray(dep.export || [], variables || {}),
+        };
+        if (dep.from) {
+            // add an import declaration for the dependency
+            const uniqueIdentifiers = new Set([
+                ...copy.import,
+                ...copy.declare,
+                ...copy.provide,
+                ...copy.export,
+            ]);
+            const identifiers = [...uniqueIdentifiers]
+                .filter((name) => !this.astTransformer.importDeclarationCollides({ name }))
+                .map((name) => ({ name }));
+            this.astTransformer.addImportDeclaration({
+                identifiers,
+                moduleName: this.applyConfigTransformation(dep.from, variables),
+            });
+        }
+        if (dep.root && copy.import.length > 0) {
+            // add forRoot to the module
+            copy.import = copy.import.map((i) => this.astTransformer.printer.printNode(ts.EmitHint.Unspecified, this.astTransformer.createCallExpression(i, cli_core_1.NG_FOR_ROOT_IDENTIFIER_NAME), this.astTransformer.sourceFile));
+        }
+        if (copy.declare.length > 0) {
+            this.mutateNgDecoratorMeta(cli_core_1.NG_MODULE_DECORATOR_NAME, copy.declare, types_1.AngularDecoratorMetaTarget.Declarations, multiline);
+        }
+        if (copy.import.length > 0) {
+            this.mutateNgDecoratorMeta(cli_core_1.NG_MODULE_DECORATOR_NAME, copy.import, types_1.AngularDecoratorMetaTarget.Imports, multiline);
+        }
+        if (copy.provide.length > 0) {
+            this.mutateNgDecoratorMeta(cli_core_1.NG_MODULE_DECORATOR_NAME, copy.provide, types_1.AngularDecoratorMetaTarget.Providers, multiline);
+        }
+        if (copy.export.length > 0) {
+            this.mutateNgDecoratorMeta(cli_core_1.NG_MODULE_DECORATOR_NAME, copy.export, types_1.AngularDecoratorMetaTarget.Exports, multiline);
+        }
+        return this.astTransformer.sourceFile;
+    }
+    //#endregion
+    //#region Protected Overrides
+    /**
+     * Adds a new not lazy-loaded route entry to the routes array. With a component identifier and path.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    addRouteEntry(route, visitCondition, multiline = false, prepend = false, anchorElement) {
+        if (route.modulePath) {
+            // add an import for the given identifier
+            const routeIdentifier = { name: route.identifierName };
+            if (!this.astTransformer.importDeclarationCollides(routeIdentifier)) {
+                // if there is an identifierName, there must be a modulePath as well
+                this.astTransformer.addImportDeclaration({
+                    identifiers: routeIdentifier,
+                    moduleName: route.modulePath,
+                });
+            }
+        }
+        const structure = [
+            {
+                name: cli_core_1.RouteTarget.Path,
+                value: ts.factory.createStringLiteral(route.path),
+            },
+            {
+                name: cli_core_1.RouteTarget.Component,
+                value: ts.factory.createIdentifier(route.identifierName),
+            },
+        ];
+        if (route.data) {
+            structure.push({
+                name: types_1.AngularRouteTarget.Data,
+                value: this.astTransformer.createObjectLiteralExpression([route.data], multiline, ts.factory.createStringLiteral),
+            });
+        }
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        return this.astTransformer.addMembersToArrayLiteral(visitCondition, [newRoute], prepend, anchorElement);
+    }
+    /**
+     * Adds a new not lazy-loaded route entry to the routes array. With a redirect option.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    addRedirectRouteEntry(route, visitCondition, multiline = false, prepend = false, anchorElement) {
+        const structure = [
+            {
+                name: cli_core_1.RouteTarget.Path,
+                value: ts.factory.createStringLiteral(route.path || ''),
+            },
+            {
+                name: types_1.AngularRouteTarget.RedirectTo,
+                value: ts.factory.createStringLiteral(route.redirectTo),
+            },
+        ];
+        if (route.pathMatch) {
+            structure.push({
+                name: types_1.AngularRouteTarget.PathMatch,
+                value: ts.factory.createStringLiteral(route.pathMatch),
+            });
+        }
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        return this.astTransformer.addMembersToArrayLiteral(visitCondition, [newRoute], prepend, anchorElement);
+    }
+    //#endregion
+    //#region Internals
+    /**
+     * 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);
+        if (!targetMetaProp) {
+            return this.astTransformer.addMemberToObjectLiteral((node) => this.checkNgDecorator(name, node), {
+                name: target,
+                value: this.astTransformer.createArrayLiteralExpression(identifiers, multiline),
+            });
+        }
+        if (ts.isArrayLiteralExpression(targetMetaProp.initializer)) {
+            // prop assignment of the form { member: [...] }
+            // store to avoid second type check due to different context in the filter
+            const elementsAsNodeArray = targetMetaProp.initializer.elements;
+            const elementsToAdd = identifiers.filter((i) => !elementsAsNodeArray.some((el) => el.getText() === i.text));
+            return this.astTransformer.addMembersToArrayLiteral((node) => ts.isPropertyAssignment(node.parent) &&
+                node.parent.name.getText() === target &&
+                this.checkNgDecorator(name, node), elementsToAdd);
+        }
+        // prop assignment of the form { member: <some-val> }
+        return this.astTransformer.updateObjectLiteralMember((node) => this.checkNgDecorator(name, node), {
+            name: target,
+            value: this.astTransformer.createArrayLiteralExpression([targetMetaProp.initializer, ...identifiers], 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) {
+        return !!this.astTransformer.findNodeAncestor(node, (node) => {
+            var _a;
+            return ts.isDecorator(node) &&
+                ((_a = node.expression.getFirstToken()) === null || _a === void 0 ? void 0 : _a.getText()) === 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) {
+        return this.astTransformer.findPropertyAssignment((node) => node.name.getText() === propName &&
+            !!this.astTransformer.findNodeAncestor(node, (node) => {
+                var _a;
+                return ts.isDecorator(node) &&
+                    ((_a = node.expression.getFirstToken()) === null || _a === void 0 ? void 0 : _a.getText()) === decoratorName;
+            }));
+    }
+    /**
+     * Adds a new lazy-loaded route entry to the routes array.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @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.
+     */
+    addLazyLoadedRouteEntry(route, visitCondition, multiline = false, prepend = false, anchorElement) {
+        const lazyLoadedModule = this.createDynamicImport(route.modulePath, route.identifierName, route.root);
+        const propAssignmentName = route.root
+            ? types_1.AngularRouteTarget.LoadChildren
+            : types_1.AngularRouteTarget.LoadComponent;
+        const structure = [
+            {
+                name: cli_core_1.RouteTarget.Path,
+                value: ts.factory.createStringLiteral(route.path),
+            },
+            { name: propAssignmentName, value: lazyLoadedModule },
+        ];
+        if (route.data) {
+            structure.push({
+                name: types_1.AngularRouteTarget.Data,
+                value: this.astTransformer.createObjectLiteralExpression([route.data], multiline, ts.factory.createStringLiteral),
+            });
+        }
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        return this.astTransformer.addMembersToArrayLiteral(visitCondition, [newRoute], prepend, anchorElement);
+    }
+}
+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,32 +47,46 @@ 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 });
+                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
+                });
+                const content = rountesConfig.finalize();
+                if (content) {
+                    // add to a finalize override in the NG File Update instead?
+                    cli_core_1.TypeScriptUtils.saveFile(routesConfigPath, content);
+                }
             }
-            const componentFile = new TsUpdate(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`));
+            const componentFile = new TsUpdate(componentFilePath, true, { indentSize: 2 });
             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));
+            }
+            const content = componentFile.finalize();
+            if (content) {
+                // add to a finalize override in the NG File Update instead?
+                cli_core_1.TypeScriptUtils.saveFile(componentFilePath, content);
             }
-            componentFile.finalize();
             return;
         }
         // ngModule based components
@@ -79,15 +94,28 @@ 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 });
+            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
+            });
+            const content = routingModule.finalize();
+            if (content) {
+                // add to a finalize override in the NG File Update instead?
+                cli_core_1.TypeScriptUtils.saveFile(routingModulePath, content);
+            }
         }
         //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 });
+        mainModule.addNgModuleMeta({
+            declare: this.addAsNgModelDeclaration ? [className] : [],
+            from: cli_core_1.Util.relativePath(mainModulePath, componentFilePath, true, true),
+            export: modulePath !== "app.module.ts" ? [className] : []
+        });
         // import IgxModules and other dependencies
         for (const dep of this.dependencies) {
             if (dep.from && dep.from.startsWith(".")) {
@@ -100,7 +128,11 @@ class IgniteUIForAngularTemplate {
                 mainModule.addNgModuleMeta(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
             }
         }
-        mainModule.finalize();
+        const content = mainModule.finalize();
+        if (content) {
+            // add to a finalize override in the NG File Update instead?
+            cli_core_1.TypeScriptUtils.saveFile(mainModulePath, content);
+        }
     }
     getExtraConfiguration() {
         return [];
@@ -109,9 +141,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-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/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": "17.2.1321",
+  "version": "17.2.1322-beta.1",
   "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.2.1",
+    "@igniteui/cli-core": "~13.2.2-beta.1",
     "typescript": "~5.4.3"
   }
 }

package/types/AngularRouteEntry.d.ts

@@ -0,0 +1,6 @@
+import { RouteEntry, RouteTarget } from "@igniteui/cli-core";
+import { AngularRouteTarget } from "./enumerations/AngularRouteTarget";
+/** 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,12 @@
+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>;
+    /** An array of child `Route` objects that specifies a nested route configuration. */
+    children?: AngularRouteLike | AngularRouteLike[];
+}

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,7 @@
+/** Represents possible meta data members in an Angular decorator. */
+export declare enum AngularDecoratorMetaTarget {
+    Imports = "imports",
+    Declarations = "declarations",
+    Providers = "providers",
+    Exports = "exports"
+}

package/types/enumerations/AngularDecoratorMetaTarget.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularDecoratorMetaTarget = void 0;
+/** Represents possible meta data members in an Angular decorator. */
+var AngularDecoratorMetaTarget;
+(function (AngularDecoratorMetaTarget) {
+    AngularDecoratorMetaTarget["Imports"] = "imports";
+    AngularDecoratorMetaTarget["Declarations"] = "declarations";
+    AngularDecoratorMetaTarget["Providers"] = "providers";
+    AngularDecoratorMetaTarget["Exports"] = "exports";
+})(AngularDecoratorMetaTarget || (exports.AngularDecoratorMetaTarget = AngularDecoratorMetaTarget = {}));

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);