angular2 Error: Cannot find module "."

[wuzhouyang]

Just use it in angular 2.2.3 and webpack. And it throwError: Cannot find module "."

[wuzhouyang]

so many errors likes

[inorganik]

you must include countUp.js as well... is it included? @vigie is this anything you an help with?

[vigie]

@wuzhouyang Can you confirm the version of countup.js you are using and also that you are separately including the countup.js file as an external global dependency, as documented in the README?

[TobiasFeld]

Same here :(

[inorganik]

@vigie ^^^ Might need to remove angular 2 support unless this can be fixed.

[TobiasFeld]

Hi maybe this is more information for you, it looks like this is a webpack issue. Webpack log:

WARNING in ./~/countup.js/dist/countUp.module.js 15:24 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[inorganik]

Is anyone able to fix? If so please submit a PR - else I might have to pull angular 2 support :(

[szykov]

I use webpack and before bootstrapping I included this:

import 'countup.js/countUp.js';

Then in a module I added this:

import { CountUpModule } from 'countup.js/countUp.module'; ...

@NgModule({
    imports: [..., CountUpModule],
    ...
})

Error disappeard but now another one appeard:

EXCEPTION: Error in ./AboutComponent class AboutComponent - inline template:81:83 caused by: CountUp is not defined

It imports CountUp.js but not in a global scope :\

update:

providePlugin is plugin for webpack making avaialable variables globally. Also I noticed that during webpack compilation tslint loader raises some errors:

> ERROR in ./~/countup.js/countUp.module.ts
> (11,13): error TS7005: Variable 'CountUp' implicitly has an 'any' type.
> ERROR in ./~/countup.js/countUp.module.ts
> (91,4): error TS7008: Member '_countUp' implicitly has an 'any' type.
> ERROR in ./~/countup.js/countUp.module.ts
> (95,27): error TS7006: Parameter 'sta' implicitly has an 'any' type.
> ERROR in ./~/countup.js/countUp.module.ts
> (95,32): error TS7006: Parameter 'end' implicitly has an 'any' type.
> ERROR in ./~/countup.js/countUp.module.ts
> (95,37): error TS7006: Parameter 'dec' implicitly has an 'any' type.
> ERROR in ./~/countup.js/countUp.module.ts
> (95,42): error TS7006: Parameter 'dur' implicitly has an 'any' type.

[vigie]

I use webpack and before bootstrapping I included this: import 'countup.js/countUp.js'; Then in a module I added this: import { CountUpModule } from 'countup.js/countUp.module';

Yes, this is exactly how the README instructs the usage, except you should include the transpiled file from the dist/ folder and not the typescript source. I think this should fix the tslint errors also.

providePlugin is plugin for webpack making avaialable variables globally

@szykov Can you confirm you have this working now in a webpack environment? Could you perhaps share how you configured the above plugin to solve the problem?

[szykov]

@vigie I can't tell for sure but when I tried how you suggested I most probably had the same issue as people above. Anyway, I believe I need to try it on a clean fresh project with webpack when I will have a time. And in fact I wasn't feeling right about making countUp.js available globally, at least that I use angular with a lazy loading, so I stopped trying for now.

[hameltomor]

Guys, who knows how fix it?

[inorganik]

pinging @vigie can you please make sure this is resolved?

[inorganik]

@vigie please check this

[vigie]

@inorganik It's not clear to me if there is any issue here, as per my last comment.

As documented in the README, you must make sure the Countup object is available to your application as a global.

This needs to be the case irrespective of how you bundle or load modules. The Angular directive is a simple wrapper around the core technology, which happens to be a javascript global.

I have never used webpack, but according to @szykov's comment there is a plugin for webpack called ProvidePlugin that is able to provide globals. People using webpack should try using that, or similar.

I will try to find time to personally verify the webpack scenario, hopefully by this weekend.

In the meantime I would recommend closing this issue, unless @szykov or @hameltomor have experienced any errors when following the instructions? I have been using this directive for a while now and never encountered any issues.

[inorganik]

Thanks very much @vigie. Closing.

[JWesorick]

I'm still having this issue with a fresh Angular 4 app. I've included the CountUpModule in my app.

...
import { ClaimModule } from './claim/claim.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...
    CountUpModule
  ],
...
})

export class AppModule {}

And I've added

import 'countup.js/dist/countUp';
import 'countup.js/dist/angular-countUp';

to polyfills.ts. And the error in the console:

countUp.module.js:15 Uncaught Error: Cannot find module "."
    at webpackMissingModule (countUp.module.js:15)
    at webpackJsonp.../../../../countup.js/dist/countUp.module.js.Object.defineProperty.value (countUp.module.js:15)
    at Object.../../../../countup.js/dist/countUp.module.js (countUp.module.js:21)
    at __webpack_require__ (bootstrap bde483c5bce87e16b45c:54)
    at Object.../../../../../src/app/app.module.ts (app.config.ts:5)
    at __webpack_require__ (bootstrap bde483c5bce87e16b45c:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap bde483c5bce87e16b45c:54)
    at Object.2 (main.bundle.js:3825)
    at __webpack_require__ (bootstrap bde483c5bce87e16b45c:54)
webpackMissingModule @ countUp.module.js:15
webpackJsonp.../../../../countup.js/dist/countUp.module.js.Object.defineProperty.value @ countUp.module.js:15
../../../../countup.js/dist/countUp.module.js @ countUp.module.js:21
__webpack_require__ @ bootstrap bde483c5bce87e16b45c:54
../../../../../src/app/app.module.ts @ app.config.ts:5
__webpack_require__ @ bootstrap bde483c5bce87e16b45c:54
../../../../../src/main.ts @ environment.ts:8
__webpack_require__ @ bootstrap bde483c5bce87e16b45c:54
2 @ main.bundle.js:3825
__webpack_require__ @ bootstrap bde483c5bce87e16b45c:54
webpackJsonpCallback @ bootstrap bde483c5bce87e16b45c:25
(anonymous) @ main.bundle.js:1
client?ffdb:41 [WDS] Warnings while compiling.
client?ffdb:106 ./~/countup.js/dist/countUp.module.js
15:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[tskweres]

same issue as @JWesorick

[inorganik]

@JWesorick and @tskweres - in your console, when you type CountUp, is it defined? Per @vigie, you need to make sure that CountUp is a global.

Unfortunately I stopped working with Angular on 1.x, so I can't help much, but certainly try some debugging and report back.

[tskweres]

I just ignored the Angular2x module and use CountUp directly:

import * as CountUp from 'countup.js/dist/countUp';

then using pure CountUp works just fine

[dolapci]

If you working in vscode and import plugins automatically (like Ctrl+.), sometimes it will generate import { Some } from "." .It occurs if you import modules to current file from file which in same directory. Because of that if you find this unrelevant import, you can fix it.