Angular2应用程序使用引导程序时出现问题

Question

I'm creating a dynamic website using Angular2 and I am having serious troubles adding bootstrap to it. 我正在使用Angular2创建一个动态网站，但在添加引导程序时遇到了严重的麻烦。

my index.html file looks like this: 我的index.html文件如下所示：

<!DOCTYPE html>
<html>

<head>
    <script>
        document.write('<base href="' + document.location + '"      />');
    </script>
    <title>Angular.io QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main.js').catch(function(err) {
            console.error(err);
        });
    </script>
</head>

<body>
    <my-app>Loading App</my-app>
</body>

</html>

Then I attempt to import it in my app.module.ts file like this: 然后，我尝试将其导入到我的app.module.ts文件中，如下所示：

import { NgModule } from 'angular2/core';
import { BrowserModule } from '@angular2/platform-browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent }  from './app.component';

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

specifically these lines give a "Module cannot be found" error: 特别是这些行给出了“找不到模块”错误：

import { NgModule } from 'angular2/core';
import { BrowserModule } from '@angular2/platform-browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';

I am running an Angular2 + ASP.net template installed from the nuGet Package Manager. 我正在运行从nuGet软件包管理器安装的Angular2 + ASP.net模板。 and I also installed versions of ng2-bootstrap and ng-bootstrap from the Package Manager Console. 并且我还从Package Manager控制台安装了ng2-bootstrap和ng-bootstrap版本。 I also updated my node.js packages and my angular files throughout. 我还更新了我的node.js软件包和我的角度文件。

I'm brand new to Angular as a whole and just want to get my base set up so I can start playing with the functionalities. 我是整个Angular的新手，只想建立基础，以便可以开始使用这些功能。

so what is wrong with my current solution and what can I do to fix it? 那么我当前的解决方案出了什么问题，我该怎么解决？ is there an easier/better way to tie bootstrap to my Angular2 app? 有没有更容易/更好的方法来将引导程序绑定到我的Angular2应用程序？

Answer 1

You don't need to import if you are including bootstrap in your index.html. 如果您要在index.html中包含引导程序，则无需导入。 You only need to import if you are installing bootstrap using npm install. 仅当使用npm install安装引导程序时才需要导入。

Answer 2

ng2-bootstrap and ng-bootstrap has nothing to do with Bootstrap itself. ng2-bootstrap和ng-bootstrap与Bootstrap本身无关。 If you are using the CDN, then you can just use the class names as shown in bootstrap examples, there's no need to import anything in app.module.ts 如果您使用的是CDN，则只需使用引导程序示例中显示的类名，则无需在app.module.ts导入任何内容。

Here's a small example of how to use Bootstrap (via CDN ) in an Angular project. 这是一个如何在Angular项目中使用Bootstrap （通过CDN ）的小示例。

<div class="md-form input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">http://</span>

      <input type="text" class="form-control" placeholder="Type Domain Name" 
      aria-describedby="basic-addon1"
      [mdAutocomplete]="auto" [formControl]="stateCtrl">

      <span class = "input-group-btn">
        <button class="btn btn-primary" >Calculate</button>
      </span>
</div>

Angular2应用程序使用引导程序时出现问题

问题描述

2 个解决方案

解决方案1
0 2017-07-26 14:37:48

解决方案2
0 2017-07-26 14:51:35

Angular2应用程序使用引导程序时出现问题

问题描述

2 个解决方案

解决方案1 0 2017-07-26 14:37:48

解决方案2 0 2017-07-26 14:51:35

解决方案1
0 2017-07-26 14:37:48

解决方案2
0 2017-07-26 14:51:35