Ngx-bootstrap: 'viewContainerRef' does not exist

Created on 30 Jun 2016  路  2Comments  路  Source: valor-software/ngx-bootstrap

Hi, I am trying to use the modal component included in ng2-bootstrap , I followed the steps of the documentation to make it work and in fact works, but i am getting error TS2339: Property 'viewContainerRef' does not exist on making impossible for me to build the app.
I am using Angular 2 RC3 (last week RC2 and the problem was the same) and Webpack.
The root component has the following code

import { Component, ViewContainerRef } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { HomeComponent } from './home';
import { DashboardComponent } from './dashboard';
import { UserLoginComponent } from './user-login';
/*
 * App Component
 * Top Level Component
 */
 @Component({
   selector: 'spr-app',
   directives: [ ROUTER_DIRECTIVES, UserLoginComponent],
   template: require('./app.component.html'),
 })
 export class AppComponent {
     public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef;
  }
 }

and the component who uses the modal

import { Component, OnInit } from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
import { User } from '../authentication/user';
import { AuthenticationService } from '../authentication/authentication.service';

@Component({
    selector: 'spr-login',
    template: require('./user-login.component.html'),
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
    viewProviders: [BS_VIEW_PROVIDERS],
    providers: [AuthenticationService]
})
export class UserLoginComponent implements OnInit {
    error: string;
    token: string = '';
    user: User = {
        username: '',
        password: ''
    };

    constructor(private authenticationService: AuthenticationService) { };

    ngOnInit() {}

    login() {
        this.authenticationService.login(this.user)
            .then(token => this.token = token)
            .catch(error => this.error = error);
    }
}

Thanks for your support , you are doing an amazing job

Most helpful comment

You can define that property on your AppComponent class, it should still work. Something like: private viewContainerRef: ViewContainerRef;

All 2 comments

You can define that property on your AppComponent class, it should still work. Something like: private viewContainerRef: ViewContainerRef;

@adrianfaciu Works like a charm. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

srjkrl20011991 picture srjkrl20011991  路  3Comments

PascalHonegger picture PascalHonegger  路  3Comments

webdev48 picture webdev48  路  3Comments

ghiscoding picture ghiscoding  路  3Comments

juanitavollmering picture juanitavollmering  路  3Comments