search

valor-software / ng2-tree

Angular tree component
http://valor-software.com/ng2-tree/index.html
MIT License
348 stars 190 forks source link

Error if I import TreeModel #26

Closed nicolaskaco closed 7 years ago

nicolaskaco commented 7 years ago

Hi, I've added this package to my project, and if I leave this line without // it destroys the whole project :(

This line destroys everything:

import { TreeModel } from 'ng2-tree';

And this is the error it produces:

severity: 'Error' message: 'Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'boolean'.'

If I comment the import line the error banishes.

Thanks for your help @SergeyKuryatnick !

nicolaskaco commented 7 years ago

For the error Observable to go, I have to comment the line I put before AND my file treeview.module.ts that has these imports:

import { NgModule } from '@angular/core'; import { TreeviewComponent } from './treeview.component'; import { BrowserModule } from '@angular/platform-browser'; import { TreeModule } from 'ng2-tree';

nicolaskaco commented 7 years ago

I still have that issue but now if I put the name of the html in templateUrl instead of the html code I get the following:

Unhandled Promise rejection: Template parse errors: Can't bind to 'tree' since it isn't a known property of 'tree'. ("<tree [ERROR ->][tree]="tree">"): TreeviewComponent@0:6 'tree' is not a known element:

  1. If 'tree' is an Angular component, then verify that it is part of this module.
  2. If 'tree' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<tree [tree]="tree">"):

Here is my package.json:

"devDependencies": {
    "@angular/service-worker": "0.4.0",
    "@types/ace": "0.0.32",
    "@types/async": "2.0.32",
    "@types/bluebird": "3.0.35",
    "@types/body-parser": "0.0.33",
    "@types/browser-sync": "0.0.34",
    "@types/chalk": "0.4.31",
    "@types/chokidar": "1.4.29",
    "@types/compression": "0.0.33",
    "@types/cookie-parser": "1.3.30",
    "@types/core-js": "0.9.34",
    "@types/express": "4.0.33",
    "@types/geoip-lite": "1.1.29",
    "@types/glob": "5.0.30",
    "@types/gulp": "3.8.32",
    "@types/gulp-gzip": "0.0.29",
    "@types/gulp-load-plugins": "0.0.28",
    "@types/gulp-protractor": "1.0.29",
    "@types/gulp-sass": "0.0.29",
    "@types/gulp-shell": "0.0.29",
    "@types/gulp-util": "3.0.29",
    "@types/hammerjs": "2.0.33",
    "@types/highcharts": "4.2.37",
    "@types/jasmine": "2.5.36",
    "@types/jsonwebtoken": "7.1.33",
    "@types/lodash": "4.14.37",
    "@types/log4js": "0.0.32",
    "@types/micromatch": "2.3.29",
    "@types/mime": "0.0.29",
    "@types/minimatch": "2.0.29",
    "@types/moment-timezone": "0.2.32",
    "@types/mssql": "3.1.29",
    "@types/node": "6.0.46",
    "@types/node-uuid": "0.0.28",
    "@types/orchestrator": "0.0.30",
    "@types/parse-glob": "3.0.29",
    "@types/protractor": "1.5.20",
    "@types/q": "0.0.31",
    "@types/redis": "0.12.32",
    "@types/request": "0.0.31",
    "@types/request-promise": "3.0.32",
    "@types/rimraf": "0.0.28",
    "@types/run-sequence": "0.0.28",
    "@types/selenium-webdriver": "2.44.29",
    "@types/serve-static": "1.7.31",
    "@types/stack-trace": "0.0.28",
    "@types/systemjs": "0.19.31",
    "@types/through2": "2.0.31",
    "@types/ua-parser-js": "0.7.30",
    "@types/validator": "5.7.35",
    "@types/vinyl": "1.2.30",
    "@types/vinyl-source-stream": "0.0.28",
    "@types/yargs": "0.0.33",
    "@types/zone.js": "0.0.27",
    "async": "2.1.2",
    "autoprefixer": "6.5.1",
    "browser-sync": "2.17.5",
    "codelyzer": "0.0.25",
    "colorguard": "1.2.0",
    "concurrently": "3.1.0",
    "connect": "3.5.0",
    "connect-history-api-fallback": "1.3.0",
    "connect-livereload": "0.5.4",
    "cssnano": "3.8.0",
    "deep-extend": "0.4.1",
    "doiuse": "2.5.0",
    "event-stream": "3.3.4",
    "express-history-api-fallback": "2.0.0",
    "extend": "3.0.0",
    "gulp": "3.9.1",
    "gulp-cached": "1.1.0",
    "gulp-clean-css": "2.0.13",
    "gulp-concat": "2.6.0",
    "gulp-concat-css": "2.3.0",
    "gulp-count": "0.3.0",
    "gulp-filter": "4.0.0",
    "gulp-gzip": "1.4.0",
    "gulp-inject": "4.1.0",
    "gulp-inline-ng2-template": "2.1.0",
    "gulp-insert": "0.5.0",
    "gulp-json-editor": "2.2.1",
    "gulp-load-plugins": "1.4.0",
    "gulp-plumber": "1.1.0",
    "gulp-postcss": "6.2.0",
    "gulp-progeny": "0.3.1",
    "gulp-protractor": "2.6.0",
    "gulp-rename": "1.2.2",
    "gulp-replace": "0.5.4",
    "gulp-sass": "2.3.2",
    "gulp-sass-lint": "1.2.0",
    "gulp-shell": "0.5.2",
    "gulp-sourcemaps": "2.0.0-alpha",
    "gulp-tar": "1.9.0",
    "gulp-template": "4.0.0",
    "gulp-tslint": "6.1.2",
    "gulp-typescript": "2.13.6",
    "gulp-uglify": "1.5.4",
    "gulp-util": "3.0.7",
    "gulp-watch": "4.3.10",
    "is-ci": "1.0.10",
    "isstream": "0.1.2",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "1.0.1",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.0.2",
    "karma-mocha-reporter": "2.2.0",
    "lite-server": "2.2.2",
    "merge-stream": "1.0.0",
    "open": "0.0.5",
    "postcss-reporter": "1.4.1",
    "protractor": "4.0.10",
    "remap-istanbul": "0.6.4",
    "rimraf": "2.5.4",
    "run-sequence": "1.2.2",
    "semver": "5.3.0",
    "serve-static": "1.11.1",
    "slash": "1.0.0",
    "stream-series": "0.1.1",
    "stylelint": "7.5.0",
    "stylelint-config-standard": "11.0.0",
    "systemjs-builder": "0.15.33",
    "tildify": "1.2.0",
    "tiny-lr": "0.2.1",
    "traceur": "0.0.111",
    "ts-node": "1.6.1",
    "tslint": "3.15.1",
    "tslint-stylish": "2.1.0-beta",
    "typescript": "2.0.6",
    "typings": "1.5.0",
    "vinyl-buffer": "1.0.0",
    "vinyl-source-stream": "1.1.0",
    "walk": "2.3.9",
    "yargs": "4.8.1"
  },
  "dependencies": {
    "@angular/common": "2.1.0",
    "@angular/compiler": "2.1.0",
    "@angular/core": "2.1.0",
    "@angular/forms": "2.1.0",
    "@angular/http": "2.1.0",
    "@angular/material": "2.0.0-alpha.10",
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.1.0",
    "@angular/router": "3.1.0",
    "@angular/upgrade": "2.1.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.10",
    "accept-language-parser": "1.2.0",
    "ace": "1.3.0",
    "angular-in-memory-web-api": "0.1.14",
    "angular2-clipboard": "0.2.30",
    "angular2-jwt": "0.1.22",
    "angular2-notifications": "0.4.4",
    "bluebird": "3.4.6",
    "body-parser": "1.15.2",
    "bootstrap": "3.3.7",
    "brace": "0.9.0",
    "buffer": "5.0.1",
    "clipboard": "1.5.15",
    "compression": "1.6.2",
    "cookie-parser": "1.4.3",
    "core-js": "2.4.1",
    "debug": "2.2.0",
    "es-module-loader": "1.3.4",
    "express": "4.14.0",
    "express-jwt": "5.1.0",
    "express-session": "1.14.2",
    "fingerprintjs2": "1.4.1",
    "flag-icon-css": "2.4.0",
    "font-awesome": "4.7.0",
    "geoip-lite": "1.1.8",
    "googleapis": "14.2.0",
    "hammerjs": "2.0.8",
    "handlebars": "4.0.5",
    "hbs": "4.0.1",
    "highcharts": "5.0.2",
    "jquery": "3.1.1",
    "jquery-validation": "1.15.1",
    "jsonwebtoken": "7.1.9",
    "lodash": "4.16.5",
    "log4js": "0.6.38",
    "moment": "2.15.2",
    "moment-timezone": "0.5.10",
    "mssql": "3.3.0",
    "ng2-bootstrap": "1.1.16",
    "ng2-tree": "^1.0.0",
    "node-uuid": "1.4.7",
    "redis": "2.6.2",
    "reflect-metadata": "0.1.8",
    "request": "2.76.0",
    "request-promise": "4.1.1",
    "rxjs": "5.0.0-beta.12",
    "stack-trace": "0.0.9",
    "systemjs": "0.19.39",
    "ua-parser-js": "0.7.10",
    "validator": "6.2.0",
    "world-countries": "1.8.1",
    "xml2js": "0.4.17",
    "zone.js": "0.6.26"
  }
