Angular-cli: Build failed when using Bootstrap 4.0.0 (relese)

[amihailes]

Hi,

I write this because of #9020 and #9029

When using angular/cli ( "@angular/cli": "1.6.5") with version "bootstrap": "4.0.0-beta.2", Everything is ok: build:dev and build :prod OK:

"build:dev": "ng build",
"build:prod": "ng build --prod --aot --extract-css",

But if I update to "bootstrap": "4.0.0", the build is OK if I use "build:dev", but it doesn't if I try to use "build:prod"

The error is:

node --version
v8.9.4
npm --version
5.6.0

The error:

ERROR in ./node_modules/bootstrap/scss/bootstrap.scss
Module build failed: BrowserslistError: Unknown browser major
at error (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:320:18)
at Function.select (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:438:37)
at D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:207:41
at Array.forEach ()
at browserslist (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:196:13)
at D:\spa\node_modules\postcss-merge-rules\dist\index.js:261:51
at LazyResult.run (D:\spa\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
@ multi ./Client/globals.scss ./node_modules/bootstrap/scss/bootstrap.scss
ERROR in ./node_modules/bootstrap/scss/bootstrap.scss
Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser major
at error (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:320:18)
at Function.select (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:438:37)
at D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:207:41
at Array.forEach ()
at browserslist (D:\spa\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:196:13)
at D:\spa\node_modules\postcss-merge-rules\dist\index.js:261:51
at LazyResult.run (D:\spa\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\spa\node_modules\postcss\lib\lazy-result.js:204:22)
at runLoaders (D:\spa\node_moduleswebpack\lib\NormalModule.js:195:19)
at D:\spa\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at D:\spa\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (D:\spa\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (D:\spa\node_modules\postcss-loader\lib\index.js:189:71)
at
@ ./node_modules/bootstrap/scss/bootstrap.scss
@ multi ./Client/globals.scss ./node_modules/bootstrap/scss/bootstrap.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:prod: ng build --prod --aot --extract-css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

My package.json:

"scripts": {
    "ng": "ng",
    "rimraf": "rimraf",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot",
    "start": "ng serve",
    "build:dev": "ng build",
    "build:prod": "ng build --prod --aot --extract-css",
    "lint:sass": "sass-lint -c .sass-lint.yml Client/**/*.scss --verbose",
    "lint:ts": "tslint -c tslint.json Client/**/*.ts"
},
"dependencies": {},
"devDependencies": {
    "@angular-devkit/core": "0.0.28",
    "@angular/common": "5.2.1",
    "@angular/compiler": "5.2.1",
    "@angular/core": "5.2.1",
    "@angular/forms": "5.2.1",
    "@angular/http": "5.2.1",
    "@angular/platform-browser": "5.2.1",
    "@angular/platform-browser-dynamic": "5.2.1",
    "@angular/router": "5.2.1",
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "5.2.1",
    "@types/core-js": "0.9.45",
    "@types/hammerjs": "2.0.35",
    "@types/jasmine": "2.8.4",
    "@types/node": "9.3.0",
    "@types/selenium-webdriver": "3.0.8",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "codelyzer": "4.1.0",
    "core-js": "2.5.3",
    "file-loader": "1.1.6",
    "font-awesome": "4.7.0",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "popper.js": "1.12.9",
    "node-sass": "4.7.2",
    "normalize.css": "7.0.0",
    "preboot": "4.5.2",
    "rxjs": "5.5.6",
    "sass-lint": "1.12.1",
    "ts-helpers": "1.1.2",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typedoc": "0.9.0",
    "typescript": "2.6.2",
    "url-loader": "0.6.2",
    "zone.js": "0.8.20"
}

Thanks

[Taha-Di-Nero]

See https://github.com/angular/angular-cli/issues/9020#issuecomment-357672292

[ghost]

9020 (comment) doesn't fix the issue

[waimun]

Confirmed this is an issue with Bootstrap version 4.0.0 and also 4.0.0-beta.3. Only 4.0.0-beta.2 is ok. There is difference between package.json in bootstrap/node_modules for these versions.

[daviatorstorm]

Have the same problem

[daviatorstorm]

Found solution https://stackoverflow.com/a/48200514/2396607

[waimun]

@daviatorstorm it's a temp solution because end users shouldn't have to update the file manually. I think this issue belongs to bootstrap team but I will defer it to angular-cli since they will know better than us.

[hansl]

Yes, this is a bootstrap issue. Did you file an issue on their github?

[filipesilva]

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue https://github.com/angular/angular-cli/issues/9020. This bug is fixed in @angular/[email protected].

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}