Twitter bootstrap 引导未通过节点模块正确导入_Twitter Bootstrap_Angular

Twitter bootstrap 引导未通过节点模块正确导入

twitter-bootstrap angular

Twitter bootstrap 引导未通过节点模块正确导入,twitter-bootstrap,angular,Twitter Bootstrap,Angular,导入angular2应用程序的引导程序时遇到问题。我的意见如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Portfolio</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"&

导入angular2应用程序的引导程序时遇到问题。我的意见如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Portfolio</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />

</head>


<body>
  <app-root>Loading...</app-root>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>

</body>
</html>

我不确定，我是新手，但我有一行链接到html

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

如果使用SystemJs，此解决方案将起作用（如果使用webpack，请不要执行步骤4）：

1-通过npm安装：

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

2-进口：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

3-在应用程序模块中列出导入的模块：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

    @NgModule({
      declarations: [AppComponent, ...],
      imports: [NgbModule.forRoot(), ...],  
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

4-添加到

system.config.js

文件：

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'  // -> as in angular2 main tutorial, npm is set to replace havin to write node_modules
    },
    // map tells the System loader where to look for things
    map: {
         ...
         //ng-bootstrap
         '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
        }, ...

您的

node\u modules

文件夹比

index.html

高一级，因此您的导入应该是

。/node\u modules/bootstrap/dist/js/bootstrap.js

但是，我认为这也行不通，因为基本href to angular2项目通常是

index.html

。您应该将

节点\u模块

文件夹移动到与

index.html

相同的目录级别

我知道我可以通过cdn导入引导，但我正在尝试通过npm/节点模块导入本地引导文件。您可以检查网络选项卡以查看是否获得正确的引导文件吗？当chrome浏览器打开时，按F12键->选择网络选项卡->刷新浏览器->搜索引导文件。你不能通过npm来完成吗？当我点击F12键，进入网络>css/js选项卡并刷新时，会列出.js和.css引导文件。他们为什么不把按钮变成绿色？也是对K.Daniek的回应。我不知道你可以使用npm导入。如何做到这一点？@user6680当您单击网络中与引导相关的文件时，在右侧窗格的“响应”选项卡上，您是否看到相关内容？或者你看到你的index.html了吗？很抱歉，我没有看到响应选项卡。我在上面添加了一个图像，显示了“所有”选项卡中的文件列表。如果向下滚动，index.html不在该列表中。如果这就是你要问的，这不是导入文件的正确方法吗？如果我正在使用npm安装软件包，那么移动node_modules文件似乎不正确。如果使用npm遵循下面的FRECIA方法，是否正确的方法？我不明白为什么我不能使用../node\u模块等指向文件路径。。。npm放置文件的确切起始位置with@user6680如果您检查angular2 seed index.html和package.json是否处于同一级别。如果您担心后端（如果您使用的是node.js之类的东西），您可以在该级别为后端创建另一个package.json。@user6680即使您提供FRECIA之类的引用，我认为systemjs也无法解析比它高一级的路径。请随时告诉我：）@user6680有什么消息吗？

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

    @NgModule({
      declarations: [AppComponent, ...],
      imports: [NgbModule.forRoot(), ...],  
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'  // -> as in angular2 main tutorial, npm is set to replace havin to write node_modules
    },
    // map tells the System loader where to look for things
    map: {
         ...
         //ng-bootstrap
         '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
        }, ...