Bootstrap 4 funktioniert nicht mit Angular 2 App

Ich habe gerade eine neue Angular App in VS Code erstellt. Ich habe Bootstrap 4 nach diesen Richtungen:Bootstrap 4 funktioniert nicht mit Angular 2 App

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

und änderte die „Stile“ und „Skripte“ diese Zeilen hinzuzufügen (die jquery und Popper Linien in einigen anderen Richtungen gefunden, ich die gleichen Fehler mit oder ohne diese):

"../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"

aber ich die folgende Fehlermeldung erhalten:

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.

was ich natürlich zu wha keine Ahnung haben Das heißt. Irgendwelche Ideen?

Quelle

2017-12-29 Starfleet Security

Ich schlage vor, einen Blick auf [ng-Bootstrap] unter (https://ng-bootstrap.github.io /#/Zuhause). Es ist an Angular angepasst und benötigt nur das Bootstrap CSS, nicht den Javascript/jQuery Code. – ConnorsFan

Ich schätze den Gedanken, aber das beantwortet meine Frage nicht wirklich. Ganz zu schweigen davon, dass ich die vollständige Bootstrap-Bibliothek und ihre Fähigkeiten möchte. –

@StarfleetSecurity Was gibt Ihnen den Eindruck, dass ng-bootstrap nicht alle Funktionen von Bootstrap 4 unterstützt? Das Installieren und Laden von jQuery in einer Angular-App zur Unterstützung von Bootstrap-Widgets scheint ziemlich ineffizient zu sein. –

Das ist ein altes Tutorial, dem Sie gefolgt sind. Mit diesem Befehl installieren Bootstrap 4:

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

in Winkel cli.json fügen Sie folgende Zeilen:

"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" 
    ],

EDIT:

Internet Explorer Für Bootstrap 4:

Internet Explorer 10+ wird unterstützt; IE9 und unten ist nicht. Bitte beachten Sie, dass einige CSS3-Eigenschaften und HTML5-Elemente in IE10 nicht vollständig unterstützt werden oder für die volle Funktionalität Präfix-Eigenschaften benötigen. Visit Kann ich ... für Details zur Browserunterstützung von CSS3- und HTML5-Funktionen verwenden.

Wenn Sie IE8-9-Unterstützung benötigen, verwenden Sie Bootstrap 3. Es ist die stabilste Version unseres Codes und wird immer noch von unserem Team für kritische Bugfixes und Dokumentationsänderungen unterstützt. Es werden jedoch keine neuen Funktionen hinzugefügt.

Quelle

2017-12-29 22:28:56 Melchia

Danke, das scheint zu funktionieren. Allerdings habe ich bemerkt, dass, wenn ich einen Knopf an meine HTML-Datei anschließe, wie auf der Bootstrap-Beispielseite, bekomme ich den "Hand" -Cursor nicht, er bleibt einfach wie ein Pfeil. Gibt es auch einen Grund, warum Sie angegeben haben, die "Alpha" -Version zu installieren, anstatt die neueste "Beta"? Auch habe ich festgestellt, dass wenn ich IE zum Navigieren auf die Seite verwenden, ich die Schaltfläche überhaupt nicht sehe. Aber es scheint in Chrome und Firefox okay zu sein (abgesehen von dem oben erwähnten Cursor-Problem). –

Sie haben Recht! Ich habe einen Fehler gemacht Sie sollten die Beta-Version verwenden. Ich teste es einfach, es funktioniert.Ich habe das EDIT – Melchia

Dieses IE 11 Ich benutze, so dass ich immer noch nicht sicher bin, warum der Button nicht angezeigt wird. Auch warum der Cursor Problem? Könnten diese Probleme mit der Verwendung der Alpha-Version zusammenhängen? Habe gerade deine zusätzliche Bearbeitung gesehen. Ich werde es mit der neuesten Beta versuchen, wenn ich eine Chance bekomme. Vielen Dank. –

Ich habe diesen Befehl verwendet, um Bootstrap-Version und mit Jquery zu installieren, und es hat für mich funktioniert. Hoffe, es wird auch für Sie arbeiten.

"npm installieren [email protected] popper.js jquery --save"

Quelle

2018-02-17 00:32:48

Bootstrap 4 funktioniert nicht mit Angular 2 App

Antwort

Verwandte Themen