Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

cannot determine the module for component angular 5

I'm getting following error when I build the Angular app using "ng build --prod". This is working when I build with Angular 4 and getting error with Angular 5. With Angular 5 "ng serve" is working perfectly.

ERROR in Error: Cannot determine the module for class TimeAgoPipe in mypath/node_modules/time-ago-pipe/time-ago-pipe.ts! Add TimeAgoPipe to the NgModule to fix it.

Getting error for https://www.npmjs.com/package/time-ago-pipe

Any solutions ?

like image 238
user2609021 Avatar asked Nov 05 '17 07:11

user2609021


4 Answers

Check Case Sensitivity

import { MyComponent } from "./User/my-component";

In my case, the problem was that the folder user was created with U as capital in my import statement. But actually, on disk, it was in small-case. When I changed the pathname to user (with u lower case) in my import statement, it worked for me.

import { MyComponent } from "./user/my-component";

So check the case sensitivity, of your import path.

like image 164
Anand Murali Avatar answered Oct 22 '22 21:10

Anand Murali


Angular 5 and specifically angular cli 1.5 has default ahead of time compilation turned on and it needs to know module for all components/pipes etc. that it finds in your project folder if you have some components that aren't declared in any module it will throw errors.

You can either declare TimeAgoPipe in some module:

@NgModule({
  declarations: [TimeAgoPipe, ...]
})
export class AppModule {}// for example can be any other used module

or try running build without ahead of time compilation resulting code will work slower

ng build --prod --aot=false

third way if you don't use that pipe at all you can add it to excluded files in tsconfig.json

{
  ...
  "exclude": [ "path/to/unused/component.ts", ... ]
}
like image 30
Xesenix Avatar answered Oct 22 '22 20:10

Xesenix


In my case, the error was because of multiple definitions of the same class in various files. This happened due to copy-paste codes by some developer.

like image 13
aCiD Avatar answered Oct 22 '22 20:10

aCiD


I had exactly the same issue and can offer a workaround although not sure why this specific pipe is not being successfully picked up by the aot build:

Workaround

Copy the time-ago-pipe.ts from node_modules/time-ago-pipe and just copy this file into your own project.

Add it to your declarations in your module as normal and import this into your imports e.g:

import { TimeAgoPipe } from './_pipes/time-ago-pipe';

This will then compile successfully in AOT build and you can still use the pipe.

like image 6
James c Avatar answered Oct 22 '22 20:10

James c