Question

我试图在angular2材质中使用flexLayout创建表单。它给出了syntaxError。

SyntaxError {_nativeError：错误：意外的值＆＃39;未定义＆＃39;由模块导入的AppModule＆＃39; 在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>

Answer 1

你所要做的就是停止使用intelliej或webstorm并cd进你的app根目录并进行服务它会解决问题

Answer 2

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

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

导入flexLayout后，Angular2应用程序无法正常工作

2 个答案: