Question

我在为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>

在我的app.component.html文件中，我有

<button type="button" class="btn btn-success">Success</button>

但按钮永远不会变为绿色，我不会为css文件导入导入错误，但控制台说未捕获的SyntaxError：意外的令牌＆lt;用于js文件导入。

感谢任何帮助

文件结构图像

响应标签

<!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>

<script type="text/javascript" src="inline.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

附加文件结构图像

General 

    Request URL:http://localhost:4200/node_modules/bootstrap/dist/js/bootstrap.js
    Request Method:GET
    Status Code:304 Not Modified
    Remote Address:127.0.0.1:4200

    Response Headers
    view source
    Accept-Ranges:bytes
    Access-Control-Allow-Origin:*
    Connection:keep-alive
    Date:Sat, 24 Dec 2016 20:33:37 GMT
    ETag:W/"27f-NL3AUEhbYCYcjueARo/8Ow"
    X-Powered-By:Express

    Request Headers
    view source
    Accept:*/*
    Accept-Encoding:gzip, deflate, sdch, br
    Accept-Language:en-US,en;q=0.8
    AlexaToolbar-ALX_NS_PH:AlexaToolbar/alx-4.0
    Connection:keep-alive
    Host:localhost:4200
    If-None-Match:W/"27f-NL3AUEhbYCYcjueARo/8Ow"
    Referer:http://localhost:4200/
    User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Answer 1

如果使用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',
        }, ...

Answer 2

我不确定，我是新手，但我有这条链接到html。

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

Answer 3

您的node_modules文件夹比index.html高一级，因此您的导入应为../node_modules/bootstrap/dist/js/bootstrap.js

但是，我认为这不会起作用，因为angular2项目的基础href通常是index.html。您应该将node_modules文件夹移至与index.html相同的目录级别。

Bootstrap无法通过节点模块正确导入

3 个答案: