quindimildev quindimildev - 3 months ago 22
TypeScript Question

NG2 Tree module not found after install on an Angular 2 new app

I have install the ng2-tree plugin in a new Angular 2 app (rc4), but after following this. The plugin has been installed, and is on the node_modules folder.

I have tried to use it in this component:

import {Component} from '@angular/core';
import {TreeModel, TreeComponent} from "ng2-tree";

@Component({
selector: 'tree-side',
templateUrl: '../../pages/tree-side.html',
directives: [TreeComponent]

})
export class TreeSideComponent{
private tree: TreeModel = {
value: 'Programming languages by programming paradigm',
children: [
{
value: 'Object-oriented programming',
children: [
{value: 'Java'},
{value: 'C++'},
{value: 'C#'}
]
},
{
value: 'Prototype-based programming',
children: [
{value: 'JavaScript'},
{value: 'CoffeeScript'},
{value: 'Lua'}
]
}
]
};
}


But I get this error on the npm console:

404 GET /ng2-tree


I have modified the system.config.js with the following code, trying to find a workaround:

var map = {
...
'ng2-tree': 'node_modules/ng2-tree'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
...
'ng2-tree': { defaultExtension: 'js' },
};


But I get this error after:

Error loading http://localhost:3000/node_modules/ng2-tree as "ng2-tree" from http://localhost:3000/app/pages/tree.component.js


Following the instruction of Thierry Templier I tried this other configuration. Including the configuration for the lodash plugin, cause this had the same problem as the ng-tree after fixing the ng-tree dependency.

var map = {
...
'ng2-tree': 'node_modules/ng2-tree',
'lodash': 'node_modules/lodash'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
...
'ng2-tree': { main: 'index.js', defaultExtension: 'js' },
'lodash': { main: 'index.js', defaultExtension: 'js' }
};


But in this case I got:

[1] 16.08.08 12:04:09 404 GET /tree.component.html
[1] 16.08.08 12:04:09 404 GET /node-menu.component.html

Failed to load tree.component.html ; Zone: angular ; Task: Promise.then ; Value: Failed to load tree.component.html


Apparently this is due to the relative path resolution, but in anycase does not correspond to this question.

Answer

I think that you missed the main property in the packages configuration for ng2-tree:

var packages = {
  ...
  'ng2-tree': { main: 'index.js', defaultExtension: 'js' },
};
Comments