Ngx-bootstrap: ERROR Error: Uncaught (in promise): Error: No provider for TemplateRef!

[baihech]

Runing "@angular/cli": "1.0.0", "@angular/core": "^4.0.2","bootstrap": "next","zone.js": "^0.8.8","ngx-bootstrap": "^1.6.6","tether": "^1.4.0"。
I include tether.js after jquery.js。
Compiled successfully,when I open homePage get error in console:

Error
at injectionError (http://localhost:4200/vendor.bundle.js:1442:86) [angular]
at noProviderError (http://localhost:4200/vendor.bundle.js:1480:12) [angular]
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:2981:19) [angular]
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:3020:25) [angular]
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:2952:25) [angular]
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:2821:21) [angular]
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:3768:52) [angular]
at resolveDep (http://localhost:4200/vendor.bundle.js:11134:45) [angular]
at createClass (http://localhost:4200/vendor.bundle.js:10998:147) [angular]
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:10831:37) [angular]
at createViewNodes (http://localhost:4200/vendor.bundle.js:12181:49) [angular]
at callViewAction (http://localhost:4200/vendor.bundle.js:12551:13) [angular]
at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12490:13) [angular]
at createViewNodes (http://localhost:4200/vendor.bundle.js:12208:5) [angular]
at injectionError (http://localhost:4200/vendor.bundle.js:1442:86) [angular]
at noProviderError (http://localhost:4200/vendor.bundle.js:1480:12) [angular]
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:2981:19) [angular]
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:3020:25) [angular]
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:2952:25) [angular]
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:2821:21) [angular]
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:3768:52) [angular]
at resolveDep (http://localhost:4200/vendor.bundle.js:11134:45) [angular]
at createClass (http://localhost:4200/vendor.bundle.js:10998:147) [angular]
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:10831:37) [angular]
at createViewNodes (http://localhost:4200/vendor.bundle.js:12181:49) [angular]
at callViewAction (http://localhost:4200/vendor.bundle.js:12551:13) [angular]
at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12490:13) [angular]
at createViewNodes (http://localhost:4200/vendor.bundle.js:12208:5) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:11464:31) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:11435:17) [angular]
at http://localhost:4200/polyfills.bundle.js:11512:17 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4327:37) [angular]
at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:11345:35) []
at [<root>]

shared.module.ts

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule
    };
  }
}

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    CoreModule,
    LayoutModule,
    SharedModule.forRoot(),
    RoutesModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

[baihech]

Runing "@angular/cli": "1.0.0", "@angular/core": "^4.0.0","bootstrap": "next","zone.js": "^0.8.4","ngx-bootstrap": "next","tether": "^1.4.0", is same error.

[baihech]

When I removed ngx-bootstrap，I solved the problem，http://stackoverflow.com/questions/33721276/angular-2-no-provider-for-http，https://github.com/ngx-translate/core/blob/230b4fb6a45c628e962d7426569589dfcf12336f/MIGRATION_GUIDE.md

[valorkin]

Please show what you were using from ngx-bootstrap?

[baihech]

@valorkin
shared.module.ts

import {NgModule, ModuleWithProviders} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {TranslateModule} from '@ngx-translate/core';
import {ToasterModule} from 'angular2-toaster/angular2-toaster';

