Как использовать SystemJS для группировки угловых типов с внутренними модулями

Question

Мы рассматриваем возможность перемещения некоторых наших угловых проектов на машинопись и некоторые проблемы с внутренним модулем/пространствами имен.

Мы вывесил этот рабочий пример на GitHub: https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

шаги:

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

Это суть применения: 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

/// <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

/// <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; 
    } 
} 

Как уже говорилось, это работает все хорошо. Но мы предпочитаем иметь все под пространством имен как это:

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

, а затем использовать его как это:

будет скомпилированы правильно выполнив задачу глотка пучка, но дает ошибку в браузере /// ///

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); 

ошибка браузера:

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 вам не нужно использовать внутренние модули при компиляции в commonjs. Как сказано:

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.

Я нашел лучший способ использовать машинопись с CommonJS погрузчиком (я использую browserify) должен сделать что-то вроде:

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

    constructor() { 

    } 

    public name:string; 
    public text:string; 

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

export = ExampleTwoCtrl 

а использовать его как:

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

Это, как говорится, я наблюдал за записью от John Papa's talk at AngularU, где они продемонстрировали некоторый код, связанный с использованием systemjs, написанных на машинописном тексте без каких-либо импортов, только внутренние ts-модули. Я спросил в twitter, где я мог найти образец кода, но пока не получил ответа.