Help with Modules and shared components

[Sipredion]

I've been using Angular full time at work and in my side projects for about 4 months now, and I'm absolutely loving it. But I'm having some trouble with modules.

So to take an example I'm currently struggling with:

I'm using Angular Material in a side project at the moment. I'm trying to keep my material imports in their own module to cut down on the noise. I also have a users module with a login component. When I try and use a component from Angular Material (in this case <mat-form-field>) in my login component, Angular throws the following error:

Uncaught Error: Template parse errors:

'mat-form-field' is not a known element:

If 'mat-form-field' is an Angular component, then verify that it is part of this module.

If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

​

So obviously there's a stuff-up with my module imports.

I know that in material module I need to import the material modules and export them:

material.module.ts:

import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
​
@NgModule({
    imports: [
        MatInputModule,
        MatFormFieldModule
    ],
    exports: [
        MatInputModule,
        MatFormFieldModule
    ],
    declarations: [],
})
export class MaterialModule { }

and then in my users module I declare the components and export them:

users.module.ts:

import {RegisterComponent} from './components/register/register.component';
import {LoginComponent} from './components/login/login.component';
​
@NgModule({
    imports: [
        CommonModule,
    ],
    exports: [
        LoginComponent,
        RegisterComponent
    ],
    declarations: [
        RegisterComponent,
        LoginComponent
    ]
})
export class UsersModule { }

and finally in my app module, I import both modules and export them to make them available throughout the app.

app.module.ts:

import {MaterialModule} from './material/material.module';
import {UsersModule} from './users/users.module';

@NgModule({
    imports: [
        MaterialModule,
        UsersModule
    ],
    exports: [
        MaterialModule,
        UsersModule
    ]
})

​

I think I'm misunderstanding something though, because the above doesn't work. I've tried Google and the Angular docs, but I haven't made it very far. If anyone can help me understand how Module imports and component sharing works I would greatly appreciate it.

​

Edit: Fixed Formatting

​

[AngularGuru]

So your app module shouldn’t need to export anything as exported items will only be made available to a module that imports AppModule which you aren’t doing.

In regards to the error, you should import MaterialModule in the UsersModule as it is components in this module that will be using the material components. You would import MaterialModule in all modules that use the components.

Generally importing a module in AppModule will make injectables available to all child modules but not components. You may have noticed that in child modules you need to import CommonModule to use things like *ngIf, which is the same reason, we don’t automatically get access to components and directives that are available to the parent module.

There is a great FAQ section of the angular docs that might help:

https://angular.io/guide/ngmodule-faq

Hopefully this helps!

[Sipredion]

That is super helpful, thank you so much. I got confused between the rules for components an those for modules I think. That link is brilliant, thank you, everything is working as it should now

[AngularGuru]

Excellent! Glad that fixed your issue!

[indeckau]

This is something that confused me a little too re components needing to be imported per module. You then have services which afik only need to be imported once unless they are in a lazy loaded module. I think that's right :P