购买Angular模板后，@angular/cli搭配Webpack时Live Reload失效求助

Hey there, sorry to hear the live reload's being stubborn on your Angular template project! Let's walk through some common fixes since you're using @angular/cli—this usually boils down to a few config or environment quirks.

1. Verify you're using the official Angular CLI dev server #

• Make sure you're starting the project with the standard CLI command: ng serve, not a custom Webpack script some templates might include. The Angular CLI manages its own dev server with built-in live reload support.
• Check your terminal output when starting up: if you see ** Live Reloading enabled. **, the base feature is active. If not, double-check your package.json scripts to make sure you didn't accidentally add a --no-live-reload flag to the serve command.

2. Check file exclusion rules #

• Angular CLI defaults to watching all files in the src/ directory, but some templates add custom exclusions in angular.json. Open the file, navigate to projects -> [your-project-name] -> architect -> build -> options -> exclude, and make sure the files/folders you're modifying aren't listed here.
• You can also check tsconfig.json for exclude rules, though the CLI prioritizes settings in angular.json.

3. Clear cache and restart the server #

• Cached files often break live reload. First, stop the dev server, then run ng cache clean (for Angular CLI 13+) or manually delete the .angular/cache folder in your project root.
• Restart with ng serve, then test with a simple edit (like changing text in src/app/app.component.html) to see if the browser refreshes automatically.

4. Rule out browser issues #

• Browser extensions (ad blockers, cache managers, etc.) can block the live reload signal. Try opening your app in incognito mode or temporarily disabling all extensions.
• You can also disable browser cache manually: open DevTools (F12), go to the Network tab, check Disable cache, then refresh the page.

5. Check custom Webpack config (if your template uses one) #

• If your template overrides the default Webpack setup (e.g., with @angular-builders/custom-webpack), verify these settings:
  • Ensure devServer.hot is set to true in your custom Webpack config.
  • Check watchOptions to make sure you aren't ignoring the files you're modifying (excluding node_modules/ is normal, but don't include src/ here).
  • In angular.json, confirm live reload is enabled in the serve builder config:

    "architect": {
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
          "liveReload": true,
          // Other configs...
        }
      }
    }
    

6. Validate dependency versions #

• Version mismatches between @angular/cli and your template's dependencies can cause issues. Run npm list @angular/cli to check your current version, and make sure it matches the version specified in your template's package.json.
• If there's a big gap, try updating the CLI with npm update @angular/cli, or reset your dependencies entirely: rm -rf node_modules package-lock.json && npm install.

If none of these work, create a fresh Angular project with ng new test-app and test live reload there. If it works, the problem is likely in your template's custom config—compare the angular.json and Webpack files between the fresh project and your template to spot differences.

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