2017-02-14 2 views
1

Я пытаюсь создать форму с использованием flexLayout в угловом материале. Он дает syntaxError.Приложение Angular2 не работает после импорта flexLayout

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> 
+0

Вы импортируете 'ObservableMedia' из' @ angular/flex-layout', а затем вы его не используете. Вы уверены, что это допустимый импорт? –

+0

есть. Я использовал это для скрытой боковой навигация используя угловой2 материалы. Вы отправили мне ответ. Это правильно. Но я хочу скрыть боковую навигацию с использованием материала angular2. Я не размещал весь код файла profile.comentent.html здесь. Для этого также нужно импортировать flex-layout. Но при импорте flex-layout он дает синтаксисError. – SujaniWickramasinghe

ответ

0

Я решил свою проблему. При импорте flex-layout в версии beta.5 это должно быть так.

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

все вам нужно сделать, это прекратить использование intelliej или webstorm и cd в корневом каталоге приложения и выполнить ng. устранит проблему.

+0

К сожалению, это не сработало. Он по-прежнему дает предыдущий синтаксисError. – SujaniWickramasinghe

Смежные вопросы