fix(schematics): tree schematic not working (#12281)

src/lib/schematics/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -4,15 +4,18 @@ import { of as observableOf } from 'rxjs';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { files } from './example-data';
 
-/** File node data with nested structure. */
+/** File node data with possible child nodes. */
 export interface FileNode {
   name: string;
   type: string;
   children?: FileNode[];
 }
 
-/** Flat node with expandable and level information */
-export interface TreeNode {
+/**
+ * Flattened tree node that has been created from a FileNode through the flattener. Flattened
+ * nodes include level index and whether they can be expanded or not.
+ */
+export interface FlatTreeNode {
   name: string;
   type: string;
   level: number;
@@ -37,22 +40,22 @@ export interface TreeNode {
 export class <%= classify(name) %>Component {
 
   /** The TreeControl controls the expand/collapse state of tree nodes.  */
-  treeControl: FlatTreeControl<TreeNode>;
+  treeControl: FlatTreeControl<FlatTreeNode>;
 
   /** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
-  treeFlattener: MatTreeFlattener<FileNode, TreeNode>;
+  treeFlattener: MatTreeFlattener<FileNode, FlatTreeNode>;
 
   /** The MatTreeFlatDataSource connects the control and flattener to provide data. */
-  dataSource: MatTreeFlatDataSource<FileNode, TreeNode>;
+  dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>;
 
   constructor() {
     this.treeFlattener = new MatTreeFlattener(
       this.transformer,
       this.getLevel,
       this.isExpandable,
       this.getChildren);
-  
-    this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
+
+    this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     this.dataSource.data = files;
   }
@@ -67,23 +70,23 @@ export class <%= classify(name) %>Component {
     };
   }
 
- /** Get the level of the node */
-  getLevel(node: TreeNode) {
+  /** Get the level of the node */
+  getLevel(node: FlatTreeNode) {
     return node.level;
   }
 
   /** Get whether the node is expanded or not. */
-  isExpandable(node: TreeNode) {
+  isExpandable(node: FlatTreeNode) {
     return node.expandable;
   };
 
+  /** Get whether the node has children or not. */
+  hasChild(index: number, node: FlatTreeNode) {
+    return node.expandable;
+  }
+
   /** Get the children for the node. */
   getChildren(node: FileNode) {
     return observableOf(node.children);
   }
-
-  /** Get whether the node has children or not. */
-  hasChild(index: number, node: TreeNode){
-    return node.expandable;
-  }
 }

src/lib/schematics/tree/files/__path__/__name@dasherize@if-flat__/example-data.ts

@@ -10,6 +10,7 @@ export const files = [
         children: [
           {
             name: 'cdk',
+            type: 'folder',
             children: [
               { name: 'package.json', type: 'file' },
               { name: 'BUILD.bazel', type: 'file' },