diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index 6e7a5339a96..3ce6d9bef4e 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -489,7 +489,8 @@ const getAngularApp = (props: Props = {}) => {
     const serviceImports = code.service ? getServiceImports(code.service) : '';
     const routerModule = code.routerModule ? code.routerModule : `RouterModule.forRoot([{ path: '', component: ${componentName} }])`;
     const declarations = routeFiles && routeFiles.length ? (componentName ? routeFiles.map((r) => r.name).join(', ') + ',' + componentName : routeFiles.map((r) => r.name).join(', ')) : `${componentName}`;
-    const providers = ['MessageService', ...(code.service ? [code.service] : [])];
+    const providers = code.service && code.service.length ? code.service.map((s) => s).join(', ') : '';
+
     const app_module_ts = `import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';