@igniteui/angular-templates 17.1.13115 → 17.1.13116-beta.2

package/AngularTypeScriptFileUpdate.d.ts

@@ -0,0 +1,120 @@
+import * as ts from 'typescript';
+import { KeyValuePair, TemplateDependency, IFormatSettings } from '@igniteui/cli-core';
+import { IAngularRouteLike } from './types';
+export declare class AngularTypeScriptFileUpdate {
+    private standalone;
+    private readonly astTransformer;
+    constructor(targetPath: string, standalone?: boolean, formatSettings?: IFormatSettings);
+    /**
+     * Adds a route to the Angular routing module.
+     * @param route The route to add.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addRoute(route: IAngularRouteLike, multiline?: boolean): 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 multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to prepend the new added routes.
+     * @remarks The `parentPath` is used to determine where the child route should be added.
+     */
+    addChildRoute(parentPath: string, route: IAngularRouteLike, multiline?: boolean, prepend?: boolean): ts.SourceFile;
+    /**
+     * 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;
+    /**
+     * Parses the AST and returns the resulting formatted source code.
+     * @remarks This method should be called after all modifications have been made to the AST.
+     */
+    finalize(): string;
+    /**
+     * 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;
+    /**
+     * Creates an arrow function of the form `() => import(path).then(m => m.prop)`.
+     * @param path The path to the module to import.
+     * @param importedEntity The entity to import from the module.
+     * @param root Whether it should be `loadChildren` or `loadComponent`.
+     * @remarks If the `root` param is `true` the function will use `routes` as an `importedEntity`.
+     */
+    private createDynamicImport;
+    /**
+     * Converts a string or string array union to array.
+     * @param value The value to convert.
+     * @param variables Variables to replace in the strings.
+     * @remarks Splits strings as comma delimited.
+     */
+    private asArray;
+    /**
+     * Applies a configuration transformation to a string.
+     * @param data The string to transform.
+     * @param configuration The items to replace in the string.
+     */
+    private applyConfigTransformation;
+    /**
+     * Adds a new entry to the routes array. With a component identifier and path or with redirect option.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @param anchorElement The anchor element to insert.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    private addRedirectOrSimpleRouteEntry;
+    /**
+     * 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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    private addRouteEntry;
+    /**
+     * 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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    private addRedirectRouteEntry;
+    /**
+     * 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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    private addLazyLoadedRouteEntry;
+}

package/AngularTypeScriptFileUpdate.js

@@ -0,0 +1,412 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularTypeScriptFileUpdate = void 0;
+const ts = require("typescript");
+const os_1 = require("os");
+const cli_core_1 = require("@igniteui/cli-core");
+const types_1 = require("./types");
+// TODO: consider creating a global-constants file
+const ROUTES_VARIABLE_NAME = 'routes';
+const THEN_IDENTIFIER_NAME = 'then';
+const IMPORT_IDENTIFIER_NAME = 'import';
+const NG_MODULE_DECORATOR_NAME = 'NgModule';
+const NG_SA_DECORATOR_NAME = 'Component';
+const NG_FOR_ROOT_IDENTIFIER_NAME = 'forRoot';
+// insert before node that contains this element
+const anchorElement = {
+    name: 'path',
+    value: ts.factory.createStringLiteral('**'),
+};
+const printerOptions = {
+    newLine: os_1.EOL === '\n'
+        ? ts.NewLineKind.LineFeed
+        : ts.NewLineKind.CarriageReturnLineFeed,
+};
+class AngularTypeScriptFileUpdate {
+    constructor(targetPath, standalone = false, formatSettings) {
+        this.standalone = standalone;
+        /**
+         * Applies a configuration transformation to a string.
+         * @param data The string to transform.
+         * @param configuration The items to replace in the string.
+         */
+        this.applyConfigTransformation = (data, configuration) => {
+            let key;
+            for (key in configuration) {
+                data = data.replace(new RegExp(cli_core_1.Util.escapeRegExp(key), 'g'), configuration[key]);
+            }
+            return data;
+        };
+        const sourceFile = cli_core_1.TypeScriptUtils.getFileSource(targetPath);
+        this.astTransformer = new cli_core_1.TypeScriptASTTransformer(sourceFile, new cli_core_1.FormattingService(sourceFile, null, formatSettings, printerOptions), printerOptions // TODO: may not be needed
+        );
+    }
+    //#region Public API
+    /**
+     * Adds a route to the Angular routing module.
+     * @param route The route to add.
+     * @param multiline Whether to format the new entry as multiline.
+     */
+    addRoute(route, multiline = false) {
+        const visitCondition = (node) => !!this.astTransformer.findNodeAncenstor(node, (node) => ts.isVariableDeclaration(node) &&
+            node.name.getText() === ROUTES_VARIABLE_NAME);
+        if (route.lazyload &&
+            route.path &&
+            route.identifierName &&
+            route.modulePath) {
+            return this.addLazyLoadedRouteEntry(route, visitCondition, anchorElement, multiline, true // prepend
+            );
+        }
+        return this.addRedirectOrSimpleRouteEntry(route, visitCondition, anchorElement, multiline, true // prepend
+        );
+    }
+    /**
+     * Adds a child route to a parent route.
+     * @param parentPath The path of the parent route.
+     * @param route The child route to add.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to prepend the new added routes.
+     * @remarks The `parentPath` is used to determine where the child route should be added.
+     */
+    addChildRoute(parentPath, route, multiline = false, prepend = false) {
+        // find a node that has the parent's path
+        const visitCondition = (node) => ts.isPropertyAssignment(node) &&
+            node.name.getText() === cli_core_1.RouteTarget.Path &&
+            ts.isStringLiteral(node.initializer) &&
+            node.initializer.text === parentPath;
+        const parentRoute = this.astTransformer.findPropertyAssignment(visitCondition);
+        if (!parentRoute)
+            return this.astTransformer.sourceFile;
+        const childrenKey = 'children';
+        const parentContainsChildrenKey = ts.isObjectLiteralExpression(parentRoute.parent) &&
+            parentRoute.parent.properties.find((p) => { var _a; return ts.isPropertyAssignment(p) && ((_a = p.name) === null || _a === void 0 ? void 0 : _a.getText()) === childrenKey; });
+        if (!parentContainsChildrenKey) {
+            // if the parent route does not have the children array, create it
+            this.astTransformer.addMemberToObjectLiteral((node) => ts.isObjectLiteralExpression(node) &&
+                node.properties.some(visitCondition), {
+                name: childrenKey,
+                value: this.astTransformer.createArrayLiteralExpression([], multiline),
+            });
+        }
+        if (route.lazyload &&
+            route.path &&
+            route.identifierName &&
+            route.modulePath) {
+            return this.addLazyLoadedRouteEntry(route, visitCondition, anchorElement, multiline, true // prepend
+            );
+        }
+        // add the child route to the parent's children array
+        return this.addRedirectOrSimpleRouteEntry(route, (node) => ts.isPropertyAssignment(node.parent) &&
+            node.parent.name.getText() === childrenKey &&
+            // check if the parent route is the one we're looking for
+            !!this.astTransformer.findNodeAncenstor(node, (node) => ts.isObjectLiteralExpression(node) &&
+                node.properties.some(visitCondition)), anchorElement, multiline, prepend);
+    }
+    /**
+     * 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].map((name) => ({ name }));
+            this.astTransformer.addImportDeclaration(identifiers.filter((i) => !this.astTransformer.importDeclarationCollides(i)), this.applyConfigTransformation(dep.from, variables));
+        }
+        if (copy.import.length > 0) {
+            return this.mutateNgDecoratorMeta(NG_SA_DECORATOR_NAME, copy.import, types_1.AngularDecoratorMetaTarget.Imports, multiline);
+        }
+        if (copy.provide.length > 0) {
+            return this.mutateNgDecoratorMeta(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].map((name) => ({ name }));
+            this.astTransformer.addImportDeclaration(identifiers.filter((i) => !this.astTransformer.importDeclarationCollides(i)), 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, NG_FOR_ROOT_IDENTIFIER_NAME), this.astTransformer.sourceFile));
+        }
+        if (copy.declare.length > 0) {
+            this.mutateNgDecoratorMeta(NG_MODULE_DECORATOR_NAME, copy.declare, types_1.AngularDecoratorMetaTarget.Declarations, multiline);
+        }
+        if (copy.import.length > 0) {
+            this.mutateNgDecoratorMeta(NG_MODULE_DECORATOR_NAME, copy.import, types_1.AngularDecoratorMetaTarget.Imports, multiline);
+        }
+        if (copy.provide.length > 0) {
+            this.mutateNgDecoratorMeta(NG_MODULE_DECORATOR_NAME, copy.provide, types_1.AngularDecoratorMetaTarget.Providers, multiline);
+        }
+        if (copy.export.length > 0) {
+            this.mutateNgDecoratorMeta(NG_MODULE_DECORATOR_NAME, copy.export, types_1.AngularDecoratorMetaTarget.Exports, multiline);
+        }
+        return this.astTransformer.sourceFile;
+    }
+    /**
+     * Parses the AST and returns the resulting formatted source code.
+     * @remarks This method should be called after all modifications have been made to the AST.
+     */
+    finalize() {
+        return this.astTransformer.finalize();
+    }
+    //#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.findNodeAncenstor(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) => ts.isPropertyAssignment(node) &&
+            node.name.getText() === propName &&
+            !!this.astTransformer.findNodeAncenstor(node, (node) => {
+                var _a;
+                return ts.isDecorator(node) &&
+                    ((_a = node.expression.getFirstToken()) === null || _a === void 0 ? void 0 : _a.getText()) === decoratorName;
+            }));
+    }
+    /**
+     * Creates an arrow function of the form `() => import(path).then(m => m.prop)`.
+     * @param path The path to the module to import.
+     * @param importedEntity The entity to import from the module.
+     * @param root Whether it should be `loadChildren` or `loadComponent`.
+     * @remarks If the `root` param is `true` the function will use `routes` as an `importedEntity`.
+     */
+    createDynamicImport(path, importedEntity, root = false) {
+        const thenClause = root ? ROUTES_VARIABLE_NAME : importedEntity;
+        // create the 'import(path)' expression
+        const importExpression = ts.factory.createCallExpression(ts.factory.createIdentifier(IMPORT_IDENTIFIER_NAME), undefined, // type arguments
+        [ts.factory.createStringLiteral(path)]);
+        const thenFuncParamName = 'm';
+        // create the 'm => m.prop' arrow function
+        const thenExprArrowFuncBody = ts.factory.createArrowFunction(undefined, // modifiers
+        undefined, // type parameters
+        [
+            ts.factory.createParameterDeclaration(undefined, // decorators
+            undefined, // modifiers
+            ts.factory.createIdentifier(thenFuncParamName)),
+        ], undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), ts.factory.createPropertyAccessChain(ts.factory.createIdentifier(thenFuncParamName), undefined, // question-dot token
+        thenClause));
+        // build the '.then(m => m.prop)' expression and add it to the import expression
+        const body = ts.factory.createCallExpression(ts.factory.createPropertyAccessExpression(importExpression, THEN_IDENTIFIER_NAME), undefined, // type arguments
+        [thenExprArrowFuncBody]);
+        // Create the '() => import(path).then(m => m.prop)' arrow function
+        const dynamicImport = ts.factory.createArrowFunction(undefined, // modifiers
+        undefined, // type parameters
+        [], // parameters
+        undefined, // type
+        ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), body);
+        return dynamicImport;
+    }
+    /**
+     * Converts a string or string array union to array.
+     * @param value The value to convert.
+     * @param variables Variables to replace in the strings.
+     * @remarks Splits strings as comma delimited.
+     */
+    asArray(value, variables) {
+        let result = [];
+        if (value) {
+            result = typeof value === 'string' ? value.split(/\s*,\s*/) : value;
+            result = result.map((x) => this.applyConfigTransformation(x, variables));
+        }
+        return result;
+    }
+    /**
+     * Adds a new entry to the routes array. With a component identifier and path or with redirect option.
+     * @param route The route to add.
+     * @param visitCondition The condition used to find the appropriate route node.
+     * @param anchorElement The anchor element to insert.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    addRedirectOrSimpleRouteEntry(route, visitCondition, anchorElement, multiline = false, prepend = false) {
+        var _a;
+        if (route.lazyload)
+            return this.astTransformer.sourceFile;
+        if (route.path && route.identifierName) {
+            this.addRouteEntry(route, visitCondition, anchorElement, multiline, prepend);
+        }
+        if (route.redirectTo) {
+            this.addRedirectRouteEntry(route, visitCondition, anchorElement, multiline, prepend);
+        }
+        if ((_a = route.children) === null || _a === void 0 ? void 0 : _a.length) {
+            route.children.forEach((child) => {
+                this.addChildRoute(route.path, child, multiline, false);
+            });
+        }
+        return this.astTransformer.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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    addRouteEntry(route, visitCondition, anchorElement, multiline = false, prepend = false) {
+        if (route.modulePath) {
+            // add an import for the given identifier
+            const routeIdentifier = { name: route.identifierName };
+            if (!this.astTransformer.importDeclarationCollides(routeIdentifier)) {
+                // if identifierName, there must be a modulePath as well
+                this.astTransformer.addImportDeclaration([routeIdentifier], 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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    addRedirectRouteEntry(route, visitCondition, anchorElement, multiline = false, prepend = false) {
+        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);
+    }
+    /**
+     * 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 anchorElement The anchor element to insert to.
+     * @param multiline Whether to format the new entry as multiline.
+     * @param prepend Whether to insert the new entry before the anchor element.
+     */
+    addLazyLoadedRouteEntry(route, visitCondition, anchorElement, multiline = false, prepend = false) {
+        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/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

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

@@ -99,7 +99,12 @@
 						"styles": [
 							"src/styles.scss"
 						],
-						"scripts": []
+						"scripts": [],
+            "stylePreprocessorOptions": {
+							"includePaths": [
+								"node_modules"
+							]
+						}
 					}
 				}
 			}

