Angular Material注入Angular 2项目

时间:2017-04-10 10:31:21

标签: angular angular-material

Angular Material上构建的项目中添加Angular 2时遇到问题。编译项目时,返回此错误:

  环境上下文中不允许使用

初始值设定项

像这样添加Angular Material

import {MaterialModule } from '@angular/material'

然后在imports

 MaterialModule.forRoot(),

安装
npm install --save @angular/material

还安装了hammerjs并添加到'angular-cli.json'

 "../node_modules/hammerjs/hammer.min.js"

这是我的全部app.module.ts

import {NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader} from 
'@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'hammerjs';

//ui-router
import {UIRouterModule, UIView} from 'ui-router-ng2';
import {APP_STATES} from './app.states';
import {routerConfigFn} from './router.config';

//angular material
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
   declarations: [
    AppComponent,
    UserComponent,
    DashboardComponent
  ],
  imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     MdButtonModule,
     MdCheckboxModule,
     UIRouterModule.forRoot({
        states: APP_STATES,
        useHash: true,
        otherwise: {state: 'public'},
        config: routerConfigFn,
        }),
    ],
    providers: [{provide: NgModuleFactoryLoader, useClass: 
    SystemJsNgModuleLoader}],
    bootstrap: [UIView]
   })

 export class AppModule { }

1 个答案:

答案 0 :(得分:0)

最新的beta3发生了重大变化(假设你正在使用它)。它可能与您遇到的错误有关,但不确定。您不再导入材料模块,而是单独导入每个组件

https://github.com/angular/material2/blob/master/guides/getting-started.md

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

另外,不需要通过在app.modules.ts中输入的angular / cli导入hammerjs作为导入

import 'hammerjs';