javascript - Πώς να εμφανίσετε μια αναδυόμενη φόρμα (Modal Popup) στο Angular χρησιμοποιώντας NgBootstrap και FormsModule

Θα εκτιμήσω οποιαδήποτε υποστήριξη. Προσπαθώ να εμφανίσω μια Φόρμα Αναδυόμενου Παραθύρου (Modal Popup Form) στο Angular χρησιμοποιώντας NgBootstrap και FormsModule, αλλά το module NgbModule δεν έχει εισαχθεί. Έχω: node 16.15.1, cli 15.1.5, core 15.1.5. Πηγαίνω στο app.modules.ts και προσθέτω το module NgbModule στα Imports, αλλά λαμβάνω πολλά σφάλματα.

Έχω εγκαταστήσει τα πακέτα:

font-awesome --save

bootstrap --save

Προσθέτω το @ng-bootstrap/ng-bootstrap

angular-material --save

Ένα από τα Σφάλματα: εισαγάγετε περιγραφή εικόνας εδώ

{"name": "cragcity-website",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "build-prod": "ng build --prod",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "15.1.4",
    "@angular/cdk": "15.1.4",
    "@angular/common": "15.1.4",
    "@angular/compiler": "15.1.4",
    "@angular/core": "15.1.4",
    "@angular/flex-layout": "12.0.0-beta.34",
    "@angular/forms": "15.1.4",
    "@angular/material": "15.1.4",
    "@angular/platform-browser": "15.1.4",
    "@angular/platform-browser-dynamic": "15.1.4",
    "@angular/router": "15.1.4",
    "@ckeditor/ckeditor5-angular": "^2.0.2",
    "@ckeditor/ckeditor5-build-classic": "^31.0.0",
    "@ckeditor/ckeditor5-upload": "^31.0.0",
    "angularx-social-login": "3.5.7",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.3",
    "ng-recaptcha": "^8.0.1",
    "ngx-toastr": "14.0.0",
    "ngx-treeview": "10.0.2",
    "ngx-ui-loader": "13.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "2.2.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.1.5",
    "@angular/cli": "15.1.5",
    "@angular/compiler-cli": "15.1.4",
    "@types/jasmine": "3.8.1",
    "@types/node": "12.11.1",
    "jasmine-core": "3.8.0",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.7.0",
    "typescript": "4.9.5"
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { SocialLoginModule, FacebookLoginProvider, GoogleLoginProvider, SocialAuthServiceConfig } from "angularx-social-login";
import { environment } from '../environments/environment';

// components
import { AppComponent } from './app.component';
import { MtlComponent } from './components/mtl/mtl.component';
import { AvatarIconComponent } from './svg-icons/avatar/avatar-icon/avatar-icon.component';
import { HeartIconComponent } from './svg-icons/heart/heart-icon/heart-icon.component';
import { DownloadIconComponent } from './svg-icons/download/download-icon/download-icon.component';
import { ShareIconComponent } from './svg-icons/share/share-icon/share-icon.component';
import { CragcityLogoComponent } from './components/cragcity-logo/cragcity-logo.component';
import { CragcityFooterComponent } from './components/cragcity-footer/cragcity-footer.component';

import { LandingComponent } from './components/mtl/landing/landing.component';
import { SharedModule } from './components/shared/shared.module';
import { SubcategoryComponent } from './components/mtl/subcategory/subcategory.component';

import { RequestInterceptor } from './core/interceptors/request.interceptor';
import { ResponseInterceptor } from './core/interceptors/response.interceptor';
import { ToastrModule } from 'ngx-toastr';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { ngxConfig } from './shared/constants'
import { SubCategoryUserComponent } from './components/mtl/subcategory/users/subcategoryuser.component';
import { SubcategoryUserAssignComponent } from './components/mtl/subcategory-user-assign/subcategory-user-assign.component';
import { TreeviewModule } from 'ngx-treeview';
import { DropdownIconComponent } from './svg-icons/dropdown/dropdown-icon/dropdown-icon.component';
import { AboutComponent } from './components/about/about.component';
import { ContactComponent } from './components/contact/contact.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ForgotPasswordComponent } from './components/account/forgot-password/forgot-password.component';
import { AccountModule } from './components/account/account.module';
import { AuthenticationComponent } from './components/authentication/authentication.component';
import { AuthenticationModule } from './components/authentication/authentication.module';
import { ResetPasswordComponent } from './components/authentication/reset-password/reset-password.component';
import { NewsFeedComponent } from './components/news-feed/news-feed.component';
import { PostComponent } from './components/news-feed/post/post.component';
import { NewsFeedDetailsComponent } from './components/news-feed/news-feed-details/news-feed-details.component';
import { SocialMShareComponent } from './components/mtl/socialM-share/socialM-share.component';




@NgModule({
  declarations: [
    AppComponent,
    MtlComponent,
    AvatarIconComponent,
    HeartIconComponent,
    DownloadIconComponent,
    ShareIconComponent,
    CragcityLogoComponent,
    CragcityFooterComponent,
    LandingComponent,
    SubcategoryComponent,
    SubCategoryUserComponent,
    SubcategoryUserAssignComponent,
    DropdownIconComponent,
    AboutComponent,
    ContactComponent,
    NewsFeedComponent,
    PostComponent,
    NewsFeedDetailsComponent,
    SocialMShareComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    ToastrModule.forRoot(),
    NgxUiLoaderModule.forRoot(ngxConfig),
    TreeviewModule.forRoot(),
    HttpClientModule,
    SocialLoginModule,
    SharedModule,
    AccountModule,
    NgbModule

  ],
  exports: [
    CragcityLogoComponent
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ResponseInterceptor,
      multi: true
    },
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(environment.googleClientId)
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(environment.facebookAppId)
          }
        ]
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Απάντηση #1

Όπου έχετε δηλώσει (σε κάποιο module.ts) LandingComponent, σε αυτό το αρχείο module.ts πρέπει να εισάγετε CragcityFooterComponent στα imports αυτού του module, οπότε αν έχετε δηλώσει το LandingComponent στο pages.module.ts, θα φαίνεται κάτι σαν αυτό,

σελίδες.μονάδα.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LandingComponent } from 'path/to/landing.component';
import { CragcityFooterComponent } from 'path/to/cragcity-footer.component';


@NgModule({
  declarations: [
    LandingComponent
  ],
  imports: [
    CommonModule,
    PagesRoutingModule,
    CragcityFooterComponent
  ]
})
export class PagesModule { }

Δείτε το LandingComponent στις δηλώσεις και το CragcityFooterComponent στις εισαγωγές.