fix(stackblitz): drag and drop examples not working (angular#522)

* Since the `DragDropModule` is not added to the StackBlitz template, the drag & drop examples don't work if opened in StackBlitz.
* Moves the `DemoMaterialModule` into a separate file because having one big files is confusing and makes it hard to debug the StackBlitz.

Author: devversion

src/app/shared/stackblitz/stackblitz-writer.spec.ts

@@ -74,7 +74,7 @@ describe('StackblitzWriter', () => {
     }
     flushMicrotasks();
 
-    expect(form.elements.length).toBe(14);
+    expect(form.elements.length).toBe(15);
 
     // Should have correct tags
     expect(form.elements[0].getAttribute('name')).toBe('tags[0]');
@@ -96,9 +96,10 @@ describe('StackblitzWriter', () => {
     expect(form.elements[8].getAttribute('name')).toBe('files[polyfills.ts]');
     expect(form.elements[9].getAttribute('name')).toBe('files[.angular-cli.json]');
     expect(form.elements[10].getAttribute('name')).toBe('files[main.ts]');
-    expect(form.elements[11].getAttribute('name')).toBe('files[app/test.ts]');
-    expect(form.elements[12].getAttribute('name')).toBe('files[app/test.html]');
-    expect(form.elements[13].getAttribute('name')).toBe('files[app/src/detail.ts]');
+    expect(form.elements[11].getAttribute('name')).toBe('files[material-module.ts]');
+    expect(form.elements[12].getAttribute('name')).toBe('files[app/test.ts]');
+    expect(form.elements[13].getAttribute('name')).toBe('files[app/test.html]');
+    expect(form.elements[14].getAttribute('name')).toBe('files[app/src/detail.ts]');
   }));
 });
 
@@ -115,6 +116,7 @@ const TEST_URLS = [
   '/assets/stackblitz/polyfills.ts',
   '/assets/stackblitz/.angular-cli.json',
   '/assets/stackblitz/main.ts',
+  '/assets/stackblitz/material-module.ts',
   'http://material.angular.io/test.ts',
   'http://material.angular.io/test.html',
   'http://material.angular.io/src/detail.ts',

src/app/shared/stackblitz/stackblitz-writer.ts

@@ -18,7 +18,8 @@ const TEMPLATE_FILES = [
   'styles.css',
   'polyfills.ts',
   '.angular-cli.json',
-  'main.ts'
+  'main.ts',
+  'material-module.ts',
 ];
 
 const TAGS: string[] = ['angular', 'material', 'example'];

src/assets/stackblitz/main.ts

@@ -1,94 +1,15 @@
 import './polyfills';
 
-import {CdkTableModule} from '@angular/cdk/table';
-import {CdkTreeModule} from '@angular/cdk/tree';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {
-  MatAutocompleteModule,
-  MatBadgeModule,
-  MatBottomSheetModule,
-  MatButtonModule,
-  MatButtonToggleModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatChipsModule,
-  MatDatepickerModule,
-  MatDialogModule,
-  MatDividerModule,
-  MatExpansionModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatNativeDateModule,
-  MatPaginatorModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatRippleModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSliderModule,
-  MatSlideToggleModule,
-  MatSnackBarModule,
-  MatSortModule,
-  MatStepperModule,
-  MatTableModule,
-  MatTabsModule,
-  MatToolbarModule,
-  MatTooltipModule,
-  MatTreeModule,
-} from '@angular/material';
+import {MatNativeDateModule} from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MaterialDocsExample} from './app/material-docs-example';
+import {DemoMaterialModule} from './material-module';
 
-@NgModule({
-  exports: [
-    CdkTableModule,
-    CdkTreeModule,
-    MatAutocompleteModule,
-    MatBadgeModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatChipsModule,
-    MatStepperModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatExpansionModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatTableModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatTreeModule,
-  ]
-})
-export class DemoMaterialModule {}
+import {MaterialDocsExample} from './app/material-docs-example';
 
 @NgModule({
   imports: [

src/assets/stackblitz/material-module.ts

@@ -0,0 +1,85 @@
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CdkTableModule} from '@angular/cdk/table';
+import {CdkTreeModule} from '@angular/cdk/tree';
+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatBadgeModule,
+  MatBottomSheetModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatStepperModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatTreeModule,
+} from '@angular/material';
+
+@NgModule({
+  exports: [
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+  ]
+})
+export class DemoMaterialModule {}