W jaki sposób mogę zaimportować @ typy/trzy w angleular2

Question

Po kilku godzinach wyszukiwania i testu. W końcu się poddałem. Używam Angular2 z webpacka, staram się używać three.js w mojej aplikacji angular2. Mam zainstalowany pakiet npm @ typ/trzy

sudo npm install @types/three --save 

A ja edytowany moje tsconfig.json na wiele sposobów. Próbowałem nawet dodać import "trzy/trzy" w moich polyfills.browser.ts. Ale ciągle dostaję błąd modułu con't resolve. Może coś jest nie tak z moim tsconfig.json następująco

{ 
    "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 
    } 
} 

i próbowałem przynajmniej następującą składnię w moim Komponentu

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

Właściwie ja naprawdę nie rozumiem, jak te wszystkie tsconfig, webpackconfig działa, więc gdy próbuję zaimplementować ten @ typy/moduł, nie mam pojęcia, co robię. Każda pomoc będzie doceniona, dzięki!

Answer 1

Należy również zainstalować pakiet three.js.

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

Składnik testowania:

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 mapa w systemjs.config.js

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