package/igx-ts/projects/_base_with_home/files/__dot__github/workflows/node.js.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

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/__dot__github/workflows/node.js.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

package/igx-ts-legacy/projects/_base_with_home/files/__dot__github/workflows/node.js.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

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.1.13115",
+  "version": "17.1.13116-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.1.15",
+    "@igniteui/cli-core": "~13.1.16-beta.2",
     "typescript": "~5.4.3"
   }
 }

package/types/IAngularRouteEntry.d.ts

@@ -0,0 +1,5 @@
+import { IRouteEntry, RouteTarget } from "@igniteui/cli-core";
+import { AngularRouteTarget } from "./enumerations/AngularRouteTarget";
+export interface IAngularRouteEntry extends Pick<IRouteEntry, 'value'> {
+    name: RouteTarget | AngularRouteTarget;
+}

package/types/IAngularRouteEntry.js

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

package/types/IAngularRouteLike.d.ts

@@ -0,0 +1,8 @@
+import { IRouteLike, KeyValuePair } from "@igniteui/cli-core";
+export interface IAngularRouteLike extends IRouteLike {
+    pathMatch?: 'prefix' | 'full';
+    root?: boolean;
+    data?: KeyValuePair<string>;
+    redirectTo?: string;
+    children?: IAngularRouteLike[];
+}

package/types/IAngularRouteLike.js

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

package/types/enumerations/AngularDecoratorMetaTarget.d.ts

@@ -0,0 +1,6 @@
+export declare enum AngularDecoratorMetaTarget {
+    Imports = "imports",
+    Declarations = "declarations",
+    Providers = "providers",
+    Exports = "exports"
+}

package/types/enumerations/AngularDecoratorMetaTarget.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularDecoratorMetaTarget = void 0;
+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,8 @@
+export declare enum AngularRouteTarget {
+    PathMatch = "pathMatch",
+    Root = "root",
+    Data = "data",
+    RedirectTo = "redirectTo",
+    LoadChildren = "loadChildren",
+    LoadComponent = "loadComponent"
+}

package/types/enumerations/AngularRouteTarget.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularRouteTarget = void 0;
+var AngularRouteTarget;
+(function (AngularRouteTarget) {
+    AngularRouteTarget["PathMatch"] = "pathMatch";
+    AngularRouteTarget["Root"] = "root";
+    AngularRouteTarget["Data"] = "data";
+    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 './IAngularRouteEntry';
+export * from './IAngularRouteLike';

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("./IAngularRouteEntry"), exports);
+__exportStar(require("./IAngularRouteLike"), exports);