I'm in the process of migrating a large V8 app to V9 and I'm experiencing errors with components that use Material components. I'm getting error NG8001: 'mat-icon' is not a known element. I fixed the issue by adding an import statement for MatIconModule to the *.module.ts file in the directory containing the component definition. The issue I have is that there is another *.module.ts containing this import statement in the directory above this directory, but V9 seems to be ignoring that file when searching for import statements. For example:-
+ parent-dir
+ child-dir
component-dir
child-dir.module.ts
+ parent-dir.module.ts
In this example, I'm getting an error for the component in component-dir because the import statement is missing from child-dir.module.ts file even though it is in parent-dir.module.ts file. When I add the import statement to child-dir.module.ts file, it fixes the issue.
In V8 placement of the import statement as described above worked, but it seems in V9, it's no longer walking up the directory hierarchy looking for imports statements.
Is this documented anywhere because I haven't found it and will this continue to work this way in V10, V11, and V12? I need to understand this as I'm tasked with migrating this V8 app all the way up to V12.
Because this situation works when building with the old ViewEngine, it looks like the old ViewEngine has an issue where it would export more modules than it should. Whereas Ivy only exports the modules it was told to export. This is a somewhat simplistic explanation of why the error occurs.
The solution is to make sure the missing module appears in the exports array in the appropriate @NgModules class.