Angular Internel Error when building using `ng build --prod'

Question

I'm getting an error while building angular app using --prod flag. I'm unable to get to any point since stack show error at lower compiler level. What is causing the errors?

When I run ng build without --prod flag, it would compile without any error.

Following warning is logged before error:

Warning: Can't resolve all parameters for TodoDateService in /srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/src/app/todo-date.service.ts: (?). This will become an error in Angular v6.x

Following are error details:

ERROR in Error: Internal error: unknown identifier []

at Object.importExpr$1 [as importExpr] (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:25374:27)

at /srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:20497:37
at Array.map (<anonymous>)

at InjectableCompiler.depsArray (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:20463:25)

at InjectableCompiler.factoryFor (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:20527:36)

at InjectableCompiler.injectableDef (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:20546:42)

at InjectableCompiler.compile (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:20556:106)

at /srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:25219:90
at Array.forEach (<anonymous>)

at AotCompiler._emitPartialModule2 (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:25219:25)

at /srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:25212:48
at Array.reduce (<anonymous>)

at AotCompiler.emitAllPartialModules2 (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler/bundles/compiler.umd.js:25211:26)

at AngularCompilerProgram._emitRender2 (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler-cli/src/transformers/program.js:336:31)

at AngularCompilerProgram.emit (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@angular/compiler-cli/src/transformers/program.js:211:25)

at AngularCompilerPlugin._emit (/srv/http/learn-javascript/app/ngtodo/ngtodo-angular-project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:1038:49)

Here is my AppModule file code: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TodoViewComponent } from './todo-view/todo-view.component';
import { ImportantTodoViewComponent } from './important-todo-view/important-todo-view.component';
import { NewTodoComponent } from './new-todo/new-todo.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MessageComponent } from './message/message.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { NormalTodoViewComponent } from './normal-todo-view/normal-todo-view.component';
import { HiddenTodoViewComponent } from './hidden-todo-view/hidden-todo-view.component';
import { EditTodoComponent } from './edit-todo/edit-todo.component';
import { ActionsComponent } from './actions/actions.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    TodoViewComponent,
    ImportantTodoViewComponent,
    NewTodoComponent,
    MessageComponent,
    NormalTodoViewComponent,
    HiddenTodoViewComponent,
    EditTodoComponent,
    ActionsComponent,
    AboutComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFontAwesomeModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Following is todo-date-service.ts

import { TodoDate } from './TodoDate';
import { Injectable } from '@angular/core';

const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];


@Injectable({
    providedIn: 'root'
})

export class TodoDateService {
private date: Date;

constructor(date: string = null) {
  if (date) {
    this.date = new Date(date);
  } else {
    this.date = new Date();
  }
}

getDate() {
  const date = String(this.date.getDate());
  const month = months[this.date.getMonth()];
  const year = String(this.date.getFullYear());
  let hour = String(this.date.getHours());
  let meridiem: string;
  let minutes = String(this.date.getMinutes());

  if (Number(minutes) < 10) {
    minutes = `0${minutes}`;
  }

  if (Number(hour) <= 11) {
    if (Number(hour) === 0) {
      hour = '12';
    }

    if (Number(hour) < 10) {
      hour = `0${hour}`;
    }

    meridiem = 'AM';
  } else {
    if (Number(hour) !== 12) {
      hour = String(24 - Number(hour));
    }

    if (Number(hour) < 10) {
      hour = `0${hour}`;
    }
    meridiem = 'PM';
  }

  const todoDate: TodoDate = {
    dateString: `${date} ${month}, ${year}`,
    timeString: `${hour}:${minutes} ${meridiem}`
  };

  return todoDate;
}

getUnixTime() {
  return this.date.getTime();
}
}

Only AppModule is not enough here. Could you provide whole your code? As a StackBlitz example — Sergey Mell, Aug 29 '19 at 22:07
@SergeyMell please specify what kind of code you're asking? any particular file? Since I have not idea from where this error rose, so I cannot suspect any particular file. I checked each any every .ts file but nowhere saw such problem. — Ahmad Raza, Aug 29 '19 at 22:11
I can't tell you for sure. It seems you have an issue with AOT compiler, but it's hard to say where it exactly is. If your project is big enough just try to switch off parts of the project in order to localize the error. — Sergey Mell, Aug 29 '19 at 22:14
@SergeyMell one thing I was warned about and relative file added! Please review question. Maybe there something happend bad. (Linter checked all files and gave no error again) — Ahmad Raza, Aug 29 '19 at 22:32

Sergey Mell · Accepted Answer · 2019-08-29T22:45:09.967

1

Your todo-date-service.ts constructor is definitely incorrect:

constructor(date: string = null) {
  if (date) {
    this.date = new Date(date);
  } else {
    this.date = new Date();
  }
}

As long as it's marked as injectable service, Angular will try to find the appropriate service to inject into it. However, you're expecting a primitive there, which is not correct. Please, read about Angular Dependency Injection.

edited Aug 29 '19 at 22:45

answered Aug 29 '19 at 22:40

Sergey Mell

7,780
1
26
50

Yeah, that caused problem, I made it non-injectable and that worked. Thanks – Ahmad Raza Aug 29 '19 at 22:45

Angular Internel Error when building using `ng build --prod'

1 Answers1