diff --git a/src/generators/SampleAssetsGenerator.ts b/src/generators/SampleAssetsGenerator.ts index edf03f8..cb8deae 100644 --- a/src/generators/SampleAssetsGenerator.ts +++ b/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 ? "" : + let appComponentHtml = routesConfig?.router ? "" : "<" + 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"]; diff --git a/src/public.ts b/src/public.ts index 19cafdc..868ed35 100644 --- a/src/public.ts +++ b/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; +} diff --git a/src/templates/app.component.ts.template b/src/templates/app.component.ts.template index 0c7a514..69342eb 100644 --- a/src/templates/app.component.ts.template +++ b/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 {} \ No newline at end of file