ngb-alert only works with type="success" or without type - ng-bootstrap

Question

I have this following code which works.
<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="success" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
But if I change to the following it doesn't
<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" type="danger" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="primary" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
My package.json is like this.
"dependencies": {
"#angular/animations": "^4.3.4",
"#angular/cdk": "^2.0.0-beta.8",
"#angular/common": "^4.3.4",
"#angular/core": "^4.3.4",
"#angular/forms": "^4.3.4",
"#angular/http": "^4.3.4",
"#angular/material": "^2.0.0-beta.8",
"#angular/platform-browser": "^4.3.4",
"#angular/platform-browser-dynamic": "^4.3.4",
"#angular/router": "^4.3.4",
"#ng-bootstrap/ng-bootstrap": "~1.0.0-alpha.30",
"angular-loader": "^1.6.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"primeng": "^4.1.3",
"rxjs": "^5.4.2",
"screenshot-desktop": "^1.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.16"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler": "^4.3.4",
"#angular/compiler-cli": "^4.3.4",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.19",
"codelyzer": "^3.1.2",
"jasmine-core": "^2.7.0",
"jasmine-spec-reporter": "^4.1.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.1.2",
"ts-node": "^3.3.0",
"tslint": "^5.5.0",
"typescript": "^2.4.2"
}
So, can some expert please tell me what's wrong here? Why type primary or danger won't work.

Answer 1

I ran across a similar issue. My problem was that Angular thought I was passing it a variable from which to read the type from. Obviously there was no variable titled primary so it failed. changing things to [type]="'primary'" solved the issue altogether.
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" [type]="'primary'" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>

Answer 2

I think you're just not allowed to use the fade class here.
class="fade animate-show animate-hide"
If I run your code, it only shows me the success.
But if I remove the fade class, it shows both messages.
EDIT
I compared your list of dependencies to mine.
Have you tried updating your libs?
You can run this from the command line:
npm update -D && npm update -S
Dependencies that you have, that I don't :
"angular-loader": "^1.6.5",
"font-awesome": "^4.7.0",
"primeng": "^4.1.3",
"screenshot-desktop": "^1.1.0",
"underscore": "^1.8.3"
I am especially wondering about that first one angular-loader.
Do you know what it's for ? According to its documentation it's a AngularJS dependency.