nicolaskaco commented 7 years ago

@SergeyKuryatnick Like I told you by email, here is the package.json.

rychkog commented 7 years ago

@nicolaskaco Good evening (in my case at least :) ) I've prepared separate demo-project which you can run. Tree works in there, please have a look at this project. I don't fully understand (for now at least) the reason why tree in your project doesn't work but it might be because of dependencies.

Link to demo project

1) npm i 2) npm i -g angular-cli 3) ng serve

https://github.com/rychkog/ng2-tree-demo

Try to update you project's Angular dependencies. But reason also might be in my build process... Looking forward for a feedback from you!

rychkog commented 7 years ago

Though I've build demo around webpack and in you case it seems you use system js for loading your project...

rychkog commented 7 years ago

@nicolaskaco Also please have a look at related issue https://github.com/valor-software/ng2-tree/issues/23 In there I've asked guys about simple project that reproduces the issue if demo project that I've built won't help. I hope together we will solve this!

EdmondChuiHW commented 7 years ago

@nicolaskaco It's probably SystemJS specific, try changing import {TreeModel} from "ng2-tree"; to import {TreeModel} from "ng2-tree/src/tree.types";

Worked for me 😊

Also, make sure your config includes the correct package and mapping:

System.config({
              paths: {
                  'npm:': 'node_modules/'
              },
              map: {
                  app: 'app',
                  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                  …
                  'ng2-tree': 'npm:ng2-tree',
                  'lodash': 'npm:lodash'
              },
              packages: {
                  'app': {
                      main: './main.js',
                      defaultExtension: 'js'
                  },
                  …
                  'ng2-tree': {
                      main: './index.js',
                      defaultExtension: 'js'
                  },
                  'lodash': {
                      main: './lodash.js',
                      defaultExtension: 'js'
                  }
              }
          });