Wrong style when bundling with webpack

[pablogarciamiranda]

I am getting different results when i am bundling in development or production with webpack.

The desired result would be the following one, when i am bundling in development mode:

And when i run the script to bundle in production mode i get this:

The script that i am using is this:

  "scripts": {
    "start": "node ./bin/www",
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
  }

How can i solve this issue?

[karlvd]

Had the same issue with after upgrading to Angular 4.4.1, seems to work for me after downgrading to 4.3.4 or upgrading to 4.4.3

[pablogarciamiranda]

@karlvd It does not work for me. I've tried both, 4.3.4 and 4.4.3 and the issue remains. I am getting the following cases:

• If i login for first time, i am getting the wrong result.
• If i login, and press f5, the desired result is achieved.
  • If i logout, and then login again in the same tab, the desired result is achieved.
  • If i change the tab and enter in the page, the desired result is achieved.
    • If I logout, open a new tab and enter in the page, then, the result is wrong as the image above.

My package.json is the following:

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
  },
  "dependencies": {
    "@angular/animations": "^4.4.3",
    "@angular/common": "^4.4.3",
    "@angular/compiler": "^4.4.3",
    "@angular/compiler-cli": "^4.4.3",
    "@angular/core": "^4.4.3",
    "@angular/forms": "^4.4.3",
    "@angular/http": "^4.4.3",
    "@angular/platform-browser": "^4.4.3",
    "@angular/platform-browser-dynamic": "^4.4.3",
    "@angular/platform-server": "^4.4.3",
    "@angular/router": "^4.4.3",
    "@angular/upgrade": "^4.4.3",
    "@ngui/auto-complete": "^0.14.4",
    "angular-2-dropdown-multiselect": "^1.5.4",
    "angular2-jwt": "^0.2.3",
    "aws-sdk": "^2.106.0",
    "bcryptjs": "^2.3.0",
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "core-js": "^2.4.1",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "express-flash": "0.0.2",
    "hbs": "~3.1.0",
    "jsonwebtoken": "^5.7.0",
    "mongoose": "^4.4.12",
    "mongoose-unique-validator": "^1.0.2",
    "morgan": "~1.6.1",
    "ng2-bootstrap-modal": "^1.0.1",
    "ng2-dnd": "^4.2.0",
    "ng2-smart-table": "^1.2.1",
    "ngx-bootstrap": "^1.8.1",
    "ngx-chips": "^1.5.3",
    "ngx-tooltip": "0.0.9",
    "nodemailer": "^4.0.1",
    "nodemailer-mandrill-transport": "^1.2.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.2.0",
    "serve-favicon": "~2.3.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ngtools/webpack": "^1.2.12",
    "@types/core-js": "0.9.36",
    "@types/node": "^6.0.45",
    "angular-router-loader": "^0.5.0",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^3.1.2",
    "del-cli": "^0.2.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "html-loader": "^0.4.4",
    "raw-loader": "^0.5.1",
    "ts-loader": "^2.0.3",
    "typescript": "^2.1.4",
    "webpack": "^2.2.1",
    "webpack-merge": "^4.1.0"
  }
}

Any help?