Webpack cannot find module

[samalexander]

OS?

macOS Sierra (version 10.12)

Versions.

angular-cli: 1.0.0-beta.17
node: 4.4.7
os: darwin x64

Repro steps.

• ng new pixi-test
• npm install pixi.js@3.0.9 --save
• npm install @types/pixi.js --save-dev
• Copy the following code into app.component.ts (from the PixiJS examples here):

import { Component, OnInit } from '@angular/core';
import * as PIXI from 'pixi.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  renderer: any;
  bunny: PIXI.Sprite;
  stage: PIXI.Container;

  ngOnInit() {
    this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
    document.body.appendChild(this.renderer.view);

    // create the root of the scene graph
    this.stage = new PIXI.Container();

    // create a texture from an image path
    const texture = PIXI.Texture.fromImage('assets/bunny.png');

    // create a new Sprite using the texture
    this.bunny = new PIXI.Sprite(texture);

    // center the sprite's anchor point
    this.bunny.anchor.x = 0.5;
    this.bunny.anchor.y = 0.5;

    // move the sprite to the center of the screen
    this.bunny.position.x = 200;
    this.bunny.position.y = 150;

    this.stage.addChild(this.bunny);

    // start animating
    this.animate();
  }

  animate() {
      requestAnimationFrame(this.animate.bind(this));

      // just for fun, let's rotate mr rabbit a little
      this.bunny.rotation += 0.1;

      // render the container
      this.renderer.render(this.stage);
    }
}

• ng serve

The log given by the failure.

ERROR in [default] src/app/app.component.ts:2:22
Cannot find module 'pixi.js'.

Mention any other details that might be useful.

This seems to be a transient error since the example code runs correctly in the browser once webpack has finished generating the bundle.

Any help would be greatly appreciated.

[filipesilva]

Hm, it sounds like the pixi.js typings don't include the module. Try adding declare module 'pixi.js'; to src/typings.d.ts.

[samalexander]

This causes it to complain about the classes in the module, rather than the module itself.

ERROR in [default] src/app/app.component.ts:11:14                   
Module ''pixi.js'' has no exported member 'Sprite'.                                                             

ERROR in [default] src/app/app.component.ts:12:14                   
Module ''pixi.js'' has no exported member 'Container'.

From what I can see here, they do appear to be declaring the module in their typings. Appreciate the help.

[GeorgeA93]

@samalexander Im pretty sure the @npm/types for pixi are different to the types you linked.

As i understand it, the @types package on npm pulls mainly from DefinitelyTyped, so people running npm install -s @types/pixi.js will get the version on DefinitelyTyped, and not the one from this repository.

This was taken from pixijs-userland/pixi-typescript#72 (comment)

Just from a quick look at the source, the npm version declares a class and the pixi-typescript version declares a module.

[samalexander]

@GeorgeA93 well spotted, hadn't realised the @types typings weren't the same as those in the PixiJS repo. Manually including the typings file and referencing in src/typings.d.ts file resolves the issue.

Closing since this is not an issue with the angular-cli.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}