HTML selectors and directives not recognized

Viewed 618

I have an Angular Application that depends on a Shared Lib, which has a module importing every other configurations modules:

@NgModule({
    exports: [
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        MaterialModule,
        InterceptorModule,
        ReactiveFormsModule,
    ]
})
export class SharedModule {
    static forRoot(environment: Environment): ModuleWithProviders {
        return {
            ngModule: SharedModule ,
            providers: [
                NotificationService,
                AuthGuard,
                JWTService,
                ShareDataService,
                {
                    provide: ENVIRONMENT_TOKEN,
                    useValue: environment
                },
                { provide: LOCALE_ID, useValue: 'pt' },
            ]
        };
    }
}

And here is the ngModule (app.module.ts) from my Angular Application:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    SharedModule.forRoot(environment),
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The application runs perfectly, but when i open any html file from components, i get the following erros:

[formGroup] directive inside form element:

Can't bind to 'formGroup' since it isn't a known property of 'form'.ng

mat- components selectors throws this error on VsCode:

'mat-datepicker' is not a known element:

  1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
  2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' > of this component to suppress this message.ng

It looks like the VsCode doesn't recognize the SharedModule imports.

example

[UPDATE] - MATERIAL MODULE:

@NgModule({
    exports: [
        MatButtonModule,
        MatCardModule,
        MatToolbarModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule,
        MatIconModule,
        MatSnackBarModule,
        MatTooltipModule,
        MatSelectModule,
        MatProgressSpinnerModule,
    ]
})
export class MaterialModule { }

[UPDATE2] - I tried disabling the Angular Language Service VSCODE extension, and the problems has gone. So, looks like the extension doesn't recognize my external lib shared module. Is there any way to declare the imports manually? I also tried to add import array inside my SharedModule and nothing happened, same errors.

0 Answers
Related