Angular CLI项目核心配置文件与文件夹归类隐藏问题求助

Great question! It’s totally possible to move your support files (like e2e, node_modules, and configs) into a support_files folder so you can focus solely on your src directory. The errors you’re seeing are almost certainly path mismatches in your config files—let’s fix that step by step.

First: Confirm Feasibility #

Yes, you absolutely can restructure your project this way. The key is updating all configuration files that reference paths to your source code, dependencies, and tooling assets. Note: If you’re on Angular 6+, you’ll be working with angular.json instead of .angular-cli.json, but the core logic applies to both.

Step-by-Step Restructuring #

1. Move Your Files #

First, create the support_files folder in your project’s root directory (the same place your src folder lives). Then move these into it:

• e2e folder
• node_modules folder
• Config files: package.json, tsconfig.json, .angular-cli.json (or angular.json), package-lock.json (or yarn.lock)

2. Update Configuration Paths #

You’ll need to tweak paths in each config file to reflect their new location inside support_files:

For .angular-cli.json (Angular <6)

Open support_files/.angular-cli.json and adjust these fields:

• root: Set this to "../" (since the config file is now in support_files, the project’s root is one level up where src lives)
• apps[0].root: Keep this as "src" (it’s relative to the project root we just defined)
• apps[0].outDir: If you want your build output (dist) to live in the project root, set this to "../dist"; if you prefer it inside support_files, use "dist"
• apps[0].tsconfig: Set this to "tsconfig.json" (now that both files are in the same support_files folder, no need for a relative path up)
• e2e: Set this to "e2e" (the e2e folder is now in the same directory as the config)

For tsconfig.json

Open support_files/tsconfig.json and update:

• compilerOptions.baseUrl: Set to "../src" so TypeScript knows where your source files are located relative to the config
• include: Update to ["../src/**/*"] to ensure TypeScript compiles all files in your src folder
• Double-check that compilerOptions.types and other module references point to node_modules (which is now in support_files, so relative paths like "node_modules/typescript/lib" will work automatically)

For package.json

Your npm/yarn commands will need to account for the new structure. Update the scripts section in support_files/package.json:

• For commands like ng serve, you can either:
  1. Run them from inside the support_files folder (e.g., cd support_files && ng serve), or
  2. Add a script that handles the path for you:

     "scripts": {
       "start": "ng serve --root ../",
       "build": "ng build --root ../ --output-path ../dist",
       "test": "ng test --root ../",
       "e2e": "ng e2e --root ../"
     }
     

• Remember to run npm install (or yarn install) from inside support_files—this ensures dependencies are installed in the correct node_modules folder there.

Fixing Common Errors #

• "Cannot find typescript module": This happens if TypeScript can’t locate your node_modules or source files. Make sure you ran npm install in support_files, and that tsconfig.json’s include and baseUrl are set correctly.
• "tsconfig.json path error": Double-check the tsconfig field in .angular-cli.json—it should point to the tsconfig.json in the same support_files folder, not a path up to the old location.

Extra Tips #

• Backup first: Before moving files, make a copy of your entire project. It’s easy to mess up path references, and having a backup saves headaches.
• IDE setup: If you’re using VS Code or another IDE, set your workspace root to the folder containing both src and support_files. This ensures the IDE recognizes all files and provides proper intellisense.
• Angular 6+ note: For angular.json, update projects.[your-project-name].root to "../", sourceRoot to "src", and architect.build.options.outputPath to "../dist" to mirror the .angular-cli.json changes.

内容的提问来源于stack exchange，提问作者Dani