Angular CLI(v1.7.1)部署至GitHub Pages/Firebase时出现StaticInjectorError

Alright, let's tackle this frustrating issue head-on. Your local dev server works perfectly, but production builds deployed to GitHub Pages or Firebase show a blank page with that cryptic NullInjectorError: No provider for e! error. Here's how to diagnose and fix it:

1. Decrypt the Obfuscated Error Message #

First, the biggest roadblock right now is that the production build minifies/obfuscates all class names into single letters like e, so you can't tell which service or dependency is missing. To fix this, build your production bundle with source maps enabled to get real, human-readable class names:

ng build --prod --base-href "https://<user-name>.github.io/<repo>/" --source-map --build-optimizer false

Now when you run the deployed code, the console error will show the actual name of the service that's missing a provider instead of e. This is critical for pinpointing the root issue.

2. Fix the Missing Provider Issue #

Once you have the real service name, check these common culprits:

• Forgot to add the service to your module's providers array: In Angular v5 (which pairs with CLI v1.7.1), services marked with @Injectable() aren't automatically provided at the root level. You need to explicitly add them to the providers array in your AppModule (or the relevant feature module).
  Example:

  // app.module.ts
  import { YourMissingService } from './path/to/your-service';
  
  @NgModule({
    providers: [YourMissingService] // Don't skip this step!
  })
  export class AppModule {}
  

• Third-party library not imported correctly: If the missing provider comes from a third-party tool (like Angular Material, NgRx, etc.), make sure you've imported the required module into your AppModule and added any mandatory providers.
• Lazy-loaded module misconfiguration: If the service is used in a lazy-loaded module, ensure it's either provided in that module (for scoped usage) or in a shared module that's imported by the lazy module.

3. Verify Base-Href & Deployment Configuration #

Even if the DI issue is fixed, incorrect base-href or deployment settings can still cause blank pages:

• GitHub Pages: Double-check that your --base-href parameter is formatted correctly. It should be "/<repo>/" (with leading and trailing slashes) — the full URL in the build command works too, but the relative path is more reliable. When using ngh, confirm you've installed it properly (npm install -g angular-cli-ghpages) and your repo is configured correctly.
• Firebase: Ensure your firebase.json has the correct rewrite rules to handle Angular's single-page routing. Without this, routing will break and may lead to blank pages:

  {
    "hosting": {
      "public": "dist",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

4. Validate Production Build Locally #

Before deploying again, test the production build locally to confirm it works. Use a simple HTTP server like http-server:

npm install -g http-server
cd dist
http-server -c-1

Visit localhost:8080 — if it works here, the issue is likely with deployment configuration, not the build itself. If it still shows the blank page, you know the problem is in your code/build setup.

Once you've fixed the missing provider and verified the build, redeploy to GitHub Pages or Firebase, and your app should load correctly!

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