In angular 5.2.1 production getting ...ules\bootstrap\dist\css\bootstrap.cssNode#moveTo was deprecated. Use Container#append

0
votes

See below version info and package.json

version:

ng-version="5.2.1"

package.json

{
  "name": "experiment",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.1.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^1.12.4",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "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.7.0",
    "typescript": "~2.4.2"
  }
}

commands:

1) ng build : here I am not getting any warnings

2) ng build --prod : here I am getting:

10% building modules 4/6 modules 2 active
...ules\bootstrap\dist\css\bootstrap.cssNode#moveTo was deprecated.
Use Container#append. Date: 2018-01-23T06:19:48.732Z Hash:
34c92447878ca7d7b148 Time: 150966ms chunk {0}
polyfills.39c2675f132c0f995f11.bundle.js (polyfills) 59.5 kB [initial]
[rendered] chunk {1} main.5222b9447b8051d66fa2.bundle.js (main) 728 kB
[initial] [rendered] chunk {2} styles.b635c6f169c366ff5b2f.bundle.css
(styles) 217 kB [initial] [rendered] chunk {3}
inline.676417dc826d752b57e1.bundle.js (inline) 1.45 kB [entry]
[rendered]

I googled, https://github.com/angular/angular-cli/issues/8598 got this, still, i didn't get a solution.

3
javascriptangularangular-cli
Please Check if there is any inconsistency with the packages installed, and the new ones. You probably need to upgrade your Angular. Use the following command, and paste the output in comment -> npm install -g npm-check-updates - Rahul
Thanks for your time, Checked with this command still have the same issue. - Raghavendra S

3 Answers

0
votes
npm install -g npm-check-updates

This command is to see the package difference and not to fix any issue., I`ll suggest you to delete your node_modules folder and execute this command

 ncu -u

and 

npm install --save

to update your package.json. Once done with it, try with 

ng build --prod
0
votes

Please update "@angular/cli" to "1.7.3"

Step 1: npm remove @angular/cli Step 2: npm cache clean --force Step 3: npm install -g @angular/[email protected]

Still stuck then update your package.json with

"@angular/cli": "1.7.3" and run npm install

Tested and working for me

0
votes

I resolved by doing RND. And finally got solution by removing deprecated css in my project.

For example .section{color:#ddd;} .section{font-size:14px} this is deprecated css and I changed to.section{color:#ddd; font-size:14px}

And I customisd my bootstrap css for example I copied css which are all usefull to my project to my style.css.

It's worked for me.