diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
index ac335404988..7fdc9c34a56 100644
--- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
@@ -139,6 +139,11 @@ import { LazyLoadEvent } from 'primeng/api';
 import { Car } from '../../domain/car';
 import { CarService } from '../../service/carservice';
 
+interface Column {
+    field: string;
+    header: string;
+}
+
 @Component({
     selector: 'table-virtual-scroll-lazy-demo',
     templateUrl: 'table-virtual-scroll-lazy-demo.html'
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index d510f94b7f6..6e7a5339a96 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -489,7 +489,7 @@ 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 app_module_ts = `import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -696,7 +696,7 @@ ${serviceImports}
     ${routerModule}],
     declarations: [ ${declarations} ],
     bootstrap: [ ${componentName} ],
-    providers: [ MessageService ]
+    providers: [ ${providers} ]
 })
 
 export class AppModule {}`;