[英]problems using bootstrap with Angular2 app
我正在使用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模板。 并且我还从Package Manager控制台安装了ng2-bootstrap和ng-bootstrap版本。 我还更新了我的node.js软件包和我的角度文件。
我是整个Angular的新手,只想建立基础,以便可以开始使用这些功能。
那么我当前的解决方案出了什么问题,我该怎么解决? 有没有更容易/更好的方法来将引导程序绑定到我的Angular2应用程序?
如果您要在index.html中包含引导程序,则无需导入。 仅当使用npm install安装引导程序时才需要导入。
ng2-bootstrap和ng-bootstrap与Bootstrap本身无关。 如果您使用的是CDN,则只需使用引导程序示例中显示的类名,则无需在app.module.ts
导入任何内容。
这是一个如何在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.