One problem that I’ve run into consistently has been various components not appearing on the webpage. So, if I had
<mat-progress-bar class="" color="primary" mode="determinate" [value]="item.progress"> </mat-progress-bar>
Sometimes it just won’t appear. Here’s the structure we need to remember:
app.module.ts has all the primary things you need for running the site, but NOT the UI components.
So then, you’ve got sub-modules. Like, perhaps you’ve got a user manager section: app-user.module.ts
The way we get to those is with lazy loading. IT works like this: In app.routes, you create a subdirectory, where you load the “feature module” as kind of a querystring option
{
path: 'ops',
loadChildren: './views/operations/operations.module#OperationsModule',
data: { title: 'Operations', breadcrumb: 'Operations'}
},
So, we’ve got the primary module loaded. And, it really should have as little as possible in it. ( Seriously, even the login should go to a login-feature module.) Now, the feature module is where we want to put all our UI code. Because this is lazy-loaded, we aren’t sharing any UI components. So, if you are using Material Design modules, they need to come in here – in every feature module.
There is an exception: Services. While the app.module doesn’t share any declarations or modules to feature modules, the Services are shared.
Here is a short and simple post that can also help: https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407
