Angular / NativeScript项目中的StaticInjectorError(AppModule)[MatSnackBar-> Overlay]-如何解决?

时间:2019-04-05 15:07:50

标签: angular typescript nativescript

我正在尝试将Angular项目迁移到NativeScript。
每当我尝试运行tns run android --bundle时,都会出现以下错误:

    JS ERROR Error: Uncaught (in promise): Error:  
       StaticInjectorError(AppModule)[MatSnackBar -> Overlay]:
    JS:   StaticInjectorError(Platform: core)[MatSnackBar -> Overlay]: 
    JS:     NullInjectorError: No provider for Overlay!
    JS: Error: NullInjectorError: No provider for Overlay!

我的结构是这样的:

src
  |- app
      |- search
           |- search.component.ts  # MatSnackBar is in here
      |- material
           |- material.module.ts  # MatSnackBarModule import is here
      |- app.module.ts  # imports MaterialModule(^) and OverlayModule`

在网上寻找并没有产生结果。

app.module.ts: 


    import ...

    @NgModule({
      imports: [
        ...
        MaterialModule,
        OverlayModule,
        ...
      ],
      declarations: [
        AppComponent,
        ...
        SearchComponent,
        ...
      ],
      providers: [], 
      bootstrap: [AppComponent],
    })
    export class AppModule {}
material.module.ts:


    import ...  

    @NgModule({
      imports: [
        ...
        MatSnackBarModule,

      ],
      exports: [
        ...
        MatSnackBarModule,

      ],
      declarations: [],
    })
    export class MaterialModule { }
search.component.ts:


    import ...
    import { MatSnackBar } from '@angular/material';
    import { MaterialModule } from '../material/material.module';

    @Component({
        selector: 'app-search',
        templateUrl: './search.component.html',
        styleUrls: ['./search.component.css'],
        providers: [MaterialModule, MatSnackBar]
    })
    export class SearchComponent implements OnInit {
                constructor(private snackBar: MatSnackBar) { }

        openSnackBar() {
            this.snackBar.open('Sorry' , 'Close' , {
                duration: 3000
            });
        }

    }

有趣的是,它可以与ng serve一起正常使用,但不能与上述命令一起使用。

编辑: 从SearchComponent删除MatModuls会出现以下错误:

JS: ERROR Error: Uncaught (in promise): Error:
    StaticInjectorError(AppModule)[SearchComponent -> MatSnackBar]:  
JS: StaticInjectorError(Platform: core)[SearchComponent -> MatSnackBar]: 
JS: NullInjectorError: No provider for MatSnackBar! 
JS: Error: NullInjectorError: No provider for MatSnackBar!

1 个答案:

答案 0 :(得分:0)

providers删除@Component

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
})