Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro com bootstrap

Estou com um problema no meu projeto,

nele não existe o arquivo angular.json e sim angular-cli.json, dentro desse arquivo existe a tag styles e dentro dela fiz a alteração pedida:

{
  "project": {
    "version": "1.0.0-beta.28.3",
    "name": "alurapic"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "./node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

porém quando vou reiniciar o server ele me retorna o seguinte erro:

ERROR in multi ./src/styles.css ./src//bootstrap/dist/css/bootstrap.min.css Module not found: Error: Can't resolve 'D:\DADOS\N66104\Desktop\projeto\AngularAngular 1\alurapic\src\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'D: \DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapic' @ multi ./src/styles.css ./src//bootstrap/dist/css/bootstrap.min.css webpack: Failed to compile.

Entendi do erro que ele está buscando na pasta errada então alterei para

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

que me retornou o seguinte erro:

ERROR in .//css-loader?{"sourceMap":false}!.//postcss-loader!.//bootstrap/dis t/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser major at error (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapic\node_mo dules\browserslist\index.js:37:11) at Function.browserslist.checkName (D:\DADOS\N66104\Desktop\projeto\AngularAngular 1\alurapic\node_modules\browserslist\index.js:320:18) at Function.select (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurap ic\node_modules\browserslist\index.js:438:37) at D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapic\node_modules\b rowserslist\index.js:207:41 at Array.forEach (native) at browserslist (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapicnode_modules\browserslist\index.js:196:13) at Browsers.parse (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapi c\node_modules\autoprefixer\lib\browsers.js:44:14) at new Browsers (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapicnode_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapicnode_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapic\node_m odules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurapi c\node_modules\postcss\lib\lazy-result.js:274:20) at LazyResult.asyncTick (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\a lurapic\node_modules\postcss\lib\lazy-result.js:189:32) at processing.Promise.then.this2.processed (D:\DADOS\N66104\Desktop\projeto \Angular\Angular 1\alurapic\nodemodules\postcss\lib\lazy-result.js:228:20) at LazyResult.async (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alura pic\node_modules\postcss\lib\lazy-result.js:225:27) at LazyResult.then (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1\alurap ic\node_modules\postcss\lib\lazy-result.js:131:21) at Object.module.exports (D:\DADOS\N66104\Desktop\projeto\Angular\Angular 1alurapic\node_modules\postcss-loader\index.js:63:10) @ .//bootstrap/dist/css/bootstrap.min.css 4:14-130 @ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.min.css webpack: Failed to compile.

Se alguém puder me ajudar.

4 respostas

Fala ai Yargo, tudo bem? Pode ser um problema referente a versão do seu Angular CLi ou Boostrap.

Consegue compartilhar a versão de ambos?

Fico no aguardo.

Pode postar o conteúdo do seu package.json ?

Mas como sugestão, você pode desisntalar o bootstrap e reinstalar:

 npm uninstall bootstrap --save
 npm install bootstrap@4.0.0-beta.2 --save
solução!

pessoal muito obrigado pela ajuda.

Eu faço esse curso pela empresa que trabalho então algumas coisas não consigo baixar, mas o problema era na versão do Node, eu atualizei para a mais nova e refiz o download do bootstrap e AngularCli nas versões mais recentes e segue tudo funcionando.

Mesmo assim obrigado pela atenção

Magina Yargo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.