cannot determine the module for component angular 5

Question

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 ?

Answer 1

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.

Answer 2

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", ... ]
}

Answer 3

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.

Answer 4

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.

Answer 5

Ran into this issue and wanted to consolidate existing suggestions, and suggest some general strategies when nothing else worked for me:

1. In my case, the error was it could not determine the module for a Pipe; I was using custom Pipe injected straight into an Angular Service.

• When I stopped using the Pipe, the issue went away; so I removed the Pipe transform -- I moved the transformation to a different Service, stopped depending on Pipe altogether.

1. Make sure you declared (and exported), your Pipe/Component properly in the declarations (and exports) properties of your NgModule
   • Source: Angular best practice, NgModule basics
2. If it is a 3rd party Pipe/Component (i.e. inside node_modules), copy the Pipe to your own project (if possible), and/or re-export the Pipe from one of your NgModule
   • Source: the accepted answer here
3. If you don't need the Pipe/Component, you can exclude the file by adding to the exclude property of the tsconfig.json (this may not be an option for everyone)
   • Source: also accepted answer
4. Or build without ahead-of-time compilation ng build --aot=false (may be a faster build, but then creates a non-optimized app; learn more about AOT)
   • Source: Again the accepted answer
5. If it is your Pipe/Component (vs 3rd party), confirm you don't double-define your Pipe class, and don't double-declare your Pipe: i.e. add to the declaratations array of two or more different NgModules
   • Source: Another answer here
6. In your Angular typescript files where you import { YourPipe } from './yoUr-pippe.ts', make sure there are no typos or capitalization issues in your import statement, especially the filename
   • (my example here './yoUr-pippe.ts' has a capitalization issue, and a typo, and shouldn't use the ts file extension (that's implied in Typescript))
   • Source: Another answer here, here, and here, including this github issue
7. In my case, the above didn't fix my problems. I did many of the steps below, eventually the problem stopped. I'm not sure which one did the trick:

   • Ensure any ts file which uses the problematic Pipe/Component, lives in an NgModule which imports the NgModule that defined the Pipe/Component!

     • For example if AModule, defines AComponent, which uses BPipe, defined in BModule, then AModule must import the BModule
       • In my case, I re-arranged my NgModule dependency tree. I used a "shared module" pattern so my Pipe could be re-used in multiple places.

   • Ensure there are no circular NgModule dependencies, like in these examples

   • If you are able, Upgrade NodeJS itself and/or angular and its tools (angular-cli, etc)

     • I ran into unrelated issues, so I found this list of suggestions... but these suggestions fixed other issues, and let me re-approach the Cannot determine the module... issue (which stopped happening!)

   • Be careful about using index.ts files aka "barrel files", and the order of exports

     • (This suggestion may help with index.ts file issues)

   • A general problem-solving approach : Remove / comment-out any references to the problematic file,

     • Remove the references one-at-a-time, from each file, until your angular app build works. If removing from a specific file solves the problem, you know which file is the source of the problem
     • If you remove the references from all files (which may be too hard to do; for me it was not too many/ not too hard); then your angular app should build...
     • Confirm your angular app still builds. In my case, my angular build had unrelated errors which I could easily fix (for example, Can't bind to '___' since it isn't a known property of '___', or Property '___' does not exist on type '___'. Did you mean '____', or Expected 0 arguments, but got 1.)
     • After fixing any other problems, you can uncomment your code gradually, while ensuring your ng build works. When I uncommented/added all my code back... my ng build no longer had the Cannot determine the module... issue

Answer 6

For me it didn't work even when component was there in declarations. So, I removed the component from declarations and from imports as well. And then I readded it by using Visual Studio code intellisense to auto complete component name in declarations and using auto import to import component at the top of the module file. And to my surprise it worked.

If any of the above solutions didn't work for you, then this is also worth trying.

Answer 7

1. Import specific component.
2. Add component to @NgModule.

Answer 8

for me, the problem was in case sensitive in import paths. but you must find all imports path that have problem. not only import that used in your module.

Answer 9

In my case, I had a pipe declared as their own class in mypipe.ts as well as in app.component.ts for some reason. I remove the one in app.component and it compiled fine.

In the error message, check where exactly it is complaining and see if that is double code in your project.

Answer 10

I also faced same error only on prod build but not on dev build. I imported component.ts file in app.module.ts but didn't used in NgModule. So I removed the import, it worked fine.

Answer 11

In my case, there were two components what are named same. I removed one of them and it's fixed.

Answer 12

Normally this error occurred when you created a component but not imported it to any module.

Answer 13

Make sure you import your component in @NgModule.

Answer 14

I was facing the same error on production build also, with a my class ToastComponent. I've ended up with not exporting the class (ToastComponent) and use it like so:

class ToastComponent extends Toast {
  options: ToastIndividualConfig;
}

interface ToastIndividualConfig extends IndividualConfig {
  template: TemplateRef<any>;
  type: string;
}
@Component({
  selector: 'template-toast-component',
  templateUrl: './template-toast.component.html',
  styleUrls: ['./template-toast.component.scss'],
})
export class TemplateToastComponent extends ToastComponent {