İç modüller ile açısal TypeScript'i paketlemek için SystemJS nasıl kullanılır

Question

Açısal projelerimizden bazılarını yazı tiplerine taşıma ve iç modül/ad alanlarıyla ilgili sorun yaşama geçirmeyi düşünüyoruz. index.ts

/// <reference path="../typings/tsd.d.ts" /> 
/// <reference path="../typings/typescriptApp.d.ts" /> 

import * as angular from 'angular'; 

import {ExampleCtrl} from './controllers/ExampleCtrl'; 
import {ExampleTwoCtrl} from './controllers/ExampleTwoCtrl'; 

export var app = angular.module("myApp", []); 

app.controller("ExampleCtrl", ExampleCtrl); 
app.controller("ExampleTwoCtrl", ExampleTwoCtrl); 

ExampleCtrl.ts

: Bu uygulamanın özü olup

npm install jspm -g 
npm install 
cd src/ 
jspm install 
jspm install --dev 
cd .. 
gulp bundle 
cd src/ 
python -m SimpleHTTPServer 

: https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

adımlar:

Biz github bu çalışma örneği yayınlanmıştır

/// <reference path="../../typings/tsd.d.ts" /> 
/// <reference path="../../typings/typescriptApp.d.ts" /> 


export class ExampleCtrl { 
    public static $inject:Array<string> = []; 

    constructor() { 

    } 

    public name:string; 
    public hello_world:string; 

    public say_hello() { 
     console.log('greeting'); 

     this.hello_world = "Hello, " + this.name + "!"; 
    } 
} 

ExampleTwoCtrl.ts

belirtildiği gibi

/// <reference path="../../typings/tsd.d.ts" /> 
/// <reference path="../../typings/typescriptApp.d.ts" /> 

export class ExampleTwoCtrl { 
    public static $inject:Array<string> = []; 

    constructor() { 

    } 

    public name:string; 
    public text:string; 

    public second() { 
     this.text = "ExampleTwoCtrl: " + this.name; 
    } 
} 

, bunların hepsi iyi ve güzel çalışıyor. //

Bu doğru derlemek yudum demeti görevi çalıştıran ancak tarayıcıda bir hata verecektir: Ama biz doğrusu böyle bir ad altında her şeyi olurdu:

module myApp.controllers { 
    export class ExampleController { 
     ... 
    } 
} 
//do we need to export something here? 

ve sonra bu gibi kullanmak/ ///

import * as angular from 'angular'; 

import ExampleCtrl = myApp.controllers.ExampleCtrl; 
import ExampleTwoCtrl = myApp.controllers.ExampleTwoCtrl; 

export var app = angular.module("myApp", []); 

app.controller("ExampleCtrl", ExampleCtrl); 
app.controller("ExampleTwoCtrl", ExampleTwoCtrl); 

tarayıcı hatası:

Uncaught ReferenceError: myApp is not defined(anonymous function) @ build.js:5u @ build.js:1i @ build.js:1c @ build.js:1(anonymous function) @ build.js:1(anonymous function) @ build.js:1 
build.js:1 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp 
    at http://localhost:8000/build/build.js:1:4007 
    at http://localhost:8000/build/build.js:1:12353 
    at e (http://localhost:8000/build/build.js:1:11925) 
    at t.register.e (http://localhost:8000/build/build.js:1:12237) 
    at http://localhost:8000/build/build.js:1:20741 
    at o (http://localhost:8000/build/build.js:1:4392) 
    at p (http://localhost:8000/build/build.js:1:20519) 
    at Bt (http://localhost:8000/build/build.js:1:22209) 
    at t.register.s (http://localhost:8000/build/build.js:1:10038) 
    at Q (http://localhost:8000/build/build.js:1:10348) 
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…0%20at%20Q%20(http%3A%2F%2Flocalhost%3A8000%2Fbuild%2Fbuild.js%3A1%3A10348) 

Answer 1

typescript documentation'a göre, commonjs derlerken dahili modülleri kullanmanız gerekmez. Belirtildiği gibi: hoşuna

class ExampleTwoCtrl { 
    public static $inject:Array<string> = []; 

    constructor() { 

    } 

    public name:string; 
    public text:string; 

    public second() { 
     this.text = "ExampleTwoCtrl: " + this.name; 
    } 
} 

export = ExampleTwoCtrl 

ve kullanım:

A key feature of external modules in TypeScript is that two different external modules will never contribute names to the same scope. Because the consumer of an external module decides what name to assign it, there's no need to proactively wrap up the exported symbols in a namespace.

ben böyle bir şey yapmak bir commonjs yükleyici (I browserify kullanıyorum) ile typescript kullanmak en iyi yolu bulduk

import MyController = require('./ExampleTwoCtrl'); 
var a = new MyController(); 

Bu, John Papa's talk at AngularU kayıttan izledim, burada herhangi bir ithalat olmaksızın, yalnızca dahili ts modülleriyle birlikte yazılan systemjs kullanılarak bir grup kodun bir araya getirildiğini izledim. Örnek kodu bulabildiğim Twitter'da sordum, ancak henüz bir yanıt almadım.