Question

我正在尝试使用webpack和angular 2来使用bootstrap 4.从我所读到的最好的方法是使用ng-bootstrap。

我按照说明在jquery之后将'@ ng-bootstrap / ng-bootstrap'添加到我的供应商列表中，然后在我的app.module.ts文件中输入。

然而，当我运行应用程序时，我在浏览器中运行时会遇到ZoneSymbolError。

我已经确保我的webpack.config.vendor.js已被重建等，并且移动的东西导致稍有不同的错误，但它们都没有正常工作。

是否有任何示例（我找不到）或有关如何使用webpack获取ng-bootstrap的建议？

编辑：这是webpack供应商区域。

entry: {
        vendor: [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/platform-server',
            'angular2-universal',
            'angular2-universal-polyfills',
            'bootstrap/dist/css/bootstrap.css',
            '@ng-bootstrap/ng-bootstrap',
            'es6-shim',
            'es6-promise',
            'event-source-polyfill',                
            'zone.js',
        ]
    },

这是错误：

如果我把jquery放回去就说jquery必须先加载但是它仍然是错误的。

Answer 1

我猜你的错误看起来正在使用ASP.NET Core / Angular模板。要修复它，我必须从boot-client.ts文件中删除以下行。

package test2; import java.io.File; import java.io.FileReader; import java.io.IOException; import java.io.BufferedReader; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; public class test2 { public WebDriver driver = new ChromeDriver(); public Actions action = new Actions(driver); public static String rows = ""; public void link() throws InterruptedException { // driver.get("https://www.google.com/"); //How can I type here,taken row from the TXT file in the quotes("")? driver.get(rows); Thread.sleep(3000); } public void txt() throws IOException { // open the LinkAl txt file File file = new File("LinkAl.txt"); BufferedReader reader = null; reader = new BufferedReader(new FileReader(file)); int i=0; rows = reader.readLine(); while (rows!=null) { i++; // Get the second row to the LinkAl txt file if(i==2) { System.out.println(rows); } rows = reader.readLine(); } } public void driverquit() { driver.quit(); } public static void main(String[] args) throws InterruptedException, IOException { System.setProperty("webdriver.chrome.driver", "C:\\chromedriver_win32\\chromedriver.exe"); test2 Links = new test2(); // Links.link(); Links.txt(); Links.driverquit(); } }

Answer 2

要使用ng-bootstrap中的小部件，不需要jQuery并且不需要Bootstrap的JavaScript。唯一需要的依赖是Bootstrap的CSS。

您可能会收到错误，因为很可能您正在使用Bootstrap的JavaScript。再一次，这不是必需的 - 唯一的依赖是CSS。

您可能希望查看使用WebPack的ng-bootstrap演示站点 - 如果您检查its vendor file，您会注意到只引用了Bootstrap的CSS：

import 'bootstrap/dist/css/bootstrap.css';

Answer 3

您可以按照以下步骤添加jQuery：

使用jQuery
安装npm
npm install jquery -- save
转到项目文件夹根目录下的angular.json或angular-cli.json文件，并在scripts标记中添加以下代码

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

确保输入正确的路径。

停止Angular CLI应用程序并使用ng-serve命令重新运行。
现在，当您将jQuery用于任何组件时，请按照以下代码将其导入：

import * as $ from 'jquery';

@ngboostrap Bootstrap的JavaScript需要jQuery。必须在Bootstrap的JavaScript之前包含jQuery。使用webpack时

3 个答案: