cannot determine the module for component angular

问题:

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 ?

回答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 renamed the folder to user (with u lower case) in my import statement also, it worked for me.

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

So check the case sensitivity, of your import path.

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

回答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.

回答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.

回答5:

Ran into this issue and wanted to consolidate suggestions, and make some new suggestions (see the last numbered bullet for my suggestions):

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.
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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 and elsewhere, including this github issue

8. 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... after I addressed different issues I was facing... 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 the problem, you have a hint 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

回答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.

回答7:

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

回答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.

回答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.

回答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.

回答11:

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

回答12:

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