5

角度のあるプロジェクトの一部を typescript に移行し、内部モジュール/名前空間に問題があることを検討しています。

この作業例を 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);

例Ctrl.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?

そして、次のように使用します。

これにより、gulp バンドル タスクを実行して正しくコンパイルされますが、ブラウザでエラーが発生します /// ///

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

1 に答える 1

2

typescript のドキュメントによると、commonjs にコンパイルするときに内部モジュールを使用する必要はありません。述べたように：

TypeScript の外部モジュールの重要な機能は、2 つの異なる外部モジュールが同じスコープに名前を提供しないことです。外部モジュールのコンシューマーが割り当てる名前を決定するため、エクスポートされたシンボルを名前空間に事前にラップする必要はありません。

commonjs ローダー (私は browserify を使用しています) で typescript を使用する最良の方法は、次のようなことです。

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

そうは言っても、 AngularUでのJohn Papaの講演の録画を見ました。そこでは、インポートなしでtypescriptで記述されたsystemjsを使用してバンドルされたコード、内部のtsモジュールのみを示していました。サンプルコードの入手先をツイッターで尋ねたのですが、まだ返事がありません。

于 2015-06-26T20:45:31.270 に答える