Блог

Прямо сейчас я работаю над базовым веб-сайтом, где мне нужна карусель. Попробовал с загрузочной каруселью, но обнаружил, что при нажатии на значок prev/next включается угловой маршрутизатор и переходит к домашнему URL-адресу (как перенаправляется на домашний компонент при обнаружении недопустимого URL-адреса). Немного изучил и наткнулся на карусель ng-bootstrap. Добавил то же самое в свой проект. Однако карусель работает не так, как ожидалось.

У меня был материал, добавленный в этот проект. Думая, что это могло бы повлиять на это, поэтому на этот раз был создан совершенно новый тестовый проект. Скопировал первый пример карусели отсюда https://ng-bootstrap.github.io/#/components/carousel/examples Но результат такой же, как и раньше.

Попытался также добавить локализовать полифилл после этого. По-прежнему никаких изменений. Не могу понять, в чем проблема и как ее обойти.

мой пакет.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"
}
 

приложение.модуль.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 { }