pagination UI in angular5-datatable and column separated lines are not visible.

[GautamUpreti123]

Can you please tell me what are the specific bootstrap and fontawesome link i need to add in index.html file. I am using angular5-datatable with metronic theme, Is this an issue?

[brunano21]

Hi,

you can install font-awesome and bootstrap first

npm install font-awesome@4.7.0 bootstrap@4.0.0

and then add the following to .angular.cli.json

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
],

[brunano21]

Did you sort it out?

[GautamUpreti123]

Thanks for replying @brunano21, but I am getting this error after following your steps. ERROR in multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.css ./src/styles.css Module not found: Error: Can't resolve '/home/algo/Documents/projects/thumbtack-adminpanel/src/styles.css' in '/home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/models/webpack-configs' resolve '/home/algo/Documents/projects/thumbtack-adminpanel/src/styles.css' in '/home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/models/webpack-configs' using description file: /home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/package.json (relative path: ./models/webpack-configs)

[GautamUpreti123]

Though I have resolved the pagination UI issue by overiding some css class. But still its an issue as I still can't see the vertical column separating lines.

[brunano21]

Can you share your .angular-cli.json please?

[GautamUpreti123]

{ "name": "thumbtackadmin", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.1.0", "@angular/common": "^5.1.0", "@angular/compiler": "^5.1.0", "@angular/core": "^5.1.0", "@angular/forms": "^5.1.0", "@angular/http": "^5.1.0", "@angular/platform-browser": "^5.1.0", "@angular/platform-browser-dynamic": "^5.1.0", "@angular/router": "^5.1.0", "angular2-notifications": "^0.9.7", "angular5-data-table": "^0.5.1", "core-js": "^2.4.1", "jquery": "^3.3.1", "mydatepicker": "^2.6.3", "ng2-bs3-modal": "^0.13.0", "ng2-slim-loading-bar": "^4.0.0", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "1.6.7", "@angular/compiler-cli": "^5.1.0", "@angular/language-service": "^5.1.0", "@types/datatables.net": "^1.10.8", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/jquery": "^3.3.0", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.9.1", "typescript": "^2.6.2" } }

[brunano21]

this is package.json. I would like to see .angular-cli.json.

[GautamUpreti123]

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "thumbtackadmin" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json", "exclude": "/node_modules/" }, { "project": "src/tsconfig.spec.json", "exclude": "/node_modules/" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "/node_modules/" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "scss", "component": {} } }

[brunano21]

Ok it seems you are missing the styles property.

Fix your .angular-cli.json like this.

{
    "$schema": "./node_modules//lib/config/schema.json",
    "project": {
        "name": "thumbtackadmin"
    },
    "apps": [
        {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets",
            "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "../node_modules/font-awesome/css/font-awesome.css",
            "styles.css"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
        "project": "src/tsconfig.app.json",
        "exclude": "/node_modules/"
        },
        {   
        "project": "src/tsconfig.spec.json",
        "exclude": "/node_modules/"
        },
        {
        "project": "e2e/tsconfig.e2e.json",
        "exclude": "/node_modules/"
        }
    ],
    "test": {
        "karma": {
        "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "component": {}
    }
}

[GautamUpreti123]

I mentioned earlier after adding this in cli.json file I am getting this error:-

ERROR in multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.css ./src/styles.css Module not found: Error: Can't resolve '/home/algo/Documents/projects/thumbtack-adminpanel/src/styles.css' in '/home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/models/webpack-configs' resolve '/home/algo/Documents/projects/thumbtack-adminpanel/src/styles.css' in '/home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/models/webpack-configs' using description file: /home/algo/Documents/projects/thumbtack-adminpanel/node_modules/@angular/cli/package.json (relative path: ./models/webpack-configs) Field 'browser' doesn't contain a valid alias configuration

[brunano21]

Which version of angular-cli are you using?

[GautamUpreti123]

I am using angular cli version 1.6.7

[brunano21]

Most like it's because of a bug in angular-cli. I had the same and the issue is not present since 1.7.0. To work around it you can type the following on your console before running ng serve or ng build

(Window’s command prompt – no quotes): set BROWSERSLIST=last 2 versions (Unix-like shell - yes quotes): export BROWSERSLIST='last 2 versions'

[brunano21]

Closing this for inactivity. Please, if your problem still persists, don't hesitate to open it again.