【问题标题】:On production build getting ' Uncaught (in promise): Error: StaticInjectorError(a)[t]:'....在生产版本中获得'未捕获(承诺):错误:StaticInjectorError(a)[t]:'....
【发布时间】:2020-10-28 22:20:33
【问题描述】:

Angular 6 App 在 ng build 上运行良好。

但是在 ng build --prod 应用程序 UI 被加载但在登录时我会从服务器获取 coorect 数据,之后我通过代码导航到仪表板页面 this.router.navigate(['/dashboard']); 我收到如下错误

ERROR 错误:未捕获(承诺中):错误:StaticInjectorError(a)[t]: StaticInjectorError(Platform: core)[t]: NullInjectorError: No provider for t!错误:StaticInjectorError(a)[t]: StaticInjectorError(Platform: core)[t]: NullInjectorError: No provider for t!在 t.get (main.aa8ef128615c160bd861.js:1) 在 main.aa8ef128615c160bd861.js:1 在 t (main.aa8ef128615c160bd861.js:1) 在 t.get (main.aa8ef128615c160bd861.js:1) 在 main.aa8ef1861.b61 js:1 at t (main.aa8ef128615c160bd861.js:1) at t.get (main.aa8ef128615c160bd861.js:1) at Da (main.aa8ef128615c160bd861.js:1) at t.get (main.aa8ef128615c160bd861.js:1) ) 在 t.getToken (main.aa8ef128615c160bd861.js:1) 在 t.get (main.aa8ef128615c160bd861.js:1) 在 main.aa8ef128615c160bd861.js:1 在 t (main.aa8ef128615c160bd861.js:1) 在 t.get (main.aa8ef128615c160bd861.js:1) 在 main.aa8ef128615c160bd861.js:1 在 t (main.aa8ef128615c160bd861.js:1) 在 t.get (main.aa8ef128615c160bd861.js:1) 在 Da (main.0ba8ef1286js:1515c 1) 在 t.get (main.aa8ef128615c160bd861.js:1) 在 t.getToken (main.aa8ef128615c160bd861.js:1) 在 j (polyfills.9a5f6d04e0781d28c53e.js:1) 在 j (polyfills.9a5f6d04e0781d28c53e.js)在 polyfills.9a5f6d04e0781d28c53e.js:1 在 e.invokeTask (polyfills.9a5f6d04e0781d28c53e.js:1) 在 Object.onInvokeTask (m ain.aa8ef128615c160bd861.js:1) 在 e.invokeTask (polyfills.9a5f6d04e0781d28c53e.js:1) 在 t.runTask (polyfills.9a5f6d04e0781d28c53e.js:1) 在 d (polyfills.9a5f6d04e0781dt.invokee:1) as invoke] (polyfills.9a5f6d04e0781d28c53e.js:1) at _ (polyfills.9a5f6d04e0781d28c53e.js:1)

我的 App.module.ts 看起来像,

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BsDatepickerModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MaterialModule } from './angular-material/material.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AppRoutingModule } from './app.routing-module';
import { FiltersComponent } from './filters/filters.component';
import { SearchComponent } from './search/search.component';
import { ChartComponent } from './chart/chart.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { KeysPipe } from './shared/pipes/keys.pipe';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { AboutComponent } from './about/about.component';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DashboardComponent,
    FiltersComponent,
    SearchComponent,
    ChartComponent,
    KeysPipe,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    ChartsModule,
    HttpClientModule,
    BsDatepickerModule.forRoot(),
    AppRoutingModule,
    PdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用环境是:-

    Angular CLI: 6.0.8
Node: 10.2.1
OS: linux x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

- 0.6.8, .6.8, .6.8, .6.8, -0.6.8, @angular/cdk -6.2.1, @angular/cli -6.0.8, @angular/material - 6.2.1, - 6.0.8, .6.8, - 0.6.8 , rxjs-6.2.1, typescript -2.7.2, webpack -4.8.3

【问题讨论】:

    标签: angular angular-routing angular6


    【解决方案1】:

    我的一个组件中缺少提供程序时遇到了同样的问题,为了更容易调试,我建议这样做:

    通过进入 angular.json 文件并编辑 production: 对象来启用详细输出: "aot": true , "optimization": false, "buildOptimizer": false。

    这会在构建期间删除 uglification,因此错误日志包含缺少的模块名称

    【讨论】:

      【解决方案2】:

      问题是,

      我在 app-routing.module.ts 文件中使用 CanActivateChild authgaurd 服务, 这个服务应该已经在 app.module.ts providers 数组中提供了,我错过了。

      如果应用程序模块文件中的 providers 数组中的服务可以正常工作。

      但是在 dev(ng build) 构建中它没有给我任何错误。

      【讨论】:

      • 对我来说,它是 CdkConnectedOverlay 模块。
      【解决方案3】:

      您是否使用任何服务从服务器获取数据?因为我看不到您的应用模块中添加了任何服务。请检查这可能是一个问题。

      【讨论】:

      • 我正在使用 sigin.service.ts 并在做 @Injectable({ providedIn: 'root' }) github.com/angular/angular/issues/24465 看到这个链接我已经详细解释了
      • 我知道。我认为这可能是问题..谢谢
      猜你喜欢
      • 2018-05-12
      • 2023-01-30
      • 2018-09-21
      • 2018-11-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多