无法为 ionic 2 运行 d3js 示例答案

【问题标题】：can´t run d3js example for ionic 2无法为 ionic 2 运行 d3js 示例
【发布时间】：2017-12-14 13:53:45
【问题描述】：

我很难运行这个例子 https://github.com/abritopach/ionic2-d3js-example

我安装了最新的 ionic 2 版本、npm 等，但如果我尝试运行该应用程序，我会在浏览器控制台中收到错误消息。

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to > the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15
        at syntaxError (http://localhost:8100/build/vendor.js:34999:34)
        at TemplateParser.parse (http://localhost:8100/build/vendor.js:45490:19)
        at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:59241:39)
        at http://localhost:8100/build/vendor.js:59165:62
        at Set.forEach (native)
        at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:59165:19)
        at createResult (http://localhost:8100/build/vendor.js:59050:19)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
        at r.run (http://localhost:8100/build/polyfills.js:3:4140)
        at http://localhost:8100/build/polyfills.js:3:13731 Error: Template parse errors:
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15
        at syntaxError (http://localhost:8100/build/vendor.js:34999:34)
        at TemplateParser.parse (http://localhost:8100/build/vendor.js:45490:19)
        at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:59241:39)
        at http://localhost:8100/build/vendor.js:59165:62
        at Set.forEach (native)
        at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:59165:19)
        at createResult (http://localhost:8100/build/vendor.js:59050:19)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
        at r.run (http://localhost:8100/build/polyfills.js:3:4140)
        at http://localhost:8100/build/polyfills.js:3:13731

我的配置：

@ionic/cli-utils : 1.4.0

离子 CLI：3.4.0

@ionic/app-scripts : 2.0.0

@ionic/cli-plugin-ionic-angular : 1.3.1

离子框架：离子角 3.5.0

节点：v7.10.0

操作系统：OS X El Capitan

Xcode：未安装

ios-deploy：未安装

ios-sim : 未安装

npm : 5.1.0

谁能帮帮我？

【问题讨论】：

确切的错误是什么？
@moh89 这是我能看到的唯一错误
如果我没记错的话，调用 [tab root] 的对象有问题，该对象已被 [super -tab] 类的对象调用
import { Component } from '@angular/core'; import { BarChartPage } from '../bar-chart/bar-chart'; import { PieChartPage } from '../pie-chart/pie-chart'; import { LineChartPage } from '../line-chart/line-chart'; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root = LineChartPage; tab2Root = BarChartPage; tab3Root = PieChartPage; constructor() { } } 我使用了示例中的 sn-p。我在 2.6.3 版本上降级了 ionic2-super-tabs，但它仍然无法正常工作。

标签： javascript angularjs node.js d3.js ionic-framework

【解决方案1】：

我刚刚尝试了代码，它可以工作。

我采取的步骤：

git 克隆https://github.com/abritopach/ionic2-d3js-example
npm 安装
离子服务

我的配置：

离子 CLI 3.4.0
ionic2-super-tabs ^1.1.1
@ionic/app-scripts：1.3.0，
@ionic/cli-plugin-ionic-angular: 1.3.2

我会用你的配置来试试我的例子。

¿您是否能够运行该示例？

【讨论】：

【解决方案2】：

我解决了这个错误。

在https://github.com/zyra/ionic2-super-tabs/ README 中说：

"由于该模块的设计方式，该模块的某些版本可能无法与 Ionic Framework 的所有版本一起使用。请参阅下表以使用适当的版本。此外，更高版本中的某些功能可能无法使用可在该模块的旧版本中使用。此页面仅包含最新文档。对于旧文档，请使用 Github 查找以前版本的 README.md 文件。

Ionic 框架版本 ionic2-super-tabs 版本
3.5.x 3.0.0
3.4.x 2.6.3
3.0.0 3.3.x
2.0.0 2.6.3
2.x.x 1.x.x "

步骤：

更新 package.json 中的依赖项

 "ionic-angular": "3.5.0",
 "ionic2-super-tabs": "3.0.0"

修改home.html

<super-tabs id="mainTabs" selectedTabIndex="0" toolbarColor="light" toolbarBackground="dark" indicatorColor="light"
badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)">

修改home.ts

从'@angular/core'导入{组件}；

import { BarChartPage } from '../bar-chart/bar-chart';
import { PieChartPage } from '../pie-chart/pie-chart';
import { LineChartPage } from '../line-chart/line-chart';

import { SuperTabsController } from 'ionic2-super-tabs';

@Component({
  templateUrl: 'home.html',
  providers: [SuperTabsController]
})
export class HomePage {

  tab1Root: any = LineChartPage;
  tab2Root: any = BarChartPage;
  tab3Root: any = PieChartPage;

  constructor(private superTabsCtrl: SuperTabsController) {

  }

  /*
  ngAfterViewInit() {

    // must wait for AfterViewInit if you want to modify the tabs instantly
    this.superTabsCtrl.setBadge('firstPage', 5);

  }
  */

  hideToolbar() {
    this.superTabsCtrl.showToolbar(false);
  }

  showToolbar() {
    this.superTabsCtrl.showToolbar(true);
  }

  onTabSelect(ev: any) {
    console.log('Tab selected', 'Index: ' + ev.index, 'Unique ID: ' + ev.id);
  }

}

我的 package.json

> ...
> 
>  "dependencies": {
>     "@angular/common": "4.1.3",
>     "@angular/compiler": "4.1.3",
>     "@angular/compiler-cli": "4.1.3",
>     "@angular/core": "4.1.3",
>     "@angular/forms": "4.1.3",
>     "@angular/http": "4.1.3",
>     "@angular/platform-browser": "4.1.3",
>     "@angular/platform-browser-dynamic": "4.1.3",
>     "@ionic-native/core": "3.12.1",
>     "@ionic-native/splash-screen": "3.12.1",
>     "@ionic-native/status-bar": "3.12.1",
>     "@ionic/storage": "2.0.1",
>     "d3": "^4.8.0",
>     "ionic-angular": "3.5.0",
>     "ionic2-super-tabs": "3.0.0",
>     "ionicons": "3.0.0",
>     "rxjs": "5.4.0",
>     "sw-toolbox": "3.6.0",
>     "zone.js": "0.8.12"   },   "devDependencies": {
>     "@ionic/app-scripts": "2.0.1",
>     "@ionic/cli-plugin-ionic-angular": "1.3.2",
>     "@types/d3": "4.7.0",
>     "typescript": "2.3.4"   },
> 
> ...

【讨论】：