【发布时间】：2022-02-09 14:34:16
【问题描述】：
我有一个使用 ngx-chess-board 库的应用程序，它在本地和服务器上运行良好，但最近当我尝试在本地运行 npm start 时出现依赖错误。我尝试了不同版本的 ngx-chess-board 但没有运气。删除节点模块没有帮助。运行 npm start 时出现以下错误：
Error: node_modules/ngx-chess-board/lib/ngx-chess-board.component.d.ts:75:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
75 static ɵfac: i0.ɵɵFactoryDeclaration<NgxChessBoardComponent, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/ngx-chess-board.component.d.ts:76:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.
76 static ɵcmp: i0.ɵɵComponentDeclaration<NgxChessBoardComponent, "ngx-chess-board", never, { "darkTileColor": "darkTileColor"; "lightTileColor": "lightTileColor"; "showCoords": "showCoords"; "sourcePointColor": "sourcePointColor"; "destinationPointColor": "destinationPointColor"; "legalMovesPointColor": "legalMovesPointColor"; "showLastMove": "showLastMove"; "showLegalMoves": "showLegalMoves"; "showActivePiece": "showActivePiece"; "showPossibleCaptures": "showPossibleCaptures"; "size": "size"; "freeMode": "freeMode"; "dragDisabled": "dragDisabled"; "drawDisabled": "drawDisabled"; "pieceIcons": "pieceIcons"; "lightDisabled": "lightDisabled"; "darkDisabled": "darkDisabled"; }, { "moveChange": "moveChange"; "checkmate": "checkmate"; "stalemate": "stalemate"; }, never, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/ngx-chess-board.module.d.ts:9:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
9 static ɵfac: i0.ɵɵFactoryDeclaration<NgxChessBoardModule, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/ngx-chess-board.module.d.ts:10:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
10 static ɵmod: i0.ɵɵNgModuleDeclaration<NgxChessBoardModule, [typeof i1.NgxChessBoardComponent, typeof i2.PiecePromotionModalComponent], [typeof i3.CommonModule, typeof i4.DragDropModule], [typeof i1.NgxChessBoardComponent]>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/ngx-chess-board.module.d.ts:11:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
11 static ɵinj: i0.ɵɵInjectorDeclaration<NgxChessBoardModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/piece-promotion/piece-promotion-modal/piece-promotion-modal.component.d.ts:13:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
13 static ɵfac: i0.ɵɵFactoryDeclaration<PiecePromotionModalComponent, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/piece-promotion/piece-promotion-modal/piece-promotion-modal.component.d.ts:14:21 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.
14 static ɵcmp: i0.ɵɵComponentDeclaration<PiecePromotionModalComponent, "app-piece-promotion-modal", never, { "pieceIconInput": "pieceIconInput"; "color": "color"; }, {}, never, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/service/ngx-chess-board.service.d.ts:6:21 - error TS2694: Namespace '"/Library/Mobile Documents/com~apple~CloudDocs/Desktop/app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
6 static ɵfac: i0.ɵɵFactoryDeclaration<NgxChessBoardService, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/ngx-chess-board/lib/service/ngx-chess-board.service.d.ts:7:22 - error TS2694: Namespace '"/Library/Mobile Documents/app/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
7 static ɵprov: i0.ɵɵInjectableDeclaration<NgxChessBoardService>;
~~~~~~~~~~~~~~~~~~~~~~~
我的 package.json 是：
{
"name": "App",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"main": "server.js",
"heroku-postbuild": "ng build --aot --prod",
"preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",
"start": "ng serve",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^11.0.5",
"@angular/cdk": "^11.0.3",
"@angular/common": "^11.0.5",
"@angular/compiler": "~11.2.14",
"@angular/compiler-cli": "~11.2.14",
"@angular/core": "^11.0.5",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "^11.0.5",
"@angular/localize": "^11.0.5",
"@angular/material": "^11.0.3",
"@angular/platform-browser": "11.0.5",
"@angular/platform-browser-dynamic": "11.0.5",
"@angular/router": "11.0.5",
"ng2-charts-schematics": "^0.1.7",
"@angular-devkit/build-angular": "^0.1100.5",
"@angular/cli": "11.0.5",
"@angular/language-service": "^11.0.5",
"@fortawesome/fontawesome-free": "^5.15.1",
"@types/chartist": "^0.11.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.135",
"@types/node": "^8.10.66",
"@types/uuid": "^8.3.0",
"angular-cli-ghpages": "^0.6.2",
"protractor": "^7.0.0",
"ts-node": "~5.0.1",
"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@ng-bootstrap/schematics": "^2.0.0-alpha.1",
"@ngtools/webpack": "^11.0.5",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"@types/chart.js": "^2.7.42",
"@types/express": "^4.17.0",
"@types/w3c-web-usb": "^1.0.4",
"@types/web-bluetooth": "0.0.4",
"angular-bootstrap-md": "^7.4.3",
"angular-cc-library": "^2.1.2",
"angular-notifier": "^4.1.1",
"angular-responsive-carousel": "^2.0.2",
"angular5-csv": "^0.2.11",
"apexcharts": "^3.25.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"chartist": "^0.11.4",
"config": "^3.3.6",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"css-loader": "^2.1.0",
"dotenv": "^6.1.0",
"exec": "^0.2.1",
"express": "^4.16.4",
"express-jwt": "^5.3.1",
"express-sslify": "^1.2.0",
"font-awesome": "^4.7.0",
"fontawesome": "^5.6.3",
"got": "^11.8.1",
"hammerjs": "^2.0.8",
"jsonwebtoken": "^8.2.2",
"ldbutton": "^1.0.2",
"lodash": "^4.17.11",
"mat-table-exporter": "^1.0.2",
"material-design-lite": "^1.3.0",
"mdbootstrap": "^4.19.2",
"mongodb": "^3.0.10",
"mongoose": "^5.1.4",
"ng-apexcharts": "^1.5.8",
"ng-chartist": "^4.1.0",
"ng-multiselect-dropdown": "^0.2.3",
"ng-thermal-print": "^1.0.3",
"ng2-charts": "^2.4.2",
"ngx-autosize": "^1.8.4",
"ngx-bootstrap": "^6.2.0",
"ngx-chess-board": "^2.0.7",
"path": "^0.12.7",
"popper.js": "^1.15.0",
"pusher": "^2.2.0",
"pusher-js": "^4.4.0",
"readable-stream": "^3.6.0",
"remote-pay-cloud": "3.1.0",
"remote-pay-cloud-api": "^4.0.3",
"request": "^2.88.2",
"request-promise": "^4.2.4",
"resize-base64": "^1.0.12",
"rootpath": "^0.1.2",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.3.3",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.9.0",
"typescript": "4.0.5",
"uuid": "^3.3.2",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/core": "^11.0.5",
"@angular-devkit/schematics": "^11.0.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"ng2-charts-schematics": "^0.1.7",
"protractor": "^7.0.0",
"ts-node": "~5.0.1",
"tslint": "~6.1.3"
},
"engines": {
"node": "10.13",
"npm": "6.9.0"
}
}
我的 app.module.ts：
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule, HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
// used to create fake backend
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {routing} from './app.routing';
import {AlertComponent} from './_directives';
import {AuthGuard} from './_guards';
import {JwtInterceptor, ErrorInterceptor} from './_helpers';
import {AlertService, AuthenticationService, UserService} from './_services';
import {HomeComponent} from './home';
import {LoginComponent} from './login';
import {RegisterComponent} from './register';
import {TimeAgoPipe} from 'time-ago-pipe'
import {MDBBootstrapModule} from 'angular-bootstrap-md';
import {YoutubeComponent} from './youtube/youtube.component';
import {ChartOfUserAccountsComponent} from './chart-of-user-accounts/chart-of-user-accounts.component';
import {DropdownUserRolesComponent} from './dropdown-user-roles/dropdown-user-roles.component';
import {VideosListComponent} from './videos-list/videos-list.component';
import {VideosSearchComponent} from './videos-search/videos-search.component';
import {VideosPlaylistComponent} from './videos-playlist/videos-playlist.component';
import {VideoDurationPipe} from './shared/pipes/video-duration.pipe';
import {VideoPlayerComponent} from './video-player/video-player.component';
import {VideoLikesViewsPipe} from './shared/pipes/video-likes-views.pipe';
import {VideoNamePipe} from './shared/pipes/video-name.pipe';
import {LazyScrollDirective} from './shared/directives/lazy-scroll/lazy-scroll.directive';
import {YoutubeApiService} from './shared/services/youtube-api.service';
import {YoutubePlayerService} from './shared/services/youtube-player.service';
import {PlaylistStoreService} from './shared/services/playlist-store.service';
import {NotificationService} from './shared/services/notification.service';
import {BrowserNotificationService} from './shared/services/browser-notification.service';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import {HelpComponent} from './help/help.component';
import {CreateUserComponent} from './create-user/create-user.component';
import { AddCategoryComponent } from './add-category/add-category.component';
import { CategoriesComponent } from './categories/categories.component';
import {DropdownCategoriesComponent} from './dropdown-categories/dropdown-categories.component';
import { AddItemComponent } from './add-item/add-item.component';
import {CartService} from './_services/cart.service';
import { ViewCartComponent } from './view-cart/view-cart.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ItemsByCategoryComponent } from './items-by-category/items-by-category.component';
import { ItemsPageComponent } from './items-page/items-page.component';
import { OrderHistoryComponent } from './order-history/order-history.component';
import { DropdownBooleanSelectorComponent } from './dropdown-boolean-selector/dropdown-boolean-selector.component';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import {DropdownItemOptionSelectorComponent} from './dropdown-item-option-selector/dropdown-item-option-selector.component';
import { ViewOrdersComponent } from './view-orders/view-orders.component';
import { TableSummaryComponent } from './table-summary/table-summary.component';
import { DropdownTableSelectorComponent } from './dropdown-table-selector/dropdown-table-selector.component';
import { DropdownFilterByItemSelectorComponent } from './dropdown-filter-by-item-selector/dropdown-filter-by-item-selector.component';
import { DropdownFilterByCategorySelectorComponent } from './dropdown-filter-by-category-selector/dropdown-filter-by-category-selector.component';
import {SidebarMenuComponent} from './sidebar-menu/sidebar-menu.component';
import { ItemOptionsDialogComponentComponent } from './item-options-dialog-component/item-options-dialog-component.component';
import { NotificationPopupComponent } from './notification-popup/notification-popup.component';
import {NotifierModule, NotifierOptions} from 'angular-notifier';
import { OrderHistoryDataTableComponent } from './order-history-data-table/order-history-data-table.component';
import { ServerOrderComponent } from './server-order/server-order.component';
import {NotificationConfirmationComponentComponent} from './notification-confirmation-component/notification-confirmation-component.component';
import { WaiterReadyOrderViewComponent } from './waiter-ready-order-view/waiter-ready-order-view.component';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { DropdownLanguageSelectorComponent } from './dropdown-language-selector/dropdown-language-selector.component';
import { CustomMessageItemDialogComponent } from './custom-message-item-dialog/custom-message-item-dialog.component';
import { KioskComponent } from './kiosk/kiosk.component';
import {CloverAuthenticationService} from './_services/cloverAuthentication.service';
import { CategoriesByItemComponent } from './categories-by-item/categories-by-item.component';
import { UploadImageDialogComponent } from './upload-image-dialog/upload-image-dialog.component';
import {LogoutComponent} from './logout/logout.component';
import {addTipComponent} from './add-tip/add-tip.component';
import {paymentReceiptComponent} from './payment-receipt/payment-receipt.component';
import {PrinterListComponent} from './printer-list/printer-list.component';
import { PaymentPendingScreenComponent } from './payment-pending-screen/payment-pending-screen.component';
import { CreditCardDirectivesModule } from 'angular-cc-library';
import { CreditCardPaymentScreenComponent } from './credit-card-payment-screen/credit-card-payment-screen.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {Provider, Type} from '@angular/core';
import {ThermalPrintModule} from 'ng-thermal-print';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatListModule} from '@angular/material/list';
import { DashboardComponent } from './dashboard/dashboard.component';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';
import {MatTooltipModule} from '@angular/material/tooltip';
import {ChartistModule} from 'ng-chartist';
import {RouterModule} from '@angular/router';
import { NgApexchartsModule } from 'ng-apexcharts';
import {AutosizeModule} from 'ngx-autosize';
import {ServerRequestService} from './_services/serverRequest.service';
import {AuthGuardClover} from './_guards/authClover.guard';;
import { GamesComponent } from './games/games.component';
import {NgxChessBoardModule} from 'ngx-chess-board';
import { CloverAuthRouterComponent } from './clover-auth-router/clover-auth-router.component';
const customNotifierOptions: NotifierOptions = {
position: {
horizontal: {
position: 'right',
distance: 12
},
vertical: {
position: 'top',
distance: 60,
gap: 10
}
},
theme: 'material',
behaviour: {
autoHide: 5000,
onClick: 'hide',
onMouseover: 'pauseAutoHide',
showDismissButton: true,
stacking: 4
},
animations: {
enabled: true,
show: {
preset: 'slide',
speed: 300,
easing: 'ease'
},
hide: {
preset: 'fade',
speed: 300,
easing: 'ease',
offset: 50
},
shift: {
speed: 300,
easing: 'ease'
},
overlap: 150
}
};
@NgModule({
imports: [
MDBBootstrapModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
BrowserModule,
DragDropModule,
ReactiveFormsModule,
HttpClientModule,
AutosizeModule,
routing,
FormsModule,
NgxChessBoardModule.forRoot(),
NotifierModule.withConfig(customNotifierOptions),
MatIconModule,
CreditCardDirectivesModule,
BrowserAnimationsModule,
MatSidenavModule,
NgApexchartsModule,
MatCheckboxModule,
MatFormFieldModule,
MatTableModule,
MatSortModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule,
MatDividerModule,
MatCardModule,
MatPaginatorModule,
MatSelectModule,
MatSlideToggleModule,
MatExpansionModule,
ThermalPrintModule,
MatNativeDateModule,
NgbModule,
MatTooltipModule,
ChartistModule,
MatDatepickerModule,
MatInputModule,
MatListModule,
MatButtonToggleModule,
MatProgressSpinnerModule,
NgMultiSelectDropDownModule.forRoot(),
MatDialogModule,
FlexLayoutModule],
entryComponents: [
ItemOptionsDialogComponentComponent,
NotificationPopupComponent,
NotificationConfirmationComponentComponent,
CustomMessageItemDialogComponent,
UploadImageDialogComponent
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
TimeAgoPipe,
DropdownUserRolesComponent,
DropdownCategoriesComponent,
ChartOfUserAccountsComponent,
YoutubeComponent,
AppComponent,
VideosListComponent,
VideosSearchComponent,
VideoPlayerComponent,
VideosPlaylistComponent,
VideoDurationPipe,
VideoLikesViewsPipe,
VideoNamePipe,
LazyScrollDirective,
HelpComponent,
CreateUserComponent,
AddCategoryComponent,
CategoriesComponent,
AddItemComponent,
ViewCartComponent,
ItemsByCategoryComponent,
ItemsPageComponent,
OrderHistoryComponent,
DropdownBooleanSelectorComponent,
DropdownItemOptionSelectorComponent,
ViewOrdersComponent,
TableSummaryComponent,
DropdownTableSelectorComponent,
DropdownFilterByItemSelectorComponent,
SidebarMenuComponent,
DropdownFilterByCategorySelectorComponent ,
ItemOptionsDialogComponentComponent,
NotificationPopupComponent ,
OrderHistoryDataTableComponent ,
ServerOrderComponent,
NotificationConfirmationComponentComponent,
WaiterReadyOrderViewComponent ,
DropdownLanguageSelectorComponent ,
CustomMessageItemDialogComponent,
CategoriesByItemComponent,
KioskComponent,
LogoutComponent,
UploadImageDialogComponent,
addTipComponent,
paymentReceiptComponent,
PrinterListComponent,
PaymentPendingScreenComponent,
CreditCardPaymentScreenComponent
,
DashboardComponent ,
GamesComponent ,
CloverAuthRouterComponent],
providers: [
AuthGuard,
AuthGuardClover,
AlertService,
AuthenticationService,
ViewCartComponent,
UserService,
YoutubeApiService,
CloverAuthenticationService,
YoutubePlayerService,
CartService,
PlaylistStoreService,
ServerRequestService,
NotificationService,
BrowserNotificationService,
addTipComponent,
paymentReceiptComponent,
PrinterListComponent,
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
declare module '@angular/core' {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
【问题讨论】：
标签： javascript angular dependencies angular13