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