Angular error message

Asked

Viewed 523 times

0

i installed the bootstrap at the angle with this command:

npm install bootstrap@next -save

and then include the path in the file .angular-cli.json

"styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],

and now is giving this error message:

"Words": [ "Styles.css", ".. /node_modules/bootstrap/dist/css/bootstrap.css" ],

error message:

C:\Users\Wladimir\Desktop\projeto cervejaria>ng new brewer-ui
  create brewer-ui/e2e/app.e2e-spec.ts (291 bytes)
  create brewer-ui/e2e/app.po.ts (208 bytes)
  create brewer-ui/e2e/tsconfig.e2e.json (235 bytes)
  create brewer-ui/karma.conf.js (923 bytes)
  create brewer-ui/package.json (1314 bytes)
  create brewer-ui/protractor.conf.js (722 bytes)
  create brewer-ui/README.md (1024 bytes)
  create brewer-ui/tsconfig.json (363 bytes)
  create brewer-ui/tslint.json (3044 bytes)
  create brewer-ui/.angular-cli.json (1244 bytes)
  create brewer-ui/.editorconfig (245 bytes)
  create brewer-ui/.gitignore (516 bytes)
  create brewer-ui/src/assets/.gitkeep (0 bytes)
  create brewer-ui/src/environments/environment.prod.ts (51 bytes)
  create brewer-ui/src/environments/environment.ts (387 bytes)
  create brewer-ui/src/favicon.ico (5430 bytes)
  create brewer-ui/src/index.html (295 bytes)
  create brewer-ui/src/main.ts (370 bytes)
  create brewer-ui/src/polyfills.ts (2667 bytes)
  create brewer-ui/src/styles.css (80 bytes)
  create brewer-ui/src/test.ts (1085 bytes)
  create brewer-ui/src/tsconfig.app.json (211 bytes)
  create brewer-ui/src/tsconfig.spec.json (304 bytes)
  create brewer-ui/src/typings.d.ts (104 bytes)
  create brewer-ui/src/app/app.module.ts (316 bytes)
  create brewer-ui/src/app/app.component.html (1141 bytes)
  create brewer-ui/src/app/app.component.spec.ts (986 bytes)
  create brewer-ui/src/app/app.component.ts (207 bytes)
  create brewer-ui/src/app/app.component.css (0 bytes)
You can `ng set --global packageManager=yarn`.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'brewer-ui' successfully created.

C:\Users\Wladimir\Desktop\projeto cervejaria>cd brewer

C:\Users\Wladimir\Desktop\projeto cervejaria\brewer>cd ..

C:\Users\Wladimir\Desktop\projeto cervejaria>cd brewer-ui

C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui>npm install bootstrap@next  --save
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.12.9 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 116 packages and removed 688 packages in 41.124s

C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui>npm install

> [email protected] install C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\Wladimir\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-59_binding.node

> [email protected] postinstall C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\node-sass\vendor\win32-x64-59\binding.node
Testing binary
Binary is fine
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.12.9 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 698 packages in 119.678s

C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui>ng server
Your global Angular CLI version (1.5.4) is greater than your local
version (1.1.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 6ca1a28df9cfb3e19eb6
Time: 10370ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 183 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4.76 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 13.6 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.2 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
    at error (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\browserslist\index.js:320:18)
    at Function.select (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\browserslist\index.js:438:37)
    at C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\browserslist\index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\postcss\lib\lazy-result.js:274:20)
    at LazyResult.asyncTick (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\postcss\lib\lazy-result.js:189:32)
    at LazyResult.asyncTick (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\postcss\lib\lazy-result.js:201:22)
    at processing.Promise.then._this2.processed (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\postcss\lib\lazy-result.js:228:20)
    at new Promise (<anonymous>)
    at LazyResult.async (C:\Users\Wladimir\Desktop\projeto cervejaria\brewer-ui\node_modules\postcss\lib\lazy-result.js:225:27)
 @ ./~/bootstrap/dist/css/bootstrap.css 4:14-123
 @ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css

I need to know how to fix this!

angularjs bootstrap

1 answer

1


Good morning, the error is in bootstrap installation. To use bootstrap Voce you will need to install some other packages.

I recommend you re-install the packages with the following command:

npm install [email protected] --save
npm install jquery --save
npm install popper.js --save
npm install tether --save

And after, just declare the style sheets in the angular-cli.json of the packages, following the order below:

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

I hope it helped :D

  • this would be one of the solutions, because I have two projects with the same error, one worked the other not, so I researched has to update in the project the autoprefixer version from 6.7.7 to 7.0.0, but I do not know how to do this, there are several places to modify, know update?

  • It picked up with version 4.0.0-beta.6

  • 1

    autoprefixer would not be a plugin for your text editor?

  • I don’t know, but when I installed version 4.0.0. beta 6 got, it worked perfectly.

  • was with this command npm install [email protected] on this page https://v4-alpha.getbootstrap.com/getting-started/download/

  • 1

    Bootstrap is already in the BETA of version 4, I recommend installing the latest version, because it is the most stable: npm install [email protected]

Show 1 more comment

Browser other questions tagged angularjs bootstrap

You are not signed in. Login or sign up in order to post.