Angular2 Anwendung funktioniert nicht nach dem Importieren von FlexLayout

Question

Ich versuche, ein Formular mit flexLayout in angular2 Material zu erstellen. Es gibt SyntaxError.

Syntax {_nativeError: Fehler: Unerwarteter Wert 'undefined' durch das Modul 'AppModule' bei SyntaxError.BaseError importiert ...}

Das ist mein app.module.ts

ist Sie

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> 

Answer 1

Ich löste mein Problem. Beim Import des Flex-Layouts in der Beta-Version sollte es so sein.

Answer 2

alle tun müssen, ist aufhören zu verwenden intelliej oder webstorm und cd in Ihre app root-Verzeichnis und tun ng dienen es wird das Problem lösen