将ngbootstrap导入到angular 6项目中断项目

时间:2018-07-10 21:30:12

标签: c# bootstrap-4 angular6

所以,我一直在尝试将NgBootstrap添加到我的angular 6应用程序中- 脚步: -我在Index.html中引用了引导程序依赖项:

<!doctype html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta name="robots" content="noindex,nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="image/x-icon" href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <title>UserInterface</title>
</head>
<body>
    <app-root></app-root>
</body>
</html>

然后:

npm install --save @ ng-bootstrap / ng-bootstrap

当我导入NgbModule时,我已经努力解决了这一重大变化,即我的App.Module.Ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { ROUTES } from "./app.routes";
import { LayoutModule } from "./views/layout/layout.module";
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        RouterModule.forRoot(ROUTES),
        LayoutModule,
        NgbModule.forRoot()
]
    })
    export class AppModule { }

有明显的捕获物吗?

2 个答案:

答案 0 :(得分:0)

我建议您从index.html中删除 css和js 文件路径。

我认为没有必要在index.html中添加路径。

我创建了一个示例示例,您可以看到它here

此外,我会在这个reference网站上为您提供更多说明。

答案 1 :(得分:0)

如果您是从Angular 9遇到这个问题的,请在页面加载时查看控制台(ctrl-f5)。您可能需要<div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>