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.}