Использовать угловое дерево в проекте "dotnet new angular"?

При попытке интегрировать компонент angular-tree в проект, созданный с помощью dotnet new angular, я постоянно сталкиваюсь с исключением:

void(0) is not a function.

Либо дерево никогда не появляется, либо оно появляется ненадолго, но затем возникает ошибка, и она исчезает. Я полагаю, что это связано с проблемой управления версиями пакета, так как собственная демонстрация компонента работает нормально. Но я понятия не имею, какой пакет или какой обходной путь может быть.

Я опубликовал это как проблему на форумах по компонентам angular-tree, а также сделал различные попытки доступными в виде публичного репо.

Есть идеи?

ОТВЕТЫ

Ответ 1

Я только что проверил это сам, и он работал над версией хрома 73.0.3683.86. Я использовал код Visual Studio, но вы можете использовать все, что захотите.

  1. Создайте папку и откройте ее с помощью VS Code
  2. Откройте терминал и выполните команду dotnew new angular - это создаст приложение ядра .net
  3. Выполните команду ng new tree-test - она создает дерево-тест angular имен приложений. Выберите yes, когда будет предложено, а затем выберите формат scss
  4. Выполнить cd tree-test - изменить рабочую папку на вновь созданное угловое приложение
  5. Выполните npm install --save angular-tree-component - это установит ваш компонент в приложение
  6. Откройте файл tree-test>src>styles.scss и добавьте туда строку: @import '~angular-tree-component/dist/angular-tree-component.css'; - это заставит работать стили вашего дерева
  7. Откройте файл app.module.ts, добавьте import { TreeModule } from 'angular-tree-component'; в заголовок и настройте импорт следующим образом: imports: [..., TreeModule.forRoot()]
  8. Откройте файл app.component.html и замените все на <tree-root [nodes]="nodes" [options]="options"></tree-root>
  9. Откройте app.component.ts и замените все содержимое класса AppComponent следующим:
nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};
  1. запустите команду ng serve, дождитесь ее завершения и откройте браузер в http://localhost:4200. Там вы увидите красивое дерево.