ERROR: angular is not defined - after installation

[wtgo]

I'm submitting a...

[ X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Question

Current behavior

I use:
Angular 6

after installation, and update the files
when I run "ng serve"

I got that error:
angular-datatables.js:1352 Uncaught ReferenceError: angular is not defined
at Object../node_modules/angular-datatables/dist/angular-datatables.js (angular-datatables.js:1352)
at webpack_require (bootstrap:76)
at Object../node_modules/angular-datatables/index.js (index.js:1)
at webpack_require (bootstrap:76)
at Object../src/app/app.module.ts (app.component.ts:8)
at webpack_require (bootstrap:76)
at Object../src/main.ts (environment.ts:15)
at webpack_require (bootstrap:76)
at Object.0 (top-bar.component.ts:11)
at webpack_require (bootstrap:76)

// ---------------- package.json ------------------------------------
{
"name": "activity-log",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --base-href /A_score/office/activityLog/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"@independer/ng-modal": "^2.0.0",
"@ng-select/ng-select": "^2.3.5",
"angular-datatables": "^0.6.3",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.2",
"core-js": "^2.5.4",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"ngx-bootstrap": "^3.0.1",
"ngx-spinner": "^6.0.0",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.1",
"@angular/cli": "~6.0.1",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/datatables.net": "^1.10.13",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.6",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}

// ---------------- end of package.json ------------------------------------

// ------------- app.module ---------------------------
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ModalModule } from '@independer/ng-modal';
import { NgSelectModule } from '@ng-select/ng-select';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { TooltipModule } from 'ngx-bootstrap';
import { NgxSpinnerModule } from 'ngx-spinner';
import { HttpModule } from '@angular/http';

import { ActivityLogListComponent } from './activity-log-list/activity-log-list.component';
import { ActivityComponent } from './activity/activity/activity.component';
import { AgentComponent } from './activity/otherData/agent/agent.component';
import { CustomerComponent } from './activity/otherData/customer/customer.component';
import { GuideComponent } from './activity/otherData/guide/guide.component';
import { SendSmsComponent } from './activity/otherData/send-sms/send-sms.component';
import { SitesComponent } from './activity/otherData/sites/sites.component';
import { WazeComponent } from './activity/otherData/waze/waze.component';
import { AppComponent } from './app.component';
import { LoginModule } from '../modules/login-module/login-module.module';
import { DataTablesModule } from 'angular-datatables';

@NgModule({
declarations: [
AppComponent,
ActivityLogListComponent,
AgentComponent,
ActivityComponent,
SitesComponent,
GuideComponent,
CustomerComponent,
SendSmsComponent,
WazeComponent,
],
imports: [
BrowserModule,
FormsModule,
NgSelectModule,
HttpClientModule,
HttpModule,
NgxSpinnerModule,
DataTablesModule,
AngularFontAwesomeModule,
ModalModule,
LoginModule,
TooltipModule.forRoot(),
RouterModule.forRoot([
{
path: '', component: ActivityLogListComponent, pathMatch: 'full', data: { title: 'ניהול פעילויות' },
children: [
{ path: 'agents', component: AgentComponent },
{ path: 'sites', component: SitesComponent },
{ path: 'guides', component: GuideComponent },
{ path: 'customers', component: CustomerComponent },
{ path: 'sendSms/:id', component: SendSmsComponent },
{ path: 'waze', component: WazeComponent }
]
},
{ path: 'activity/:type/:id', component: ActivityComponent, pathMatch: 'full', data: { title: 'עדכון פעילות' } },
{ path: 'activity/:type', component: ActivityComponent, pathMatch: 'full', data: { title: 'הוספת פעילות' } },
{ path: '**', component: ActivityLogListComponent, data: { title: 'ניהול פעילויות' } }

])

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

// ------------- end of app.module ---------------------------

// ------------- angular.json ----------------------------

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"activityLogAngular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../activityLog",
"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/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.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": "activityLogAngular:build"
},
"configurations": {
"production": {
"browserTarget": "activityLogAngular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "activityLogAngular: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/"
]
}
}
}
},
"activityLogAngular-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "activityLogAngular:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"/node_modules/"
]
}
}
}
}
},
"defaultProject": "activityLogAngular"
}

// ------------- end of angular.json

Minimal reproduction of the problem with instructions

Environment

- node version: 9.11.1
- angular version: 6.0.0
- angular-cli version: 6.0.1
- jquery version: 3.3.1
- datatables version: 1.10.19
- angular-datatables version:0.6.3

[ducthienweakt]

same here... hix

[Chebur333]

the angularJS version was installed 0.6.3, try to install the "older" version like
npm install [email protected]

[ducthienweakt]

npm install [email protected]
Thanks, It works now

[Memphis335]

Trying to install this but there is no 6.0.0 version on npm?

[jeremymoritz]

So strange that the official documentation doesn't mention this yet. Following the instructions perfectly installs the AngularJS version

[awais2080]

Its being really hard for me to integrate to my suystem but i had been stuck to server side integration wish i could have uses javascript datatable rather than this angular 4 or 6 datatable

…

On Fri, Sep 14, 2018, 12:06 AM Jeremy Moritz ***@***.***> wrote: So strange that the official documentation doesn't mention this yet. Following the instructions perfectly installs the AngularJS version — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1295 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AllvapXulKAoylArxA0GBdl8rtZTNvumks5uaqyggaJpZM4WNWbF> .

[l-lin]

There were some fixes in the older versions (v0.6.X), so I published those version in npm.

However, npm seems to work using date to fetch what version is the latest, instead of using semantic version.

I published a new version v6.0.1, so executing npm i angular-datatables should bring you the version of angular-datatables for Angular (not AngularJS).