Merge pull request #933 from stevenkampen/bug/918-ng-module-display-in-injector-graph

Improve NgModule parsing and protect against missing info in template

Author: Steven Kampen

src/backend/backend.ts

@@ -68,12 +68,16 @@ const messageBuffer = new MessageQueue<Message<any>>();
 /// NOTE(cbond): We collect roots from all applications (mulit-app support)
 let previousTree: MutableTree,
   previousCount: number,
+  initialModules: { [key: string]: any },
   onMouseOver,
   onMouseDown;
 
-const parseInitialModules = (roots: Array<any>) => {
-  if (roots.length) {
-    messageBuffer.enqueue(MessageFactory.ngModules(parseModules(roots[0])));
+const parseInitialModules = () => {
+  const roots = getAllAngularRootElements().map(r => ng.probe(r));
+  if (!initialModules && roots.length) {
+    initialModules = parseModules(roots[0]);
+    messageBuffer.enqueue(MessageFactory.ngModules(initialModules));
+    send(MessageFactory.push());
   }
 };
 
@@ -132,7 +136,6 @@ const bind = (root) => {
 
   // initial load
   subject.next(void 0);
-  parseInitialModules(getAllAngularRootElements().map(r => ng.probe(r)));
 };
 
 const checkDebug = (fn: () => void) => {
@@ -159,6 +162,8 @@ const resubscribe = () => {
     subscriptions.splice(0, subscriptions.length);
 
     getAllAngularRootElements().forEach(root => bind(ng.probe(root)));
+
+    setTimeout(parseInitialModules);
   });
 };
 

src/backend/utils/parse-modules.ts

@@ -40,18 +40,19 @@ const randomId = () => {
 };
 
 const resolveTokenIdMetaData = (token, tokenIdMap: { [key: string]: any }) => {
-  let tokenId = '';
+  let tokenId = null;
   if (typeof token === 'string') {
     tokenId = token;
   } else {
     if (!Reflect.getMetadata(AUGURY_TOKEN_ID_METADATA_KEY, token)) {
+      tokenId = randomId();
       while (tokenIdMap[tokenId]) {
         tokenId = randomId();
       }
       Reflect.defineMetadata(AUGURY_TOKEN_ID_METADATA_KEY, tokenId, token);
     }
   }
-  return { token: token, augury_token_id: tokenId };
+  return { token: token, augury_token_id: tokenId || Reflect.getMetadata(AUGURY_TOKEN_ID_METADATA_KEY, token) };
 };
 
 const parseProviderName = p =>

src/frontend/components/injector-tree/injector-tree.html

@@ -44,7 +44,9 @@ <h3 class="monospace primary-color">
     <ul class="list-reset m0">
       <li>
         <span class="info-key">NgModule:</span>
-        <span class="info-value">{{ngModules.tokenIdMap[parentHierarchy[focusedComponent].augury_token_id].module}}</span>
+        <span class="info-value" *ngIf="ngModules && ngModules.tokenIdMap[parentHierarchy[focusedComponent].augury_token_id]">
+          {{ngModules.tokenIdMap[parentHierarchy[focusedComponent].augury_token_id].module}}
+        </span>
       </li>
     </ul>
   </div>
@@ -62,7 +64,9 @@ <h3 class="monospace primary-color">
       </li>
       <li>
         <span class="info-key">NgModule:</span>
-        <span class="info-value">{{ngModules.tokenIdMap[parentHierarchy[focusedComponent].dependencies[focusedDependency].id].module}}</span>
+        <span *ngIf="ngModules && ngModules.tokenIdMap[parentHierarchy[focusedComponent].dependencies[focusedDependency].id]" class="info-value">
+          {{ngModules.tokenIdMap[parentHierarchy[focusedComponent].dependencies[focusedDependency].id].module}}
+        </span>
       </li>
     </ul>
   </div>