Неожиданная директива ‘DataTable’, импортируемая модулем ‘AppModule’

#angular #typescript

#angular #typescript

Вопрос:

В настоящее время я работаю над простым проектом angular 2, у меня есть весь мой импорт в моем app.module.ts, как показано ниже

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { StockListComponent } from './stock-list/stock-list.component';

import { routing } from "./app-routing.module";
import { StockItemComponent } from './stock-item/stock-item.component';
import { ProfileComponent } from './profile/profile.component';
import { DeviceConfigurationComponent } from './device-configuration/device-configuration.component';
import { StockStatusComponent } from './stock-status/stock-status.component';


import {Calendar, Dialog, Button, InputSwitch, Dropdown, Growl, DataTable, SelectButtonModule} from 'primeng/primeng';
import {JwtHelper, AuthHttp, tokenNotExpired} from "angular2-jwt";

import {AuthService} from './auth.service';
import {DataService} from './data.service';

@NgModule({
 declarations: [
  AppComponent,
  StockListComponent,
  StockItemComponent,
  ProfileComponent,
  DeviceConfigurationComponent,
  StockStatusComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  routing,
  DataTable,
  Calendar,
  Dialog,
  Button,
  InputSwitch,
  Dropdown,
  Growl,
  JwtHelper,
  AuthHttp,
  SelectButtonModule
 ],
 providers: [
  AuthService,
  DataService
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
  

У меня нет никаких ошибок в окне моего терминала, однако в окне консоли Chrome я получаю следующую ошибку.

 metadata_resolver.js:227Uncaught Error: Unexpected directive 'DataTable' imported by the module 'AppModule'(…)
(anonymous function) @metadata_resolver.js:227
CompileMetadataResolver.getNgModuleMetadata @metadata_resolver.js:212
RuntimeCompiler._compileComponents @runtime_compiler.js:130
RuntimeCompiler._compileModuleAndComponents @runtime_compiler.js:68
RuntimeCompiler.compileModuleAsync @runtime_compiler.js:59
PlatformRef_._bootstrapModuleWithZone @application_ref.js:302
PlatformRef_.bootstrapModule @ application_ref.js:284
(anonymous function) @ main.ts:12
__webpack_require__ @ bootstrap fbc4961…:52
(anonymous function) @ zone.js:1327
__webpack_require__ @ bootstrap fbc4961…:52
webpackJsonpCallback @ bootstrap fbc4961…:23
  

(анонимная функция) @ main.bundle.js: 1

Комментарии:

1. Какую версию primeng вы используете? Похоже, что они обновились со старого DataTable на более новый шаблон модуля: DataTableModule

2. Но я получаю ту же ошибку при импорте AuthHttp jwt

Ответ №1:

возможно, слишком поздно, и вы уже поняли это, но что касается AuthHttp, его не следует импортировать, а вместо этого предоставлять, взгляните на базовую конфигурацию angular2-jwt: https://github.com/auth0/angular2-jwt

 @NgModule({
    providers: [{
        provide: AuthHttp,
        useFactory: authHttpServiceFactory,
        deps: [Http, RequestOptions]
    }]
})