How can I import @ types / three into angular2

Question

After hours of searching and testing. Finally, I give up. I am using Angular2 with webpack, I am trying to use three.js in my Angular2 application. I installed the npm @ type / three package

sudo npm install @types/three --save 

And I edited my tsconfig.json in several ways. I even tried adding three / three imports to my polyfills.browser.ts file. But I keep getting module errors. Maybe something is wrong with my tsconfig.json, as shown below.

  { "compilerOptions": { "module": "commonjs", "target": "es5", "outDir": "dist", "rootDir": ".", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "moduleResolution": "node", "typeRoots": [ "./node_modules/@types" ], "types": [ "core-js", "node", "three" ] }, "exclude": [ "node_modules" ], "awesomeTypescriptLoaderOptions": { "useWebpackText": true }, "compileOnSave": false, "buildOnSave": false, "atom": { "rewriteTsconfig": false } } 

and I tried at least the following syntax in my Component

 import {THREE} from "@types/three"; import {THREE} from "three"; import "@types/three"; import "three"; import * as _ from "@types/three"; import * as _ from "three"; 

Actually, I don’t quite understand how all these tsconfig, webpackconfig work, so when I try to implement this type / module, I have no idea what I'm doing. Any help would be appreciated, thanks!

Answer 1

You also need to install the three.js package.

 npm install three --save npm install @types/three --save 

Testing Component:

 import { Component, AfterViewInit } from '@angular/core'; import * as THREE from 'three'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent implements AfterViewInit { name = 'Angular'; scene: any; camera: any; renderer: any; geometry: any; material: any; mesh: any; ngAfterViewInit() { this.init(); this.animate(); } init() { this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); this.camera.position.z = 1000; this.geometry = new THREE.BoxGeometry(200, 200, 200); this.material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); this.mesh = new THREE.Mesh(this.geometry, this.material); this.scene.add(this.mesh); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(this.renderer.domElement); } animate() { requestAnimationFrame(this.animate); this.mesh.rotation.x += 0.01; this.mesh.rotation.y += 0.02; this.renderer.render(this.scene, this.camera); } } 

add map to systemjs.config.js

 'three': 'npm:/three/build/three.min.js',