导入flexLayout后Angular2应用程序不工作

我想在angular2材质中使用flexLayout创建窗体。它给出了syntaxError。导入flexLayout后Angular2应用程序不工作

的SyntaxError {_nativeError：错误：意外的值 '未定义' 由模块 '的AppModule' 在SyntaxError.BaseError进口...}

这是我app.module.ts

import 'hammerjs'; 

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

import { MaterialModule } from '@angular/material'; 
import { AppComponent } from './app.component'; 

import { LoginComponent } from './modules/login/login.component'; 
import { Angular2RoutingModule } from './app-routing.module'; 
import { WorkflowComponent } from './modules/workflow/workflow.component'; 
import { WorkflowHomeComponent } from './modules/workflow/workflow-home/workflow-home.component'; 
import { AdminComponent } from './modules/admin/admin.component'; 
import { AdminHomeComponent } from './modules/admin/admin-home/admin-home.component'; 
import { ProfileComponent } from './modules/profile/profile.component'; 

import { FlexLayoutModule, ObservableMedia } from '@angular/flex-layout'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    WorkflowComponent, 
    WorkflowHomeComponent, 
    AdminComponent, 
    AdminHomeComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    MaterialModule.forRoot(), 
    FlexLayoutModule, 
    FormsModule, 
    HttpModule, 
    Angular2RoutingModule, 
    JsonpModule, 
    ], 
    entryComponents: [AppComponent], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

This is my profile.component.html: 

<md-card class="demo-card demo-basic"> 
     <md-card-content class="flex-container" style="width: 100%" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
     <form> 
     <div class="flex-container" fxLayout="row" fxLayout.xs="column"> 
      <div class="flex-item" fxFlex="30%" fxFlex.xs="40%"> 
      <md-input class="user-name" placeholder="User Name (disabled)" disabled value="Google"> 
      </md-input> 
      </div> 
      <div class="flex-item" fxFlex="30%" fxFlex.xs="40%"> 
      <md-input class="e-mail" placeholder="E-mail (disabled)" disabled value="Google"> 
      </md-input> 
      </div> 
      <div class="flex-item" fxFlex="30%" fxFlex.xs="40%"> 
      <md-input class="company" placeholder="Company (disabled)" disabled value="Google"> 
      </md-input> 
      </div> 
     </div> 

    </form> 
</md-card-content> 
</md-card>

来源

2017-02-14 SujaniWickramasinghe

您正在从'@ angular/flex-layout'中导入'ObservableMedia'，然后您不使用它。你确定这是一个有效的导入？ –

是的。我用它来使用angular2材质隐藏侧面导航。你给我一个答案。这是正确的。但我想隐藏侧面导航使用angular2材料。我没有把整个代码profile.component.html文件在这里。为此，还需要导入flex-layout.But在导入flex-layout时会给出syntaxError。 – SujaniWickramasinghe

我解决了我的问题。在beta.5版本中导入flex-layout时，应该是这样的。

import { FlexLayoutModule } from '@angular/flex-layout/flexbox';

来源

2017-02-15 05:24:18 SujaniWickramasinghe

你必须做的是停止使用intelliej或webstorm和cd到您的应用程序根目录，并提供服务它将解决问题

来源

2017-02-14 18:35:28

不幸的是，它没有奏效。它仍然给以前的语法错误。 – SujaniWickramasinghe

导入flexLayout后Angular2应用程序不工作

回答

相关问题