The root cause of the problem is the environment in which UI runs.

• In DEV mode (cmd: npm start), if you generate a component and switch to another component, some info of the previous component is retained in memory for debug . Therefore, when we click on multiple components, we see from the chrome browser's task manager that the memory of JavaScript memory is increasing continuously, and when we use the chrome memory debug tool to record allocation timeline, we find that the allocated memory of old component cannot be completely collected, half left usually.

• When switching to the production environment, we used the task manager and chrome memory debug to observe the memory of UI and found no memory leaks. When users switch from the old component to the new one, the old memory is collected by GC.

Code Level

• DEV model use : `src/app/environment.ts`

• PRODUCT model use: `src/app/environment.prod.ts`

The “environment.prod.ts” calls the "enableProdMode();" method, which locates at "import { enableProdMode, NgModuleRef } from '@angular/core';", but the "environment.ts' not.