Ngx-bootstrap: Error with new angular RC5

[whuang04]

Getting this error when angular app starting

Error: Error: Error: Input 'previousText' defined multiple times in 'PagerComponent'
        at new BaseException (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27)
        at eval (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:12845:31)
        at Array.forEach (native)
        at DirectiveResolver._merge (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:12842:24)
        at DirectiveResolver._mergeWithPropertyMetadata (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:12834:25)
        at DirectiveResolver.resolve (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:12786:33)
        at CompileMetadataResolver.getDirectiveMetadata (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:13097:55)
        at addDirective (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:13367:37)
        at eval (http://localhost:8000/node_modules/@angular/compiler//bundles/compiler.umd.js:13376:77)
        at Array.forEach (native)
    Evaluating http://localhost:8000/app/main.js
    Error loading http://localhost:8000/app/main.js

[marcalj]

We need @NgModule support to use the directives.

[awilhelmer]

i only get:
Error: Uncaught (in promise): No provider for ComponentsHelper!
And i can't get it to import in my NgModule Providers...

[marcalj]

I'm getting: "browser_adapter.js:84 Error: Type TooltipContainerComponent is part of the declarations of 2 modules: AppModule and constructor!", and of course it's not declared in two modules... :(

[awilhelmer]

I fixed the error now. I removed viewProviders: [BS_VIEW_PROVIDERS] from my component
what caused the error. Readding it resolved my problem. I am using this components of ng2-bootstrap without any errors in RC5:
import {MODAL_DIRECTIVES,TOOLTIP_DIRECTIVES,TYPEAHEAD_DIRECTIVES,CollapseDirective,PaginationComponent } from "ng2-bootstrap/ng2-bootstrap";

Simply remove all Directives in all your Components and place them in your declarations of @NgModule

[marcalj]

Ok my problem is because I'm using ngUpgrade (I'm in the middle of an upgrade process...)

[achimha]

This is what I get trying to compile my project with RC5:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'templateUrl' since it isn't a known property of 'datepicker-inner'.
1. If 'datepicker-inner' is an Angular component and it has 'templateUrl' input, then verify that it is part of this module.
2. If 'datepicker-inner' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("ustomClass]="customClass"
                      [dateDisabled]="dateDisabled"
                      [ERROR ->][templateUrl]="templateUrl"
                      [onlyCurrentMonth]="onlyCurrentMonth"
             "): DatePickerComponent@20:22 ; Zone: <root> ; Task: Promise.then ; Value: 

[marcalj]

@achimha Maybe other error you have ("ustomClass]="customClass" ==> [customClass]="customClass"

There's no templateUrl input in datepicker-inner or datepicker components.

[daemonblade]

The root cause is that ng2-bootstrap needs to add NgModule support so that it can be added to the imports section of the application module.

However, until that happens, a workaround is to add ng2-bootstrap components and directives to the declarations section of the root application module, and removing the ng2-bootstrap declarations from the application's Component decorators.

Unfortunately, any attempt to introduce NgModule feature modules to the application will break this workaround.

[marcalj]

@daemonblade RC5 support with modules is coming.

[jmoeyersons]

@achimha @marcalj Is there already any solution for that problem? Because I suffer the same error as @achimha does:

Error: Uncaught (in promise): Template parse errors:
Can't bind to 'level' since it isn't a known property of 'as-my-battery'.
1. If 'as-my-battery' is an Angular component and it has 'level' input, then verify that it is part of this module.
2. If 'as-my-battery' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 (""checkbox" name={{data.name}} value={{data.name}}> {{data.name}}
                    <as-my-battery [ERROR ->][level]='data.battery'></as-my-battery>
                    <as-my-signal [level]='data.signal'></as-"): a@19:35

where as-my-battery has a @Input() level: number; declaration in his class

[matthijsl]

I'm experiencing the same issue as @moeyerke. Input defined as @Input or inputs: ['config'] does not make a difference.

[marcalj]

Meanwhile the upgrade to RC5 work is not complete try to use feat-rc5 branch or try to add directives: [ ... ] on your component.

I couldn't use tooltips neither by the way...

[jmoeyersons]

@MatthijsLiethof I founded a solution for the problem, if you are building with gulp, try to set the mangle option to false.
This solved to problem for me!

[matthijsl]

I can confirm that stopping the mangling of the code with the UglifyPlugin I use in Webpack solves the problem.

[bahodirk]

Is the any other way than setting the mangle option to false? I am not using gulp-uglify.

[jmoeyersons]

@bahodirk Did you used the directives in a component description? And can you give the error log?

[bahodirk]

Yes, I am using only one directive, and I have added it to NgModule declarations.

Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'my-toggle'.
1. If 'my-toggle' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'my-toggle' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("ch || displayCloseButton">
    <div class="switch__wrapper" *ngIf="displaySwitch">
      <my-toggle [ERROR ->][value]="false" [label]="'Advanced'" (valueChanged)="onSwitchValueChanged($event)"></my-toggle>
    <"): MyPanelHeader@4:17

[jmoeyersons]

@bahodirk Can you give me the code of the component my-toggle, because the error log names a property of bu-toggle?

[jmoeyersons]

@bahodirk I inspected your code, and it seems fine to me, how to you build your application? Because while doing research, the way you build could be a reason for that error

[jmoeyersons]

@bahodirk Can you try this please?

var systemJs = { //ADD THIS VAR 
        builder: {
            normalize: true,
            minify: true,
            mangle: false, //Bug in mangle with RC5!
            runtime: false,
            globalDefs: {
                DEBUG: false,
                ENV: 'production'
            }
        }
    };

  var config = {
    root: root,
    src: src,
    app: app,
    assets: assets,
    index: index,
    htmlFiles: htmlFiles,
    build: build,
    assetsPath: assetsPath,
    tsFiles: tsFiles,
    tsTestFiles: tsTestFiles,
    liveServer: liveServer,
    systemJs: systemJs // ADD THIS ONE
  };

[bahodirk]

@moeyerke thank you, shall I call config.systemJs somewhere else? It is my fist time using gulp, sorry.

[jmoeyersons]

@bahodirk I don't think thats needed, did you runned your application again?

[bahodirk]

@moeyerke yep, getting the same error...

[jmoeyersons]

@bahodirk I missed something in your code, I think this should work:

 // 3. bundle
bundle(builderConfig, expressionOrTree, outFile, { minify: false, sourceMaps: false, mangle: false });
  return bundle(builderConfig, expressionOrTree, minOutFile, { minify: true, sourceMaps: false, mangle: false });

So just add the mangle option while setting it false should do the trick (I hope)

[bahodirk]

@moeyerke I have tried this, did not help ...

[aviramga]

@marcalj how do I make the dependency install the feat-rc5 branch?
I've tried adding this
"ng2-bootstrap": "git+https://github.com/valor-software/ng2-bootstrap.git#feat-rc5",
to my package.json but after installing again the app fails to import any components from ng2-bootstrap.
I've looked into the ng2-bootstrap directory and found it roughly contains only what was in the last commit.
What am I doing wrong?

[marcalj]

Doing it this way It's not prepared as a package for importing on your app. You should clone it and execute gulp task to prepare for publish and then copy the "build" folder inside your node_modules folder.

Try: npm run flow.clean && npm run flow.compile and use bundles folder (not sure if it's how it should be).

[aviramga]

I'll give it a shot, thanks!

[jchewitt]

DatePickerComponent has issues because it is trying to bind to [templateUrl] which doesn't have an input on DatePickerInnerComponent.

see below

datepicker.component.js - line 158
template: "\n <datepicker-inner [activeDate]=\"activeDate\"\n (update)=\"onUpdate($event)\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n

[templateUrl]=\"templateUrl\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n (selectionDone)=\"onSelectionDone($event)\">\n <daypicker tabindex=\"0\"></daypicker>\n <monthpicker tabindex=\"0\"></monthpicker>\n <yearpicker tabindex=\"0\"></yearpicker>\n </datepicker-inner>\n ",

I have no workaround. Anyone? It shouldn't be trying to bind to an input that isn't available. I don't see where it's even used. I removed the binding from ng2-bootstrap.min.js and it loads.

[marcalj]

@jchewitt: @otelnov is doing a rewrite of DatePicker.

[pratiksharma9]

I want to use date-picker. and update ng2-bootstrap as soon as you can.

[Martin-Wegner]

@valorkin close?

[valorkin]

@Martin-Wegner please accept invite to ng2-team, drop me a dm in slack

[valorkin]

Thanks for all your help!

[dexstakker]

uhh, did this bug get fixed, I see the same issues in RC6? Same complaining that it needs @input on the class when it already exists on the class and so refuses to bind.

[Martin-Wegner]

@dexstakker why you use RC6?