0

categoria.component.html

<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Iamout</td>
      <td>Ofinspiration</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yoda</td>
      <td>Skywalker</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Patrick</td>
      <td>Dupont</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Barack</td>
      <td>Obama</td>
    </tr>
    <tr>
      <td>7</td>
      <td>François</td>
      <td>Holland</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Michel</td>
      <td>Popo</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Chuck</td>
      <td>Norris</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Simon</td>
      <td>Robin</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Louis</td>
      <td>Lin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Zelda</td>
      <td>Link</td>
    </tr>
  </tbody>
</table>

categoria.component.ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { CategoriaService } from '../services/categoria.service';
import { Categoria } from '../models/categoria';

@Component({
    selector: 'app-categoria',
    templateUrl: '../views/categoria.component.html',
    styleUrls: ['../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaComponent implements OnInit {

  public id;
  public categoria: Categoria[] = [];

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _categoriaService:CategoriaService
  ){
  }

  ngOnInit(): void {

  }
}

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 { routing, appRoutingProviders } from './app.routing';
import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';
import { CategoriaComponent } from './components/categoria.component';

@NgModule({
  declarations: [
    AppComponent,
    CategoriaComponent,
    DataTablesModule
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "webapp2": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/webapp2",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "webapp2:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "webapp2:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "webapp2:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "webapp2-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "webapp2:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "webapp2:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "webapp2"
}

El error que me arroja es el siguiente:

Uncaught ReferenceError: angular is not defined at Object../node_modules/angular-datatables/dist/angular-datatables.js

5
  • 2
    Y el error es... ¿? Commented el 18 sept. 2018 a las 14:41
  • @PabloLozano una distracción y lo publique sin colocar el error.
    – bypabloc_
    Commented el 18 sept. 2018 a las 14:43
  • Prueba con npm install [email protected], es lo que se recomienda en el Github oficial. Commented el 18 sept. 2018 a las 14:47
  • @FedericoMadoery interesante, ahora cambio el error a Uncaught Error: Unexpected module 'DataTablesModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    – bypabloc_
    Commented el 18 sept. 2018 a las 14:54
  • Ya, es un error mio allí, en @NgModule, coloque DataTablesModule en los declarations y va en imports.
    – bypabloc_
    Commented el 18 sept. 2018 a las 15:01

1 respuesta 1

2

Para el primer error que te presenta:

Uncaught ReferenceError: angular is not defined at Object../node_modules/angular-datatables/dist/angular-datatables.js

Lo puedes solucionar ejecutando el siguiente comando:

npm install [email protected]

Fuente: Github oficial de angular-datatables.


El segundo error (mostrado en los comentarios):

Uncaught Error: Unexpected module 'DataTablesModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

Esta dado por un error de importación en AppModule:

@NgModule({
  declarations: [
    AppComponent,
    CategoriaComponent,
    DataTablesModule // Erroneo
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})

La importación de este tipo de módulos va en el array de imports, como se muestra a continuación:

@NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...,
        DataTablesModule // Correcto
      ],
      ....
    })
1
  • Muchas gracias :D
    – bypabloc_
    Commented el 18 sept. 2018 a las 15:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.