Javascript can´；t运行离子2的d3js示例

我很难运行这个示例

我安装了最新的爱奥尼亚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

polyfills.js:3未处理的承诺拒绝：模板分析错误：
无法绑定到“tabRoot”，因为它不是“super tab”的已知属性。
1.如果“super tab”是一个角度组件，并且具有“tabRoot”输入，则验证它是否是此模块的一部分。
2.如果“super tab”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
][tabRoot]=“tab1Root”title=“折线图”>
][tabRoot]=“tab2Root”title=“条形图”>
][tabRoot]=“tab3Root”title=“饼图”>
“”：ng:///AppModule/TabsPage。html@3:15
在syntaxError(http://localhost:8100/build/vendor.js:34999:34)
在TemplateParser.parse(http://localhost:8100/build/vendor.js:45490:19)
在JIT编译器上。\u compiletTemplate(http://localhost:8100/build/vendor.js:59241:39)
在http://localhost:8100/build/vendor.js:59165:62
at Set.forEach（本机）
在JIT编译器上。\u compileComponents(http://localhost:8100/build/vendor.js:59165:19)
在createResult(http://localhost:8100/build/vendor.js:59050:19)
在t.invoke(http://localhost:8100/build/polyfills.js:3:8971)
在r.run(http://localhost:8100/build/polyfills.js:3:4140)
在http://localhost:8100/build/polyfills.js:3:13731 错误：模板分析错误：
无法绑定到“tabRoot”，因为它不是“super tab”的已知属性。
1.如果“super tab”是一个角度组件，并且具有“tabRoot”输入，则验证它是否是此模块的一部分。
2.如果“super tab”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
][tabRoot]=“tab1Root”title=“折线图”>
我刚试过这个代码，它很管用

我采取的步骤：


git克隆
npm安装
离子发球

我的配置：


爱奥尼亚CLI 3.4.0
ionic2超级选项卡^1.1.1
@爱奥尼亚/应用程序脚本：1.3.0
@离子/cli插件离子角度：1.3.2

我将使用您的配置尝试我的示例

？你能运行这个例子吗？
我解决了这个错误

在自述中说：

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


Ionic框架版本ionic2超级选项卡版本
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中的依赖项
修改home.html
My 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"   },
> 
> ...

确切的错误是什么？@moh89这是我能看到的唯一错误如果我没有错的话，它调用[tab root]的对象有问题，这个对象是用[super-tab]类的对象
import{Component}从'@angular/core'；import{BarChartPage}从'../bar chart/bar chart'；import{PieChartPage}从“../pie chart/pie chart”；从“../line chart/line chart”导入{LineChartPage}；@Component（{templateUrl:'tabs.html'}）导出类TabsPage{tab1Root=LineChartPage；tab2Root=BarChartPage；tab3Root=PieChartPage；构造函数（）{}
我使用了示例中的代码片段。我在版本2.6.3上降级了ionic2 super tabs，但它仍然不起作用。
<super-tabs id="mainTabs" selectedTabIndex="0" toolbarColor="light" toolbarBackground="dark" indicatorColor="light"

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);
  }

}

> ...
> 
>  "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"   },
> 
> ...