I've noticed some strange behavior in my code recently and I can't figure out where it's originating from. In an effort to clean up my codebase, I decided to create separate modules for each component and a routing module to manage all the routes.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from '@features/authentication/login/login.component';
const appRoutes: Routes = [
{
path : 'auth/login',
component: LoginComponent
},
];
@NgModule({
imports : [
RouterModule.forRoot(appRoutes),
],
exports : [
RouterModule
]
})
export class AppRoutingModule { }
login.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatFormFieldModule} from '@angular/material/button';
import { LoginComponent } from './login.component';
@NgModule({
declarations: [
LoginComponent
],
imports : [
RouterModule,
MatFormFieldModule,
]
})
export class LoginModule
{
}
Within app.module.ts, I simply import app-routing.module.ts. However, I keep encountering an error stating that
'mat-form-field' is not a known elementlogin.module.ts into app-routing.module.ts, everything works smoothly. It's puzzling as to why this additional step is necessary...
Edit: (app.module.ts)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from '@core/core.module';
import { LayoutModule } from 'app/layout/layout.module';
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from 'app/app.component';
@NgModule({
declarations: [
AppComponent
],
imports : [
// Browser
BrowserModule,
BrowserAnimationsModule,
// App modules
CoreModule,
LayoutModule,
AppRoutingModule,
],
bootstrap : [
AppComponent
]
})
export class AppModule { }