Angular 6找不到.angular-cli.json，如何修改outDir？

Hey there! Let's sort out your issues step by step—this is a super common problem when following older Angular tutorials with newer CLI versions.

Why you can't find .angular-cli.json #

The tutorial you're using is for Angular CLI 1.x, which relied on .angular-cli.json for configuration. Starting with Angular 6+, the CLI switched to using angular.json as the main config file. That's why you can't locate the old file!

Correctly setting the build output directory #

You mentioned editing tsconfig.json's outDir—but that's for intermediate TypeScript compilation files, not the final bundled production build. Here's how to set the actual output path:

• Open your project's angular.json file (it lives in the root directory).
• Navigate to projects -> [your-project-name] -> architect -> build -> options.
• Look for the outputPath property (defaults to "dist/[your-project-name]").
• Change this to the directory your backend expects (e.g., "../backend/public" if your backend serves static files from a public folder).
• Run ng build (add --prod for production-ready bundles) — your compiled files will now go to the path you set.

Integrating Angular with your existing backend (run on localhost:3000) #

You have two main options depending on whether you're in development or production:

Production setup #

1. Build your Angular app with the correct outputPath pointing to your backend's static file directory (following the step above).
2. Start your backend server—when you visit localhost:3000, your backend will serve the Angular app files directly.

Development setup (with hot-reload) #

If you want to keep using Angular's live-reload during development while proxying API calls to your backend:

1. Create a proxy.conf.json file in your Angular project root with this content:

   {
     "/api/*": {
       "target": "http://localhost:3000",
       "secure": false,
       "changeOrigin": true
     }
   }
   

   (Adjust /api/* to match your backend's API route prefix.)
2. Open angular.json, go to projects -> [your-project-name] -> architect -> serve -> options, and add:

   "proxyConfig": "proxy.conf.json"
   

3. Start your backend server on localhost:3000.
4. Run ng serve (it will default to localhost:4200). Any API requests from your Angular app to /api/... will automatically forward to your backend at localhost:3000, while you get all the live-reload benefits for your frontend code.
   • If you want to access everything on localhost:3000 during development, you can configure your backend to serve the Angular dev server's files, but proxying is usually simpler and faster.

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