angularjs – 如何使用SystemJS将角度TypeScript与内部模块捆绑

发布时间：2020-12-17 07:13:55 所属栏目：安全来源：网络整理

导读：我们正在考虑将一些角度项目移到打字稿上,并在内部模块/命名空间方面遇到一些麻烦. 我们在github：https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp上发布了这个工作示例脚步： npm install jspm -gnpm installcd src/jspm installjspm ins

我们正在考虑将一些角度项目移到打字稿上,并在内部模块/命名空间方面遇到一些麻烦.

我们在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?

然后像这样使用它：

这将正确编译运行gulp bundle任务,但在浏览器中出错
????///
????///

import * as angular from 'angular';

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

export var app = angular.module("myApp",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)

解决方法

根据 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)使用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();

话虽这么说,我观看了John Papa’s talk at AngularU的录音,他们演示了一些代码捆绑使用systemjs编写的typescript,没有任何导入,只有内部ts模块.我在twitter上问我哪里可以找到示例代码,但还没有得到回复.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!