import {AccordionModule} from 'ng2-bootstrap/accordion';
import {AlertModule} from 'ng2-bootstrap/alert';
import {ButtonsModule} from 'ng2-bootstrap/buttons';
import {CarouselModule} from 'ng2-bootstrap/carousel';
import {CollapseModule} from 'ng2-bootstrap/collapse';
import {DropdownModule} from 'ng2-bootstrap/dropdown';
import {ModalModule} from 'ng2-bootstrap/modal';
import {PaginationModule} from 'ng2-bootstrap/pagination';
import {ProgressbarModule} from 'ng2-bootstrap/progressbar';
import {RatingModule} from 'ng2-bootstrap/rating';
import {TabsModule} from 'ng2-bootstrap/tabs';
import {TimepickerModule} from 'ng2-bootstrap/timepicker';
import {TooltipModule} from 'ng2-bootstrap/tooltip';
import {TypeaheadModule} from 'ng2-bootstrap/typeahead';
import {DatepickerModule} from 'ng2-bootstrap/datepicker';
......
// https://angular.io/styleguide#!#04-10
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    AccordionModule.forRoot(),
    AlertModule.forRoot(),
    ButtonsModule.forRoot(),
    CarouselModule.forRoot(),
    CollapseModule.forRoot(),
    DatepickerModule.forRoot(),
    DropdownModule.forRoot(),
    ModalModule.forRoot(),
    PaginationModule.forRoot(),
    ProgressbarModule.forRoot(),
    RatingModule.forRoot(),
    TabsModule.forRoot(),
    TimepickerModule.forRoot(),
    TooltipModule.forRoot(),
    TypeaheadModule.forRoot(),
    ToasterModule
  ],
  providers: [
    ColorsService
  ],
  declarations: [
    FlotDirective,
    SparklineDirective,
    EasypiechartDirective,
    CheckallDirective,
    VectormapDirective,
    NowDirective,
    ScrollableDirective,
    JqcloudDirective
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    RouterModule,
    AccordionModule,
    AlertModule,
    ButtonsModule,
    CarouselModule,
    CollapseModule,
    DatepickerModule,
    DropdownModule,
    ModalModule,
    PaginationModule,
    ProgressbarModule,
    RatingModule,
    TabsModule,
    TimepickerModule,
    TooltipModule,
    TypeaheadModule,
    ToasterModule,
    FlotDirective,
    SparklineDirective,
    EasypiechartDirective,
    CheckallDirective,
    VectormapDirective,
    NowDirective,
    ScrollableDirective,
    JqcloudDirective
  ]
})

// https://github.com/ocombe/ng2-translate/issues/209
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule
    };
  }
}

[baihech]

ecommerce.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SharedModule } from '../../shared/shared.module';
import { OrdersComponent } from './orders/orders.component';
import { OrderviewComponent } from './orderview/orderview.component';
import { ProductsComponent } from './products/products.component';
import { ProductviewComponent } from './productview/productview.component';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
    { path: 'orders', component: OrdersComponent },
    { path: 'orderview', component: OrderviewComponent },
    { path: 'products', component: ProductsComponent },
    { path: 'productview', component: ProductviewComponent },
    { path: 'checkout', component: CheckoutComponent }
];

@NgModule({
    imports: [
        SharedModule,
        RouterModule.forChild(routes)
    ],
    declarations: [
        OrdersComponent,
        OrderviewComponent,
        ProductsComponent,
        ProductviewComponent,
        CheckoutComponent
    ],
    exports: [
        RouterModule
    ]
})
export class EcommerceModule { }

[baihech]

productview.component.ts

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

@Component({
  selector: 'app-productview',
  templateUrl: './productview.component.html',
  styleUrls: ['./productview.component.scss']
})
export class ProductviewComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

[valorkin]

You need to export .forRoot in shared module

[baihech]

@valorkin I modified the code, but still have this error.I export .forRoot in shared module,use SharedModule.forRoot() in all imports。
By the way，why use forRoot() in imports @NgModule?
I recently upgraded the framework，thanks for your help ！

 "@angular/cli": "1.0.1",
 "bootstrap": "next",
"ngx-bootstrap": "^1.6.6",
 "tether": "^1.4.0",

[valorkin]

the thing with forRoot is:

• you need to provide services and config only once in app module
• but declarations of components in directives should be provided for each submodule

so I had to add forRoot, this approach explained in angular.io docs

[valorkin]

can you create a small repo and reproduce this issue?
so I can jump in and fix it?

[baihech]

@valorkin 我觉得不是JavaScript 代码的错误，运行时抛出的错误是模板无法加载，有可能是因为我的HTML里使用了旧的指令标签。请问哪里有bs的升级指南，我可以看到升级的指令标签?

@valorkin I think it is not JavaScript code error, run-time error is the template can not be loaded, there may be because my HTML using the old directive tag.Is there a bs upgrade guide where I can see the escalation of the tag?

[valorkin]

Change log, v1.6

[Zeemee7]

I had the same issue after upgrading from ng2-bootstrap 1.3.X to ngx-bootstrap 1.6.6, I needed to change "dropdownMenu" to "*dropdownMenu".
See Breaking changes of 1.6.0.