Merge pull request #59 from IgniteUI/bpachilova/configure-routing-standalone

feat(routing): configure after migration to standalone

Author: ChronosSF

src/generators/SampleAssetsGenerator.ts

@@ -7,7 +7,7 @@ import { DependencyResolver } from "./../services/DependencyResolver";
 import { LiveEditingFile, SAMPLE_APP_FOLDER, SAMPLE_SRC_FOLDER } from "./misc/LiveEditingFile";
 import { TsImportsService } from "../services/TsImportsService";
 import { componentPaths, appRouting } from "../services/TsRoutingPathService";
-import { IConfigGenerator, Config, ILiveEditingOptions } from "../public";
+import { IConfigGenerator, Config, ILiveEditingOptions, RoutesConfig } from "../public";
 import { SampleDefinitionFile } from "./misc/SampleDefinitionFile";
 
 const APP_MODULE_TEMPLATE_PATH = path.join(__dirname, "../templates/app.module.ts.template");
@@ -145,7 +145,7 @@ export class SampleAssetsGenerator {
         ));
         sampleFiles.push(new LiveEditingFile(
             SAMPLE_APP_FOLDER + "app.component.html",
-            this._getAppComponentHtml(componentTsContent, config.usesRouting)));
+            this._getAppComponentHtml(componentTsContent, config.appConfig.routesConfig)));
         sampleFiles.push(new LiveEditingFile(
             `${SAMPLE_APP_FOLDER}app.config.ts`,
             this._getAppConfig(config, configImports, configAdditionalImports),
@@ -251,16 +251,19 @@ export class SampleAssetsGenerator {
     private _getAppComponentTs(config: Config, sampleFiles: LiveEditingFile[]) {
         let appComponentTemplate = fs.readFileSync(APP_COMPONENT_TEMPLATE_PATH, "utf8");
         const mainSampleTsPath = sampleFiles.filter(f => f.isMain && f.fileExtension === "ts")[0].path;
+        const importRouter = config.appConfig.routesConfig?.router ?? false;
         return appComponentTemplate
             .replace(/\{sampleAppComponent\}/g, config.component)
             .replace(/\{appImport\}/g, `.\/${mainSampleTsPath.substring(mainSampleTsPath.indexOf("app/") + 4)}`)
+            .replace(/\{routerOutlet\}/g, importRouter ? ", RouterOutlet" : "")
+            .replace(/\{routerOutletImport\}/g, importRouter ? "import { RouterOutlet } from '@angular/router';" : "")
             .replace(".ts", "");
     }
 
-    private _getAppComponentHtml(componentTsContent, usesRouting) {
+    private _getAppComponentHtml(componentTsContent, routesConfig?: RoutesConfig) {
         let selectorRegex = /selector:[\s]*["']([a-zA-Z0-9-]+)["']/g;
         let selectorComponent = selectorRegex.exec(componentTsContent)[1];
-        let appComponentHtml = usesRouting ? "<router-outlet></router-outlet>" :
+        let appComponentHtml = routesConfig?.router ? "<router-outlet></router-outlet>" :
             "<" + selectorComponent + "></" + selectorComponent + ">";
         return appComponentHtml;
     }
@@ -314,8 +317,9 @@ export class SampleAssetsGenerator {
                 }
             });
         }
-        if (appConfig.router) {
+        if (this._shouldConfigureRouting(config)) {
             importMap.set('@angular/router', ['provideRouter', 'withComponentInputBinding']);
+            importMap.set(`${appConfig.routesConfig.routesImportPath}`, ['routes']);
         }
         return importMap;
     }
@@ -351,15 +355,20 @@ export class SampleAssetsGenerator {
                 formatted += `        ${provider}${i < providers.length - 1 ? ',\n' : ''}`;
             });
         }
-        if (config.appConfig.router) {
+        if (this._shouldConfigureRouting(config)) {
             if (formatted.length > 0) {
                 formatted += ',\n';
             }
-            formatted += `        provideRouter([], withComponentInputBinding())`;
+            formatted += `        provideRouter(routes, withComponentInputBinding())`;
         }
         return formatted;
     }
 
+    private _shouldConfigureRouting(config: Config): boolean {
+        const routesConfig = config?.appConfig?.routesConfig;
+        return !!(routesConfig?.router && routesConfig?.routesImportPath);
+    }
+
     private _getAppModuleConfig(config: Config, configImports, configAdditionalImports?) {
         let defaultNgDeclarations = ["AppComponent"];
         let defaultNgImports = ["BrowserModule", "BrowserAnimationsModule", "FormsModule"];

src/public.ts

@@ -39,13 +39,12 @@ export class AppModuleConfig {
 export interface AppConfig {
     modules: ModuleProvider[];
     providers: Provider[];
-    router?: boolean;
+    routesConfig?: RoutesConfig;
     additionalAdjustments?: string[];
 }
 
 export class Config {
     public component: string;
-    public usesRouting: boolean;
     public additionalFiles: string[];
     public appModuleConfig?: AppModuleConfig;
     public appConfig: AppConfig;
@@ -106,3 +105,7 @@ export interface Provider {
     import: string
 }
 
+export interface RoutesConfig {
+    router?: boolean;
+    routesImportPath?: string;
+}

src/templates/app.component.ts.template

@@ -1,10 +1,11 @@
 import { Component } from "@angular/core";
 import { {sampleAppComponent} } from "{appImport}";
+{routerOutletImport}
 
 @Component({
     selector: "app-root",
     styleUrls: ["./app.component.scss"],
     templateUrl: "./app.component.html",
-    imports: [{sampleAppComponent}]
+    imports: [{sampleAppComponent}{routerOutlet}]
 })
 export class AppComponent {}