错误:模块'LayoutModule'声明的意外值'FileExportService'。请添加@ Pipe / @ Directive / @ Component注释

时间:2018-03-12 05:47:04

标签: angular typescript

在我的项目中,app.module.ts是主模块,layout.module.ts是子模块。 关于这个错误的有趣之处在于,当我使用命令构建 ng build --prod --aot 并且只是 ng build 它在localhost上正常工作时没有任何error.But每当我们使用java后端在服务器中部署时。它开始显示此错误.. 我使用了懒惰加载......

我的app.module.ts

        import { NgModule } from '@angular/core';
        import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        import { Http, HttpModule } from '@angular/http';
        import { DatePipe, DecimalPipe } from '@angular/common';
        import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
        import { BrowserModule } from '@angular/platform-browser';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
        import { TranslateHttpLoader } from '@ngx-translate/http-loader';
        import { AppRoutingModule } from './app-routing.module';
        import { AppComponent } from './app.component';
        import { FileExportService } from './shared';

        @NgModule({
        declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        HttpClientXsrfModule,
        AppRoutingModule,
        SharedPipesModule,

        NgxPermissionsModule.forChild(),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
    ],
    providers: [
        FileExportService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: TfmHttpInterceptorService,
            multi: true,
        }
      ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

我的layout.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { LayoutRoutingModule } from './layout-routing.module';
import { LayoutComponent } from './layout.component';
import { HeaderComponent, SidebarComponent, QuickaccessComponent } from '../shared';
import { SharedModule } from '../shared/modules/shared.module';
import { jqxMenuComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxmenu';
import { TreeModule } from 'angular-tree-component';

@NgModule({
    imports: [
        CommonModule,
        LayoutRoutingModule,
        TranslateModule,
        TreeModule,
        SharedModule,
    ],
    declarations: [
        LayoutComponent,
        HeaderComponent,
        SidebarComponent,
        QuickaccessComponent,
        jqxMenuComponent,
    ],
    providers: [

    ],
    entryComponents:[
        QuickaccessComponent,
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
})
export class LayoutModule { }

我的package.json是

{
    "name": "my-data-processing-system",
    "version": "0.0.1",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --ec true --port 4201",
        "build": "ng build --prod",
        "gitbuild": "ng build --prod --base /start-angular/SB-Admin-BS4-Angular-4/master/dist/",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^4.3.6",
        "@angular/common": "^4.3.6",
        "@angular/compiler": "^4.3.6",
        "@angular/core": "^4.3.6",
        "@angular/forms": "^4.3.6",
        "@angular/http": "^4.3.6",
        "@angular/platform-browser": "^4.3.6",
        "@angular/platform-browser-dynamic": "^4.3.6",
        "@angular/router": "^4.3.6",
        "@ngx-translate/core": "^7.2.0",
        "@ngx-translate/http-loader": "^0.1.0",
        "angular-tree-component": "^7.0.1",
        "angular2-jwt": "^0.2.3",
        "bootstrap": "^4.0.0-beta.2",
        "core-js": "^2.5.3",
        "file-saver": "^1.3.3",
        "font-awesome": "^4.7.0",
        "jqwidgets-framework": "^5.6.0",
        "json-stable-stringify": "^1.0.1",
        "ng-pdf-make": "0.0.2",
        "ng2-charts": "^1.6.0",
        "ngx-permissions": "^3.2.2",
        "pdfmake": "^0.1.35",
        "rxjs": "^5.5.6",
        "xlsx": "^0.11.19",
        "zone.js": "^0.8.20"
    },
    "devDependencies": {
        "@angular/cli": "^1.6.8",
        "@angular/compiler-cli": "^4.3.1",
        "@angular/language-service": "^4.3.1",
        "@types/jasmine": "2.5.45",
        "@types/node": "^6.0.101",
        "codelyzer": "~3.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "^1.7.1",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.4.1",
        "karma-jasmine": "^1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.0.4",
        "tslint": "~5.3.2",
        "typescript": "~2.5.2"
    }
}

my file-export.service.ts

import { Injectable } from '@angular/core';
import { DatePipe, DecimalPipe } from '@angular/common';
import { utils, write, WorkBook } from 'xlsx';
import { saveAs } from 'file-saver';

@Injectable()
export class FileExportService {

  constructor(private datePipe: DatePipe,private decimalPipe: DecimalPipe) { }
  SaveFile(data,fileName){
    saveAs(data,fileName);
  }

}

1 个答案:

答案 0 :(得分:1)

在我的项目中,app.module.ts是主模块,layout.module.ts是子模块。

  1. 由于布局模块是子模块,因此请将该模块添加到app.module.ts中:

    import { LayoutModule } from 'path to your LayoutModule';
    ...
    @NgModule({
    imports: [
        ..., 
        LayoutModule 
    ]
    
  2. layout.module.ts中导出组件:

    ...
    entryComponents:[
         QuickaccessComponent,
    ],
    schemas: [ NO_ERRORS_SCHEMA ],
    exports: [                         // Here
        LayoutComponent,
        HeaderComponent,
        SidebarComponent,
        QuickaccessComponent,
        jqxMenuComponent,
    ]
    

还有:

  

模块 LayoutModule '

声明的意外值 FileExportService

所以还有一些问题:

  • 在供应商的任何地方,您的FileExportService中没有任何LayoutModule,所以这可能是问题所在吗?
  • 如果解决了,请将此FileExportService添加到LayoutModule @ngModule中的 provider 中。

我希望这会有所帮助:)