angularangular-cli-v8

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


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();
}
}

Solution

  • 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.