부트 스트랩 4가 앵귤러 2 앱에서 작동하지 않습니다

방금 VS 코드에서 새로운 앵귤러 앱을 만들었습니다.부트 스트랩 4가 앵귤러 2 앱에서 작동하지 않습니다

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

을하고 "스타일"이러한 라인 (JQuery와 및 포퍼 라인 저도 같은 오류가 발생, 다른 방향에서 발견 된 추가 "스크립트"변경 : 나는이 방향에 따라 부트 스트랩 (4)를 추가) 또는 그없이 :

"../node_modules/bootstrap/dist/css/bootstrap.css" 

    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js"

그러나 나는 다음과 같은 오류를 받고 있어요 :

물론 내가 뭐에 관한 단서가 없다

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css Module build failed: BrowserslistError: Unknown browser major at error (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:320:18) at Function.select (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:438:37) at D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:207:41 at Array.forEach() at browserslist (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:196:13) at Browsers.parse (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:44:14) at new Browsers (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at processing.Promise.then._this2.processed (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20) at new Promise() @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127 @ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.css

webpack: Failed to compile.

그 뜻. 어떤 아이디어?

출처

2017-12-29 Starfleet Security

내가 [겨 - 부트 스트랩] 한 번 봐 (복용하는 것이 좋습니다 https://ng-bootstrap.github.io /#/집). Angular에 적용되었으며 Javascript/jQuery 코드가 아닌 Bootstrap CSS 만 필요합니다. – ConnorsFan

나는 그 생각을 고맙게 여긴다. 그러나 그것은 나의 질문에 정말로 답하지 않는다. 물론 부트 스트랩 라이브러리와 그 능력을 원한다. –

@StarfleetSecurity ng-bootstrap이 Bootstrap 4의 모든 기능을 지원하지 않는다는 인상을주는 이유는 무엇입니까? 부트 스트랩 위젯을 지원하기 위해 Angular 앱에 jQuery를 설치하고로드하는 것은 꽤 비효율적 인 것처럼 보입니다. –

다음은 이전에 작성한 튜토리얼입니다.

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

편집 : : 부트 스트랩 4

Internet Explorer를

각도-cli.json에서

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

이 줄을 추가 : 부트 스트랩 4를 설치하려면이 명령을 사용하여

Internet Explorer 10 이상이 지원됩니다. IE9 이하는 아닙니다. 일부 CSS3 속성과 HTML5 요소는 IE10에서 완전히 지원되지 않으며 전체 기능을 위해 접두사가 붙은 속성이 필요하다는 점에 유의하십시오. CSS3 및 HTML5 기능의 브라우저 지원에 대한 자세한 내용은 다음을 참조하십시오.

IE8-9 지원이 필요한 경우 부트 스트랩 3을 사용하십시오. 가장 안정적인 버전의 코드이며 중요한 버그 수정 및 문서 변경 사항에 대해서는 Google 팀에서 계속 지원합니다. 그러나 새로운 기능은 추가되지 않습니다.

출처

2017-12-29 22:28:56 Melchia

고마워, 그게 효과가있는 것 같다. 그러나 단추를 넣을 때 부트 스트랩 예제 페이지에서와 같이 "손"커서를 얻지 못하는 것처럼 내 HTML이 화살표로 표시된다는 것을 알았습니다. 또한 최신 "베타"가 아닌 "알파"버전을 설치해야하는 이유가 있습니까? 또한 IE를 사용하여 페이지로 이동하면 단추가 전혀 표시되지 않는 것으로 나타났습니다. 하지만 크롬과 파이어 폭스에서는 괜찮은 것처럼 보입니다 (위에서 언급 한 커서 문제는 제외). –

네 말이 맞아! 나는 실수를했습니다. 베타 버전을 사용해야합니다. 그냥 작동하는지 테스트 해.나는 편집을 만들었습니다 – Melchia

IE 11을 사용하고 있습니다. 그래서 버튼이 보이지 않는 이유는 아직 확실하지 않습니다. 또한 왜 커서 문제가 있습니까? 이러한 문제는 알파 버전 사용과 관련 될 수 있습니까? 추가 편집을 보았습니다. 나는 기회가 생길 때마다 최신 베타 버전으로 다시 시도 할 것입니다. 감사. –

부트 스트랩 버전과 jquery를 설치하기 위해이 명령을 사용했고 저에게 도움이되었습니다. 그것이 당신을 위해서도 잘되기를 바랍니다.

"NPM 설치 [email protected] popper.js JQuery와 --save"

출처

2018-02-17 00:32:48

부트 스트랩 4가 앵귤러 2 앱에서 작동하지 않습니다

답변

관련 문제