"ERROR Error: 'tree-viewport' is not a known element" error with Angular 9.0.0-rc.3

[PDavid]

Hi,

First of all thanks for this great library! I use your tree component in my application and it is really-really nice! 👍

The error:

When I try to use the tree component (Getting Started from docs: https://angular2-tree.readme.io/docs/) with Angular 9 rc3 version and run ng serve, the tree component is not displayed in the browser and the browser console contains the following error:

core.js:3793 ERROR Error: 'tree-viewport' is not a known element:
1. If 'tree-viewport' is an Angular component, then verify that it is part of this module.
2. If 'tree-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    at validateElement (core.js:15953)
    at Module.ɵɵelementStart (core.js:15792)
    at TreeComponent_Template (tree.component.js:245)
    at executeTemplate (core.js:8831)
    at renderView (core.js:8671)
    at renderComponent (core.js:9773)
    at renderChildComponents (core.js:8532)
    at renderView (core.js:8696)
    at renderComponent (core.js:9773)
    at renderChildComponents (core.js:8532)

Reproduce

Unfortunately I was not able to reproduce the issue with stackblitz, but with my local Angular CLI generated projects this happens always. (I generated a new project just for this and upgraded it to Angular 9 rc3) The issue is also reproducible when I download this stackblitz project: https://stackblitz.com/edit/angular-ejnnyz

Additional Info

• paste your package.json

  {
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
  "@angular/animations": "~9.0.0-rc.3",
  "@angular/common": "~9.0.0-rc.3",
  "@angular/compiler": "~9.0.0-rc.3",
  "@angular/core": "~9.0.0-rc.3",
  "@angular/forms": "~9.0.0-rc.3",
  "@angular/platform-browser": "~9.0.0-rc.3",
  "@angular/platform-browser-dynamic": "~9.0.0-rc.3",
  "@angular/router": "~9.0.0-rc.3",
  "angular-tree-component": "^8.5.1",
  "core-js": "^2.4.1",
  "rxjs": "~6.5.3",
  "tslib": "^1.10.0",
  "zone.js": "~0.10.2"
  },
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "~0.900.0-rc.3",
  "@angular/cli": "~9.0.0-rc.3",
  "@angular/compiler-cli": "~9.0.0-rc.3",
  "@angular/language-service": "~9.0.0-rc.3",
  "@types/node": "~8.9.4",
  "@types/jasmine": "~3.3.8",
  "@types/jasminewd2": "~2.0.3",
  "codelyzer": "^5.0.0",
  "jasmine-core": "~3.4.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~4.1.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-jasmine": "~2.0.1",
  "karma-jasmine-html-reporter": "^1.4.0",
  "protractor": "~5.4.0",
  "ts-node": "~7.0.0",
  "tslint": "~5.15.0",
  "typescript": "~3.6.4"
  }
  }

• which browser Google Chrome Version 78.0.3904.108 (Official Build) (64-bit) (Also have the issue with: Mozilla Firefox 70.0.1 (32-bit)).
• app.module.ts

  
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import {TreeModule} from 'angular-tree-component';
  import { AppComponent } from './app.component';

@NgModule({ imports: [ BrowserModule, TreeModule.forRoot() ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

- app.component.ts

import { Component } from '@angular/core';

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { nodes = [ {name: 'Root1', children:[ {name: 'Child1'} ]} ]; options = {} }

- app.component.html

Tree

<tree-root [nodes]="nodes" [options]="options">

- My environment:

$ ng --version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | ' \ / | | | | |/ _ | '| | | | | | | / _ | | | | (| | || | | (| | | | || |_ | | // __| ||_, |_,||_,|| __|__|| |/

Angular CLI: 9.0.0-rc.3 Node: 12.13.0 OS: win32 x64 Angular: 9.0.0-rc.3 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.900.0-rc.3 @angular-devkit/build-angular 0.900.0-rc.3 @angular-devkit/build-optimizer 0.900.0-rc.3 @angular-devkit/build-webpack 0.900.0-rc.3 @angular-devkit/core 9.0.0-rc.3 @angular-devkit/schematics 9.0.0-rc.3 @ngtools/webpack 9.0.0-rc.3 @schematics/angular 9.0.0-rc.3 @schematics/update 0.900.0-rc.3 rxjs 6.5.3 typescript 3.6.4 webpack 4.41.2

I know that Angular 9 is not stable yet (only in release candidate) but I try to migrate to it to catch any incompatibilities the project might have.

Any help is greatly appreciated!

[elvisbegovic]

@PDavid this should be solved here https://github.com/500tech/angular-tree-component/pull/771

As workaround you can follow https://github.com/angular/angular/issues/33685#issuecomment-557131112

[PDavid]

Thanks @elvisbegovic!