Extracting components from Angular Routes

When I forgot to declare (in declarations) the components used in Angular Routes, it resulted to error: NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'


I decided to make a helper function:

function* getRoutesComponents(routes: Routes) {
    for (const route of routes) {
        if (route.component) {
            yield route.component;

            if (route.children) {
                yield* getRoutesComponents(route.children);
            }
        }
    }
}

Problem is, it gives these errors:




To enable runtime goodness, we need to disable AOT compilation, add --aot=false on angular commandline. However, disabling AOT would cause two major inconveniences.

First inconvenience, we cannot use constants as keys on objects (e.g., Angular Route) anymore. Doing so would result to example error: ERROR in Cannot read property 'loadChildren' of undefined




We can rectify the problem by avoiding the use of constants as keys:




Second inconvenience when AOT is disabled, despite fullTemplateTypeCheck is set to true, Angular won't be able to check name of the object(and properties) you are binding to ngModel if the name has a typo or misspellings. Angular will still happily build your project even if your template has full of typos or misspellings, which will result to runtime errors.



On the screenshot above, productNameBlahMeh does not exist on Product interface, yet Angular still build the project. This is due to AOT being disabled.


Those two inconveniences greatly outweighs the safety net for committing typos (or spelling mistakes). const can prevent typo errors as it enforces the single source of names in the code. It's hard to rely on developers not making typo or misspelling mistakes. fullTemplateTypeCheck only works if AOT is enabled.