使用带有 Angular2 应用程序的引导程序的问题

Posted

技术标签:

【中文标题】使用带有 Angular2 应用程序的引导程序的问题【英文标题】:problems using bootstrap with Angular2 app 【发布时间】:2018-01-01 22:25:26 【问题描述】:

我正在使用 Angular2 创建一个动态网站,但在向其中添加引导程序时遇到了严重的麻烦。

我的 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>

然后我尝试将它导入到我的 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  

特别是这些行给出了“找不到模块”错误:

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

我正在运行从 nuGet 包管理器安装的 Angular2 + ASP.net 模板。我还从包管理器控制台安装了 ng2-bootstrap 和 ng-bootstrap 版本。我还更新了我的 node.js 包和我的 angular 文件。

我对 Angular 整体来说是全新的,只是想建立我的基础,这样我就可以开始使用这些功能了。

那么我当前的解决方案有什么问题,我可以做些什么来解决它?有没有更简单/更好的方法将引导程序绑定到我的 Angular2 应用程序?

【问题讨论】:

考虑改用 angular-cli,它由与 angular 团队密切联系的 google 团队保持最新:github.com/angular/angular-cli 你在使用 angularcli 吗? '特别是这些行有错误' - 你应该提到错误是什么。 @JoeClay 已编辑,谢谢。 @EduardoVargas 我刚刚了解了 mage 到 angular 的命名更改,我将立即查看 CLI 【参考方案1】:

如果您在 index.html 中包含引导程序,则无需导入。仅当您使用 npm install 安装引导程序时才需要导入。

【讨论】:

所以如果我把它放在我的 index.html 中,我如何在我的其他文件中访问/调用它? 您可以只使用引导类,它们就可以工作。你不需要调用 ts.顺便说一句,如果你打算使用手风琴和其他东西,你应该包括 bootstrap.js 和 jquery。【参考方案2】:

ng2-bootstrap 和 ng-bootstrap 与 Bootstrap 本身无关。如果您使用的是 CDN,那么您可以使用引导示例中显示的类名,无需在 app.module.ts 中导入任何内容

这里有一个小的 example 说明如何在 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 应用程序的引导程序的问题的主要内容,如果未能解决你的问题,请参考以下文章

带有引导事件的 Angular2 不会触发可观察到的变化

将引导程序添加到 angular2-seed 项目的 webpack 包中

Angular2 webpack:如何导入引导 css

Angular 2,使用 Jquery 操作引导程序

Angular2 beta14 Typescript routerLink绑定错误[重复]

带有springboot应用程序的角度上的fsevents错误