Angular 5升级至Angular 6后开发正常，生产构建后无法运行

Hey there! That frustrating ERROR Error: StaticInjectorError(i)[t -> t]: NullInjectorError: No provider for t! you're seeing in the deployed production build is almost always tied to production minification obfuscating class names combined with a missing dependency provider. Let's walk through how to diagnose and fix this step by step:

Step 1: Uncover the Real Class Name (Instead of "t") #

First, we need to figure out what that vague "t" actually refers to. Production builds minify and rename classes to save space, which hides the real culprit. To reveal it:

• Run a production build without optimization:

  ng build --prod --optimization=false
  

• Deploy this unminified build temporarily, then check the console error again. It will now show the actual class name (e.g., UserService or AuthGuard) instead of "t"—that's the service/component missing its provider.

Step 2: Fix the Missing Provider Issue #

Once you know the real class, here are the most common fixes based on Angular 6's changes:

2.1 Update Service Registration to Use providedIn #

Angular 6 introduced the providedIn property in the @Injectable decorator, which replaces the old way of adding services to a module's providers array. If your upgraded service isn't using this:

• Update the service's decorator to register it at the root level:

  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root' // This registers the service globally
  })
  export class YourProblemService {
    // ... service code
  }
  

• If you previously had the service in a module's providers array, remove it to avoid duplicate provider errors.

2.2 Check Lazy-Loaded Module Providers #

If the problematic class is part of a lazy-loaded module:

• Don't register the service with providedIn: 'root' (this would create a singleton in the root injector, not the lazy module's injector). Instead, add it to the lazy module's providers array, or use providedIn: 'any' if you want a separate instance per module.
• Ensure the lazy module isn't missing any imported modules that the service depends on (e.g., HttpClientModule).

2.3 Verify Third-Party Dependency Compatibility #

Angular 6 introduced breaking changes that many older third-party libraries don't support. Check:

• The version of your dependencies (e.g., ngx-bootstrap, @angular/material, rxjs)—they need to have a release that explicitly supports Angular 6.
• Update outdated dependencies using npm update or by modifying your package.json to the correct versions, then run npm install.

2.4 Ensure All Injectable Classes Have the @Injectable Decorator #

Angular 6 is stricter about requiring the @Injectable decorator for any class that uses dependency injection. Double-check that the problematic class (and any classes it depends on) have this decorator applied.

2.5 Validate Module Imports #

Make sure any modules required by the problematic service are imported in the correct module (root module or the module where the service is used). For example, if your service uses HttpClient, ensure HttpClientModule is imported in your AppModule or the relevant feature module.

Step 3: Test the Fix #

After making changes, run a normal production build (ng build --prod) and deploy it again. The error should be resolved if you've addressed the missing provider issue.

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