Right now I am working on a basic website where I require a carousel. Tried with bootstrap carousel but found that on clicking prev/next icon, angular router kicks in and navigates to home url (as routed to home component when invalid url encounters). Did a bit of study and came across ng-bootstrap carousel. Added the same into my project. However, carousel is not working as expected.
I had material added in that project. Thinking this might have effected this, hence this time created a whole new test project. Copied the first carousel example
from here https://ng-bootstrap.github.io/#/components/carousel/examples
But the output is same as earlier.
Tried adding localize polyfill as well after that. Still no change. Unable to figure out what is the issue and what's the way around.
my package.json:
{
"name":"test-carousel",
"version":"0.0.0",
"scripts":{
"ng":"ng",
"start":"ng serve",
"build":"ng build",
"watch":"ng build --watch --configuration development",
"test":"ng test"
},
"private":true,
"dependencies":{
"@angular/animations":"~12.2.0",
"@angular/common":"~12.2.0",
"@angular/compiler":"~12.2.0",
"@angular/core":"~12.2.0",
"@angular/forms":"~12.2.0",
"@angular/localize":"~12.2.0",
"@angular/platform-browser":"~12.2.0",
"@angular/platform-browser-dynamic":"~12.2.0",
"@angular/router":"~12.2.0",
"@ng-bootstrap/ng-bootstrap":"^10.0.0",
"bootstrap":"^5.1.3",
"rxjs":"~6.6.0",
"tslib":"^2.3.0",
"zone.js":"~0.11.4"
},
"devDependencies":{
"@angular-devkit/build-angular":"~12.2.4",
"@angular/cli":"~12.2.4",
"@angular/compiler-cli":"~12.2.0",
"@types/jasmine":"~3.8.0",
"@types/node":"^12.11.1",
"jasmine-core":"~3.8.0",
"karma":"~6.3.0",
"karma-chrome-launcher":"~3.1.0",
"karma-coverage":"~2.0.3",
"karma-jasmine":"~4.0.0",
"karma-jasmine-html-reporter":"~1.7.0",
"typescript":"~4.3.5"
}
}
my angular.json:
{
"$schema":"./node_modules/@angular/cli/lib/config/schema.json",
"version":1,
"newProjectRoot":"projects",
"projects":{
"test-carousel":{
"projectType":"application",
"schematics":{
"@schematics/angular:application":{
"strict":true
}
},
"root":"",
"sourceRoot":"src",
"prefix":"app",
"architect":{
"build":{
"builder":"@angular-devkit/build-angular:browser",
"options":{
"outputPath":"dist/test-carousel",
"index":"src/index.html",
"main":"src/main.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"tsconfig.app.json",
"assets":[
"src/favicon.ico",
"src/assets"
],
"styles":[
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts":[
]
},
"configurations":{
"production":{
"budgets":[
{
"type":"initial",
"maximumWarning":"500kb",
"maximumError":"1mb"
},
{
"type":"anyComponentStyle",
"maximumWarning":"2kb",
"maximumError":"4kb"
}
],
"fileReplacements":[
{
"replace":"src/environments/environment.ts",
"with":"src/environments/environment.prod.ts"
}
],
"outputHashing":"all"
},
"development":{
"buildOptimizer":false,
"optimization":false,
"vendorChunk":true,
"extractLicenses":false,
"sourceMap":true,
"namedChunks":true
}
},
"defaultConfiguration":"production"
},
"serve":{
"builder":"@angular-devkit/build-angular:dev-server",
"configurations":{
"production":{
"browserTarget":"test-carousel:build:production"
},
"development":{
"browserTarget":"test-carousel:build:development"
}
},
"defaultConfiguration":"development"
},
"extract-i18n":{
"builder":"@angular-devkit/build-angular:extract-i18n",
"options":{
"browserTarget":"test-carousel:build"
}
},
"test":{
"builder":"@angular-devkit/build-angular:karma",
"options":{
"main":"src/test.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"tsconfig.spec.json",
"karmaConfig":"karma.conf.js",
"assets":[
"src/favicon.ico",
"src/assets"
],
"styles":[
"src/styles.css"
],
"scripts":[
]
}
}
}
}
},
"defaultProject":"test-carousel"
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
