Question

我现在已经试图将这个问题包围了好几天，并且认为我非常接近，但必须缺少一些非常简单/关键的东西。我使用＆＃34; dotnet new angular＆＃34;创建了一个新网站。使用最新安装的dot net 2.0和相关模板。然后我将bootstrap包升级到4.0 beta并删除了JavaScript组件和jQuery。所有这一切都很有效。现在我试图让ng-bootstrap使用网站上相当贫血的文档来工作。让我首先说我们的团队已经在一些大型项目上使用AngularJs 1.x超过一年，但我们是2.x / 4.x的新手。我们也是WebPack的新手。我想我根据文档设置了一些东西，但是当我尝试添加一个tabset时，我得到一个错误。这是详细信息。

首先我用

安装它

npm install --save @ng-bootstrap/ng-bootstrap

并确认它位于packages文件夹中。这是不同的配置文件。

app.module.browser.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        NgbModule.forRoot(),
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

webpack.config.vendor.js

const treeShakableModules = [
    '@angular/animations',
     . . . . .
    '@ng-bootstrap/ng-bootstrap',
];

我手动重新

webpack --config webpack.config.vendor.js

并确认vendor.js文件较大，并且ng-bootstrap库的内容在该文件中并正在加载

在组件中

<ngb-tabset>
    <ngb-tab title="Simple">
        <ng-template ngbTabContent>
             <p>
                Raw denim you probably haven't heard of them jean shorts Austin
                .........

当我运行该网站时，我收到以下错误：

An unhandled exception occurred while processing the request.

NodeInvocationException: Template parse errors:
'ngb-tab' is not a known element:
1. If 'ngb-tab' is an Angular component, then verify that it is part of this 
module.
2. If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the 
'@NgModule.schemas' of this component to suppress this message. ("

<ngb-tabset>
[ERROR ->]<ngb-tab title="Simple">
<ng-template ngbTabContent>

非常感谢任何想法。

编辑：这是所要求的组件：

import { Component } from '@angular/core';

@Component({
    providers: [NgbTabset],
    selector: 'counter',
    templateUrl: './counter.component.html'
})
export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount = this.currentCount + 3;
    }
}

我刚刚添加了

providers: [NgbTabset],

按照你的建议，现在我得到了一个不同的错误＆＃34; NgbTabset未定义＆＃34;

ng-bootstrap与.net core 2 angular 4模板无法正常工作

0 个答案: