我正在尝试将自定义共享组件库导入到我从 Angular 5 升级到 Angular 4 的 Angular 应用程序中。
但是,我遇到了无法解决的问题。
错误如下:
compiler.js:485 Uncaught Error: Can't resolve all parameters for LibSharedComponentsModule: ([object Object], ?, ?).
at syntaxError (compiler.js:485)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15692)
at CompileMetadataResolver._getTypeMetadata (compiler.js:15527)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15326)
at CompileMetadataResolver.getNgModuleSummary (compiler.js:15125)
at eval (compiler.js:15223)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15201)
at JitCompiler._loadModules (compiler.js:34385)
at JitCompiler._compileModuleAndComponents (compiler.js:34346)
syntaxError @ compiler.js:485
CompileMetadataResolver._getDependenciesMetadata @ compiler.js:15692
CompileMetadataResolver._getTypeMetadata @ compiler.js:15527
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15326
CompileMetadataResolver.getNgModuleSummary @ compiler.js:15125
(anonymous) @ compiler.js:15223
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15201
JitCompiler._loadModules @ compiler.js:34385
JitCompiler._compileModuleAndComponents @ compiler.js:34346
JitCompiler.compileModuleAsync @ compiler.js:34240
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5551
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:174
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:189
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
LibSharedComponentsModule
是我的库,我不明白参数错误指的是什么。
我在下面粘贴了我的AppModule
和LibSharedComponentsModule
代码:
应用模块
import { NgModule, ErrorHandler } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpHeaders } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppRoutes } from './app.routes';
import 'rxjs/add/operator/toPromise';
// Auth0 library for authentication
import auth0 from 'auth0-js';
// Apollo for GraphQL queries
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, from } from 'apollo-link';
// PrimeNG components
import { AccordionModule } from 'primeng/primeng';
import { AutoCompleteModule } from 'primeng/primeng';
import { BreadcrumbModule } from 'primeng/primeng';
import { ButtonModule } from 'primeng/primeng';
import { CalendarModule } from 'primeng/primeng';
import { CarouselModule } from 'primeng/primeng';
import { ChartModule } from 'primeng/primeng';
import { CheckboxModule } from 'primeng/primeng';
import { ChipsModule } from 'primeng/primeng';
import { CodeHighlighterModule } from 'primeng/primeng';
import { ConfirmDialogModule } from 'primeng/primeng';
import { SharedModule } from 'primeng/primeng';
import { ContextMenuModule } from 'primeng/primeng';
import { DataGridModule } from 'primeng/primeng';
import { DataListModule } from 'primeng/primeng';
import { DataScrollerModule } from 'primeng/primeng';
import { DataTableModule } from 'primeng/primeng';
import { DialogModule } from 'primeng/primeng';
import { DragDropModule } from 'primeng/primeng';
import { DropdownModule } from 'primeng/primeng';
import { EditorModule } from 'primeng/primeng';
import { FieldsetModule } from 'primeng/primeng';
import { FileUploadModule } from 'primeng/primeng';
import { GalleriaModule } from 'primeng/primeng';
import { GMapModule } from 'primeng/primeng';
import { GrowlModule } from 'primeng/primeng';
import { InputMaskModule } from 'primeng/primeng';
import { InputSwitchModule } from 'primeng/primeng';
import { InputTextModule } from 'primeng/primeng';
import { InputTextareaModule } from 'primeng/primeng';
import { LightboxModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';
import { MegaMenuModule } from 'primeng/primeng';
import { MenuModule } from 'primeng/primeng';
import { MenubarModule } from 'primeng/primeng';
import { MessagesModule } from 'primeng/primeng';
import { MultiSelectModule } from 'primeng/primeng';
import { OrderListModule } from 'primeng/primeng';
import { OverlayPanelModule } from 'primeng/primeng';
import { PaginatorModule } from 'primeng/primeng';
import { PanelModule } from 'primeng/primeng';
import { PanelMenuModule } from 'primeng/primeng';
import { PasswordModule } from 'primeng/primeng';
import { PickListModule } from 'primeng/primeng';
import { ProgressBarModule } from 'primeng/primeng';
import { RadioButtonModule } from 'primeng/primeng';
import { RatingModule } from 'primeng/primeng';
import { ScheduleModule } from 'primeng/primeng';
import { SelectButtonModule } from 'primeng/primeng';
import { SlideMenuModule } from 'primeng/primeng';
import { SliderModule } from 'primeng/primeng';
import { SpinnerModule } from 'primeng/primeng';
import { SplitButtonModule } from 'primeng/primeng';
import { StepsModule } from 'primeng/primeng';
import { TabMenuModule } from 'primeng/primeng';
import { TabViewModule } from 'primeng/primeng';
import { TerminalModule } from 'primeng/primeng';
import { TieredMenuModule } from 'primeng/primeng';
import { ToggleButtonModule } from 'primeng/primeng';
import { ToolbarModule } from 'primeng/primeng';
import { TooltipModule } from 'primeng/primeng';
import { TreeModule } from 'primeng/primeng';
import { TreeTableModule } from 'primeng/primeng';
// Admin components
import { AppComponent } from './app.component';
import { AppMenuComponent, AppSubMenuComponent } from './app.menu.component';
import { AppSideBarComponent } from './app.sidebar.component';
import {AppSidebartabcontentComponent} from './app.sidebartabcontent.component';
import {AppTopbarComponent} from './app.topbar.component';
import {AppFooterComponent} from './app.footer.component';
import { DashboardComponent } from './admin/dashboard.component';
import { StudentDetailsComponent } from './admin/studentdetails.component';
import { RequestsComponent } from './admin/requests.component';
import { EmptyDemo } from './admin/emptydemo';
import { CallbackComponent } from './admin/callback.component';
import { LibSharedComponentsModule } from 'lib-shared-components';
import { ToasterService } from 'lib-shared-components';
import { StudentService } from 'lib-shared-components';
import { AuthService } from 'lib-shared-components';
import { ErrorService } from 'lib-shared-components';
import { AuthenticatedGuard } from 'lib-shared-components';
@NgModule({
imports: [
// ApiModule.forConfig(apiConfig),
// ApolloModule.forRoot(provideClient),
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutes,
HttpModule,
BrowserAnimationsModule,
AccordionModule,
AutoCompleteModule,
BreadcrumbModule,
ButtonModule,
CalendarModule,
CarouselModule,
ChartModule,
CheckboxModule,
ChipsModule,
CodeHighlighterModule,
ConfirmDialogModule,
SharedModule,
ContextMenuModule,
DataGridModule,
DataListModule,
DataScrollerModule,
DataTableModule,
DialogModule,
DragDropModule,
DropdownModule,
EditorModule,
FieldsetModule,
FileUploadModule,
GalleriaModule,
GMapModule,
GrowlModule,
InputMaskModule,
InputSwitchModule,
InputTextModule,
InputTextareaModule,
LightboxModule,
ListboxModule,
MegaMenuModule,
MenuModule,
MenubarModule,
MessagesModule,
MultiSelectModule,
OrderListModule,
OverlayPanelModule,
PaginatorModule,
PanelModule,
PanelMenuModule,
PasswordModule,
PickListModule,
ProgressBarModule,
RadioButtonModule,
RatingModule,
ScheduleModule,
SelectButtonModule,
SlideMenuModule,
SliderModule,
SpinnerModule,
SplitButtonModule,
StepsModule,
TabMenuModule,
TabViewModule,
TerminalModule,
TieredMenuModule,
ToggleButtonModule,
ToolbarModule,
TooltipModule,
TreeModule,
TreeTableModule,
LibSharedComponentsModule.forRoot(),
],
declarations: [
AppComponent,
AppMenuComponent,
AppSubMenuComponent,
AppSideBarComponent,
AppTopbarComponent,
AppFooterComponent,
DashboardComponent,
StudentDetailsComponent,
RequestsComponent,
EmptyDemo,
CallbackComponent
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
AuthService, AuthenticatedGuard, ToasterService, StudentService, { provide: ErrorHandler, useClass: ErrorService }
],
bootstrap: [AppComponent]
})
export class AppModule {
// tslint:disable-next-line:no-shadowed-variable
constructor(
apollo: Apollo,
// tslint:disable-next-line:no-shadowed-variable
httpLink, HttpLink
) {
const http = httpLink.create({uri: 'http://localhost:5000/graphql'});
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
// we assume `headers` as a defined instance of HttpHeaders
operation.setContext(({ headers }) => ({
headers: headers.append('Authorization', localStorage.getItem('access_token') || null),
}));
return forward(operation);
});
// const otherMiddleware = new ApolloLink((operation, forward) => {
// // add the authorization to the headers
// // we assume `headers` as a defined instance of HttpHeaders
// operation.setContext(({ headers }) => ({
// headers: headers.append('recent-activity', localStorage.getItem('lastOnlineTime') || null)
// }));
// return forward(operation);
// });
// otherMiddleware,
apollo.create({
link: from([authMiddleware, http]),
cache: new InMemoryCache(),
connectToDevTools: true,
});
}
}
LibSharedComponents 模块
import { NgModule, ModuleWithProviders, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpHeaders } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'rxjs/add/operator/toPromise';
// PrimeNG for UI Components
import { AccordionModule } from 'primeng/primeng';
import { AutoCompleteModule } from 'primeng/primeng';
import { BreadcrumbModule } from 'primeng/primeng';
import { ButtonModule } from 'primeng/primeng';
import { CalendarModule } from 'primeng/primeng';
import { CarouselModule } from 'primeng/primeng';
import { ChartModule } from 'primeng/primeng';
import { CheckboxModule } from 'primeng/primeng';
import { ChipsModule } from 'primeng/primeng';
import { CodeHighlighterModule } from 'primeng/primeng';
import { ConfirmDialogModule } from 'primeng/primeng';
import { SharedModule } from 'primeng/primeng';
import { ContextMenuModule } from 'primeng/primeng';
import { DataGridModule } from 'primeng/primeng';
import { DataListModule } from 'primeng/primeng';
import { DataScrollerModule } from 'primeng/primeng';
import { DataTableModule } from 'primeng/primeng';
import { DialogModule } from 'primeng/primeng';
import { DragDropModule } from 'primeng/primeng';
import { DropdownModule } from 'primeng/primeng';
import { EditorModule } from 'primeng/primeng';
import { FieldsetModule } from 'primeng/primeng';
import { FileUploadModule } from 'primeng/primeng';
import { GalleriaModule } from 'primeng/primeng';
import { GMapModule } from 'primeng/primeng';
import { GrowlModule } from 'primeng/primeng';
import { InputMaskModule } from 'primeng/primeng';
import { InputSwitchModule } from 'primeng/primeng';
import { InputTextModule } from 'primeng/primeng';
import { InputTextareaModule } from 'primeng/primeng';
import { LightboxModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';
import { MegaMenuModule } from 'primeng/primeng';
import { MenuModule } from 'primeng/primeng';
import { MenubarModule } from 'primeng/primeng';
import { MessagesModule } from 'primeng/primeng';
import { MultiSelectModule } from 'primeng/primeng';
import { OrderListModule } from 'primeng/primeng';
import { OverlayPanelModule } from 'primeng/primeng';
import { PaginatorModule } from 'primeng/primeng';
import { PanelModule } from 'primeng/primeng';
import { PanelMenuModule } from 'primeng/primeng';
import { PasswordModule } from 'primeng/primeng';
import { PickListModule } from 'primeng/primeng';
import { ProgressBarModule } from 'primeng/primeng';
import { RadioButtonModule } from 'primeng/primeng';
import { RatingModule } from 'primeng/primeng';
import { ScheduleModule } from 'primeng/primeng';
import { SelectButtonModule } from 'primeng/primeng';
import { SlideMenuModule } from 'primeng/primeng';
import { SliderModule } from 'primeng/primeng';
import { SpinnerModule } from 'primeng/primeng';
import { SplitButtonModule } from 'primeng/primeng';
import { StepsModule } from 'primeng/primeng';
import { TabMenuModule } from 'primeng/primeng';
import { TabViewModule } from 'primeng/primeng';
import { TerminalModule } from 'primeng/primeng';
import { TieredMenuModule } from 'primeng/primeng';
import { ToggleButtonModule } from 'primeng/primeng';
import { ToolbarModule } from 'primeng/primeng';
import { TooltipModule } from 'primeng/primeng';
import { TreeModule } from 'primeng/primeng';
import { TreeTableModule } from 'primeng/primeng';
// Auth0 library for authentication
import auth0 from 'auth0-js';
// Apollo for GraphQL queries
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, from } from 'apollo-link';
// Component Import
import { DeleteButtonComponent } from './component/deletebutton.component';
import { StudentRequestComponent } from './component/studentrequest.component';
import { StudentPersonalDetailsComponent } from './component/studentpersonaldetails.component';
import { StudentSearchComponent } from './component/studentsearch.component';
import { StudentLetterComponent } from './component/studentletter.component';
import { LetterDetailsComponent } from './component/letterdetails.component';
import { RequestDetailsComponent } from './component/requestdetails.component';
import { RequestProcessComponent } from './component/requestprocess.component';
import { ViewCommentComponent } from './component/viewcomment.component';
import { ViewProgramComponent } from './component/viewprogram.component';
import { ViewQuoteComponent } from './component/viewquote.component';
// Service Import
import { AuthService } from './service/auth.service';
import { ToasterService } from './service/alert.service';
import { StudentService } from './service/student.service';
import { ErrorService } from './service/error.service';
import { AuthenticatedGuard } from './guards/auth.guard';
// Component Export
export * from './component/deletebutton.component';
export * from './component/studentpersonaldetails.component';
export * from './component/studentsearch.component';
export * from './component/studentrequest.component';
export * from './component/studentletter.component';
export * from './component/letterdetails.component';
export * from './component/requestprocess.component';
export * from './component/requestdetails.component';
export * from './component/viewcomment.component';
export * from './component/viewprogram.component';
export * from './component/viewquote.component';
// Service Export
export * from './service/auth.service';
export * from './service/alert.service';
export * from './service/student.service';
export * from './service/error.service';
// Guard Export
export * from './guards/auth.guard'
@NgModule({
imports: [
CommonModule,
// BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
// BrowserAnimationsModule,
AccordionModule,
AutoCompleteModule,
BreadcrumbModule,
ButtonModule,
CalendarModule,
CarouselModule,
ChartModule,
CheckboxModule,
ChipsModule,
CodeHighlighterModule,
ConfirmDialogModule,
SharedModule,
ContextMenuModule,
DataGridModule,
DataListModule,
DataScrollerModule,
DataTableModule,
DialogModule,
DragDropModule,
DropdownModule,
EditorModule,
FieldsetModule,
FileUploadModule,
GalleriaModule,
GMapModule,
GrowlModule,
InputMaskModule,
InputSwitchModule,
InputTextModule,
InputTextareaModule,
LightboxModule,
ListboxModule,
MegaMenuModule,
MenuModule,
MenubarModule,
MessagesModule,
MultiSelectModule,
OrderListModule,
OverlayPanelModule,
PaginatorModule,
PanelModule,
PanelMenuModule,
PasswordModule,
PickListModule,
ProgressBarModule,
RadioButtonModule,
RatingModule,
ScheduleModule,
SelectButtonModule,
SlideMenuModule,
SliderModule,
SpinnerModule,
SplitButtonModule,
StepsModule,
TabMenuModule,
TabViewModule,
TerminalModule,
TieredMenuModule,
ToggleButtonModule,
ToolbarModule,
TooltipModule,
TreeModule,
TreeTableModule,
// AgGridModule.withComponents([])
],
declarations: [
DeleteButtonComponent,
StudentPersonalDetailsComponent,
StudentSearchComponent,
StudentLetterComponent,
StudentRequestComponent,
LetterDetailsComponent,
RequestProcessComponent,
RequestDetailsComponent,
ViewCommentComponent,
ViewProgramComponent,
ViewQuoteComponent
],
exports: [
DeleteButtonComponent,
StudentPersonalDetailsComponent,
StudentSearchComponent,
StudentLetterComponent,
StudentRequestComponent,
LetterDetailsComponent,
RequestProcessComponent,
RequestDetailsComponent,
ViewCommentComponent,
ViewProgramComponent,
ViewQuoteComponent
]
})
export class LibSharedComponentsModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: LibSharedComponentsModule,
providers: [
AuthService,
AuthenticatedGuard,
ToasterService,
StudentService,
ErrorService,
{ provide: ErrorHandler, useClass: ErrorService }]
};
}
// tslint:disable-next-line:no-shadowed-variable
constructor(
apollo: Apollo,
// tslint:disable-next-line:no-shadowed-variable
httpLink, HttpLink
) {
const http = httpLink.create({uri: 'http://localhost:5000/graphql'});
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
// we assume `headers` as a defined instance of HttpHeaders
operation.setContext(({ headers }) => ({
headers: headers.append('Authorization', localStorage.getItem('access_token') || null),
}));
return forward(operation);
});
// const otherMiddleware = new ApolloLink((operation, forward) => {
// // add the authorization to the headers
// // we assume `headers` as a defined instance of HttpHeaders
// operation.setContext(({ headers }) => ({
// headers: headers.append('recent-activity', localStorage.getItem('lastOnlineTime') || null)
// }));
// return forward(operation);
// });
// otherMiddleware
apollo.create({
link: from([authMiddleware, http]),
cache: new InMemoryCache()
});
}
}
如果有人可以建议我如何使用调试器进一步深入研究此错误或建议如何解决它,我们将不胜感激。Webpack
如果这有什么不同,我正在使用。
请仔细看看这部分:
constructor(
apollo: Apollo,
// tslint:disable-next-line:no-shadowed-variable
httpLink, HttpLink // <-- are you sure about that comma? looks more like there should be a colon here
) {
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句