AndrewPoyntz / time-ago-pipe

An Angular pipe for converting a date string into a time ago
MIT License
130 stars 67 forks source link

Error during --prod --aot build #11

Closed Halynsky closed 6 years ago

Halynsky commented 6 years ago

Hello. I get error when I build as --prod --aot with angular cli. Here is console output.

ERROR in Error: Cannot determine the module for class TimeAgoPipe in D:/WorkSpace/improver/browser/node_modules/time-ago-pipe/time-ago-pipe.ts! Add TimeAgoPipe to the NgModule to fix it. at syntaxError (D:\WorkSpace\improver\browser\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) at analyzeAndValidateNgModules (D:\WorkSpace\improver\browser\node_modules\@angular\compiler\bundles\compiler.umd.js:24306:15) at AotCompiler.analyzeModulesAsync (D:\WorkSpace\improver\browser\node_modules\@angular\compiler\bundles\compiler.umd.js:23937:46) at CodeGenerator.codegen (D:\WorkSpace\improver\browser\node_modules\@angular\compiler-cli\src\codegen.js:32:14) at Function.NgTools_InternalApi_NG_2.codeGen (D:\WorkSpace\improver\browser\node_modules\@angular\compiler-cli\src\ngtools_api.js:73:30) at _donePromise.Promise.resolve.then (D:\WorkSpace\improver\browser\node_modules\@ngtools\webpack\src\plugin.js:386:44) at at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

AndrewPoyntz commented 6 years ago

From the first line in that error log, it looks like you're just not declaring the pipe in your ngModule

@NgModule({
    imports: [... etc ...],
    declarations: [AppComponent, ...etc..., TimeAgoPipe],
    bootstrap: [AppComponent]
 })`
Halynsky commented 6 years ago

Hello, thank you for response. I did it. I have Module for all pipes in my app.

@NgModule({
  imports: [],
  declarations: [
    FilterByPipe,
    ToClassNamePipe,
    StatusToString,
    TimeAgoPipe,
    CutArrayLengthPipe,
    ForJsonPipe
  ],
  exports: [
    FilterByPipe,
    ToClassNamePipe,
    StatusToString,
    TimeAgoPipe,
    CutArrayLengthPipe,
    ForJsonPipe
  ]
})

export class PipesModule { }
Halynsky commented 6 years ago

Here is one more error when I am trying to use time-ago-pipe in angular universal app

ERROR in ./node_modules/time-ago-pipe/time-ago-pipe.ts
Module build failed: Error: Typescript emitted no output for D:\WorkSpace\improver\browser\node_modules\time-ago-pipe\time-ago-pipe.ts.
You should not need to recompile .ts files in node_modules.
Please contact the package author to advise them to use --declaration --outDir.
More https://github.com/Microsoft/TypeScript/issues/12358
    at successLoader (D:\WorkSpace\improver\browser\node_modules\ts-loader\dist\index.js:47:15)
    at Object.loader (D:\WorkSpace\improver\browser\node_modules\ts-loader\dist\index.js:29:12)
 @ ./dist/server/main.bundle.js 1:10294784-10294822
 @ ./server.ts

Please contact the package author to advise them to use --declaration --outDir. More https://github.com/Microsoft/TypeScript/issues/12358

fthkrtl commented 6 years ago

i have the same issue

arknotts commented 6 years ago

Anyone ever get this working? Ironically, I'm the one who submitted the PR to address this issue back in February (https://github.com/AndrewPoyntz/time-ago-pipe/pull/4). Now that I've upgraded Angular in my project (to 5.1.2) it's appearing again.

DuanTranHuy commented 6 years ago

I have same issue

melonormajm commented 6 years ago

You can add TimeAgoPipeModule to imports

vickychauhanbss commented 6 years ago

Hello. I get error when I build as --prod --aot with angular cli. Here is console output.

ERROR in Error: Cannot determine the module for class TimeAgoPipe in D:/WorkSpace/improver/browser/node_modules/time-ago-pipe/time-ago-pipe.ts! Add TimeAgoPipe to the NgModule to fix it. at syntaxError (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34) at analyzeAndValidateNgModules (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:24306:15) at AotCompiler.analyzeModulesAsync (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:23937:46) at CodeGenerator.codegen (D:\WorkSpace\improver\browser\node_modules@angular\compiler-cli\src\codegen.js:32:14) at Function.NgTools_InternalApi_NG_2.codeGen (D:\WorkSpace\improver\browser\node_modules@angular\compiler-cli\src\ngtools_api.js:73:30) at _donePromise.Promise.resolve.then (D:\WorkSpace\improver\browser\node_modules@ngtools\webpack\src\plugin.js:386:44) at at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile in ionic 2.TIA

NickToony commented 6 years ago

Also experiencing this problem on latest Angular, even though declaring the pipe in my module (as directed).

As a (very lazy) workaround, I took the contents of this file: https://raw.githubusercontent.com/AndrewPoyntz/time-ago-pipe/master/time-ago-pipe.ts and put it inside a file within my project. Then I imported it and declared as you normally would.

It works, but it feels dirty..

dfederm commented 6 years ago

I also ran into this. The mitigation for me was to use 'time-ago-pipe/index' everywhere instead of 'time-ago-pipe'.

So in my app.module.ts:

import { TimeAgoPipeModule } from "time-ago-pipe/index";

@NgModule({
  imports:
    [
      // ...
      TimeAgoPipeModule,
    ],
// ...

And then in unit tests where I need the TimeAgoPipe type, I just import it like:

import { TimeAgoPipe } from "time-ago-pipe/index";

The problem seems that if you import from "time-ago-pipe", it resolves to node_modules\time-ago-pipe\time-ago-pipe.ts instead of node_modules\time-ago-pipe\index.ts. The solution is likely to fix the "main" field in the package.json to point to index instead of time-ago-pipe.

raDiesle commented 6 years ago

I still get it on ng build prod and 1.3.2 timeago compiler.js:485 Uncaught Error: Unexpected pipe 'TimeAgoPipe' imported by the module 'AppModule'. Please add a @NgModule annotation.

AnilBhandare09 commented 5 years ago

Hello. I get error when I build as --prod --aot with angular cli.

In my app.module.ts: I import like this

import { TimeAgoPipe } from 'time-ago-pipe';

@NgModule({
  imports:
    [
      // ...
          TimeAgoPipe
    ],
// ...

Its show ERROR in No Pipe decorator found on TimeAgoPipe.