title: ERROR Error: Cannot insert a destroyed View in a ViewContainer
body: <p>I have designed a page generator by configuration app and it works fine and generate components and render them on the page as good as it should.</p>
  
  <p>But when i try to render a new page by new configuration, i get this error <code>ERROR Error: Cannot insert a destroyed View in a ViewContainer!</code> right when the generator service try to render the first component on the page after cleaning the page.</p>
  
  <p>The pages configuration arrives from <code>pageConfigService</code> at <code>ngOnInit</code> in <code>NemoContainerComponent</code> and error appears when <code>pageGenerator</code> try to render the <code>WidgetContainerComponent</code>.</p>
  
  <p>** UPDATE **</p>
  
  <p>Page will be generate after changing the rout, all of the routes base component is the <code>NemoContainerComponent</code> and when route changes, the <code>NemoContainerComponent</code> destroyed and created again.</p>
  
  <p>** UPDATE **</p>
  
  <p>This is <code>NemoContainerComponent</code>:</p>
  
  <pre><code>@Component({
      selector: 'nemo-container',
      templateUrl: './nemo-container.component.html',
      encapsulation: ViewEncapsulation.None
  })
  
  export class NemoContainerComponent {
  
      private subscription: Subscription = new Subscription();
  
      @ViewChild(ChildReferenceDirective) childReference: ChildReferenceDirective;
  
      constructor(
          private pageGenerator: PageGeneratorService,
          private route: ActivatedRoute,
          private routeService: RouteService,
          private router: Router,
          private storeEngine: StoreEngineService,
          private pageConfigService: PageConfigService
      ) {
          this.subscription.add(route.params.subscribe((params) =&gt; {
              this.routeService.setRouteService = params;
          }));
          let activeRoute = router.url.split('/').join(' ');
          document.body.className += ' ' + activeRoute;
      }
  
      ngOnInit() {
          this.pageGenerator.containerRef = this.childReference.viewReference;
  
          this.subscription.add(this.pageConfigService
              .get(this.route.data['value'].page)
              .subscribe(data =&gt; {
                  this.pageGenerator.renderNewPageByConfigurationFile(data.json)
              }));
      }
  
      ngOnDestroy() {
          this.subscription.unsubscribe();
      }
  }
  </code></pre>
  
  <p><code>WidgetContainerComponent</code> is here:</p>
  
  <pre><code>@Widget({
      typeName: 'widget-container',
      displayName: '',
      type: 'parent',
      settings: []
  })
  @Component({
      selector: 'widget-container',
      templateUrl: "widget-container.component.html",
      encapsulation: ViewEncapsulation.None
  })
  export class WidgetContainerComponent {
  
      @ViewChild(ChildReferenceDirective, { read: ViewContainerRef }) childRef;
  
      get childReference(): ViewContainerRef {
          return this.childRef;
      }
  
      private data: ObjectInterface = {};
      set widgetData(value: ObjectInterface) {
          for (let item in value) {
              this.data[item] = value[item];
          }
      }
      get widgetData(): ObjectInterface {
          return this.data;
      }
  
      public id: string = '';
  }
  </code></pre>
  
  <p>** UPDATE **</p>
  
  <p>angular pack version: 4.4.6</p>
  
  <p>** UPDATE **</p>
  
  <p>thanks in advance for your helps :)</p>