diff --git a/src/app/shared/stackblitz/stackblitz-writer.ts b/src/app/shared/stackblitz/stackblitz-writer.ts index 2c528c49e..4b16791ce 100644 --- a/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/src/app/shared/stackblitz/stackblitz-writer.ts @@ -153,9 +153,30 @@ export class StackblitzWriter { fileContent = fileContent.replace(/{{version}}/g, VERSION.full); } else if (fileName == 'main.ts') { // Replace the component name in `main.ts`. - // For example, `import {MaterialDocsExample} from 'material-docs-example'` + // Replace `import {MaterialDocsExample} from 'material-docs-example'` // will be replaced as `import {ButtonDemo} from './button-demo'` - fileContent = fileContent.replace(/MaterialDocsExample/g, data.componentName); + fileContent = fileContent.replace(/{MaterialDocsExample}/g, `{${data.componentName}}`); + + // Replace `declarations: [MaterialDocsExample]` + // will be replaced as `declarations: [ButtonDemo]` + fileContent = fileContent. + replace(/declarations: \[MaterialDocsExample\]/g, + `declarations: [${data.componentName}]`); + + // Replace `entryComponents: [MaterialDocsExample]` + // will be replaced as `entryComponents: [DialogContent]` + fileContent = fileContent. + replace(/entryComponents: \[MaterialDocsExample\]/g, + `entryComponents: [${data.componentName}]`); + + // Replace `bootstrap: [MaterialDocsExample]` + // will be replaced as `bootstrap: [ButtonDemo]` + // This assumes the first component listed in the main component + const componentList = data.componentName.split(',')[0]; + fileContent = fileContent. + replace(/bootstrap: \[MaterialDocsExample\]/g, + `bootstrap: [${componentList}]`); + fileContent = fileContent.replace(/material-docs-example/g, data.indexFilename); } return fileContent; diff --git a/src/assets/stackblitz/main.ts b/src/assets/stackblitz/main.ts index eb7ef4039..598ec3d00 100644 --- a/src/assets/stackblitz/main.ts +++ b/src/assets/stackblitz/main.ts @@ -80,7 +80,6 @@ import {CdkTableModule} from '@angular/cdk/table'; export class DemoMaterialModule {} @NgModule({ - imports: [ BrowserModule, BrowserAnimationsModule, @@ -90,7 +89,7 @@ export class DemoMaterialModule {} MatNativeDateModule, ReactiveFormsModule, ], - + entryComponents: [MaterialDocsExample], declarations: [MaterialDocsExample], bootstrap: [MaterialDocsExample], providers: []