Question

我正在尝试将Angular 2 Progress bar合并到我的Angular App。

我使用Webpack作为捆绑工具。

我已经使用此Angular种子启动了项目，请找到种子的git repo链接

https://github.com/AngularClass/angular2-webpack-starter

我已经安装了所有依赖项，但仍然没有显示进度条。

组件文件

<div class="loading-overlay" *ngIf="loading">
  <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
  Here
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

ngModule

import { MaterialModule } from '@angular/material';
@NgModule({
  bootstrap: [ AppComponent],
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    routing,
    MaterialModule.forRoot()
  ],

})

请帮助

Answer 1

正如@Christopher Moore指出的那样，尝试删除

周围的括号

[MaterialModule.forRoot()]

进口。如果这不能解决您的问题，请提供其他信息。

Answer 2

确保您在index.html中引用了以下css文件

在你的webpack.config.js中，在app部分下面检查以下行是否存在

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

你也可以参考cdn for @ angular / material，如下所示

'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

<强> LIVE DEMO

Answer 3

使用以下代码： 首先将其导入app.module.ts

从'@ angular / material'导入{MatProgressBarModule};

@NgModule（{ 进口：[ MatProgressBarModule ]

}）

You must have to import angular api

Answer 4

我克隆了webpack starter存储库并获得了进度条，整个过程是：

克隆存储库
npm install + npm install -save @ angular / material
添加材料代码，见下文
npm run build：prod
npm run server：prod

材料代码：在app.module.ts

import { MaterialModule } from '@angular/material';

在app.module.ts @NgModule导入部分添加：

MaterialModule.forRoot()

在其中一个组件模板中添加：

<md-progress-bar mode="indeterminate"></md-progress-bar>

在全局样式文件中，例如＆＃34; src / styles / styles.scss＆＃34;，添加如下所述的主题之一

@import '~@angular/material/core/theming/prebuilt/purple-green.css';

来自official docs

Angular Material预先包装了几个预先构建的主题css   文件。这些主题文件还包括核心的所有样式   （所有组件共有的样式），因此您只需要包含一个   应用中Angular Material的单个css文件。

您可以将主题文件直接包含在您的应用程序中   @角/材料/芯层/主题化/预构建

如果您正在使用Angular CLI，这就像包含一行一样简单   在styles.css文件中：

@import   ＆＃39; ~@angular/material/core/theming/prebuilt/deeppurple-amber.css' ;;

Angular 2 Material Progress Bar在模板中使用时不显示？

4 个答案: