fix(docs-infra): Cannot find module message

Fixed the import error message in the editor section. The build would complete successfully, but an error message would be incorrectly reported.

Author: aparzi

adev/src/app/editor/code-editor/code-mirror-editor.service.ts

@@ -218,8 +218,17 @@ export class CodeMirrorEditor {
       return;
     }
 
-    // Send message to tsVfsWorker only when current file is TypeScript file.
-    if (!this.currentFile()?.filename.endsWith('.ts')) return;
+    // Always allow infrastructure/setup requests to go through, regardless of current file type.
+    const infraActions = new Set<unknown>([
+      TsVfsWorkerActions.CREATE_VFS_ENV_REQUEST,
+      TsVfsWorkerActions.UPDATE_VFS_ENV_REQUEST,
+      TsVfsWorkerActions.DEFINE_TYPES_REQUEST,
+    ]);
+
+    if (!infraActions.has(request.action)) {
+      // For language-service operations, ensure the current file is a TypeScript file.
+      if (!this.currentFile()?.filename.endsWith('.ts')) return;
+    }
 
     this.tsVfsWorker.postMessage(request);
   };

adev/src/app/editor/typings-loader.service.ts

@@ -76,8 +76,9 @@ export class TypingsLoader {
 
     for (const library of this.librariesToGetTypesFrom) {
       // The library's package.json is where the type definitions are defined
+      const packageJsonFsPath = `./node_modules/${library}/package.json`;
       const packageJsonContent = await this.webContainer.fs
-        .readFile(`./node_modules/${library}/package.json`, 'utf-8')
+        .readFile(packageJsonFsPath, 'utf-8')
         .catch((error) => {
           // Note: "ENOENT" errors occurs:
           //    - While resetting the NodeRuntimeSandbox.
@@ -94,15 +95,31 @@ export class TypingsLoader {
       // if the package.json content is empty, skip this library
       if (!packageJsonContent) continue;
 
+      // Ensure the worker VFS also receives the package.json file so NodeNext resolution
+      // can read "exports"/"types" information when resolving imports like '@angular/core'.
+      filesToRead.push(`/node_modules/${library}/package.json`);
+
       const packageJson = JSON.parse(packageJsonContent);
 
-      // If the package.json doesn't have `exports`, skip this library
+      // If the package exposes a top-level types entry, include that directory as a fallback
+      const topLevelTypes: string | undefined = packageJson.types ?? packageJson.typings;
+      if (!packageJson?.exports && topLevelTypes) {
+        const path = `/node_modules/${library}/${this.normalizePath(topLevelTypes)}`;
+        const directory = path.substring(0, path.lastIndexOf('/'));
+        directoriesToRead.push(directory);
+        continue;
+      }
+
       if (!packageJson?.exports) continue;
 
       // Based on `exports` we can identify paths to the types definition files
       for (const exportKey of Object.keys(packageJson.exports)) {
         const exportEntry = packageJson.exports[exportKey];
-        const types: string | undefined = exportEntry.typings ?? exportEntry.types;
+        // Handle both object and string entries; for strings we can't infer types, so skip
+        const types: string | undefined =
+          exportEntry && typeof exportEntry === 'object'
+            ? (exportEntry.typings ?? exportEntry.types)
+            : undefined;
 
         if (types) {
           const path = `/node_modules/${library}/${this.normalizePath(types)}`;
@@ -131,9 +148,38 @@ export class TypingsLoader {
   private async getTypeDefinitionFilesFromDirectory(directory: string): Promise<string[]> {
     if (!this.webContainer) throw new Error('this.webContainer is not defined');
 
-    const files = await this.webContainer.fs.readdir(directory);
+    return this.getTypeDefinitionFilesRecursively(directory);
+  }
+
+  private async getTypeDefinitionFilesRecursively(directory: string): Promise<string[]> {
+    if (!this.webContainer) throw new Error('this.webContainer is not defined');
+
+    const results: string[] = [];
+    const entries = await this.webContainer.fs.readdir(directory).catch((error) => {
+      // Directory may not exist (e.g., optional export) — ignore.
+      if (error?.message.startsWith('ENOENT')) return [];
+      throw error;
+    });
+
+    for (const entry of entries) {
+      const fullPath = `${directory}/${entry}`;
+      // Try to read as directory; if it fails, treat as file
+      const children = await this.webContainer.fs.readdir(fullPath).catch((err) => {
+        // Not a directory or doesn't exist
+        return null;
+      });
+
+      if (Array.isArray(children)) {
+        const nested = await this.getTypeDefinitionFilesRecursively(fullPath);
+        results.push(...nested);
+      } else {
+        if (this.isTypeDefinitionFile(fullPath)) {
+          results.push(fullPath);
+        }
+      }
+    }
 
-    return files.filter(this.isTypeDefinitionFile).map((file) => `${directory}/${file}`);
+    return results;
   }
 
   private isTypeDefinitionFile(path: string): boolean {

adev/src/content/tutorials/learn-angular/intro/src/app/app.ts

@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    Welcome to Angular!
+    Welcomes to Angular!
   `,
 })
 export class App {}