使用System.js在TypeScript中加載模塊

我有一個Node.js &用TypeScript編寫的AngularJS應用程序，我嘗試使用System.js加載模塊。使用System.js在TypeScript中加載模塊

它工作正常，如果我只導入類來指定類型。 e.g：

import {BlogModel} from "./model" 
var model: BlogModel;

然而，當我嘗試實例變量與導入的類，我會在運行時異常。 e.g：

import {BlogModel} from "./model" 
var model: BlogModel = new BlogModel();

Uncaught ReferenceError: require is not defined

我使用CommonJS的。我無法使用AMD，因爲我有一個針對服務器端和客戶端的項目。這就是我使用System.js在客戶端加載模塊的原因。

這是我System.js定義：

<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script> 
    <script src="/assets/libs/systemjs-master/dist/system.src.js"></script> 

    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('classes.ts') 
       .then(null, console.error.bind(console)); 
     System.import('model.ts') 
       .then(null, console.error.bind(console)); 
    </script>

這是model.ts文件的內容：

import {User} from "./classes"; 
import {Post} from "./classes"; 

export class BlogModel{ 
    private _currentUser: User; 
    private _posts: Post[]; 

    get currentUser(){ 
     return this._currentUser; 
    } 

    set currentUser(value: User){ 
     this._currentUser = value; 
    } 

    get posts(){ 
     return this._posts; 
    } 

    set posts(value: Post[]){ 
     this._posts = value; 
    } 
}

這是JS線產生異常：

var model_1 = require("./model");

Uncaught ReferenceError: require is not defined

任何幫助將深表感謝！

來源

2016-05-16 Alon

我假設model.ts包含'BlogModel'的定義，你可以分享代碼，你也必須在主html頁面導入systemjs，你能分享代碼嗎？理想情況下，你不必導入所有的模塊，它會在需要的時候加載，所以System.import（'classes.ts'） .then（null，console.error.bind（console））;應該就足夠了，你也不需要ts擴展， –

@Madhu Ranjan我編輯了原始問題，並添加了model.ts的內容和System.js的腳本標記 – Alon

讓我們試着簡化事情有點：

1）配置您的systemjs如下：

System.defaultJSExtensions = true;

2）確保兩個你classes.ts和和bootstrap.ts（這是新的文件，應創建，這將引導您的應用程序）文件被轉發位於與index.html相同的目錄中（index.html應該包含腳本來配置上述的systemjs）

3）In bootstrap.ts：

import {BlogModel} from "./model" 
let model = new BlogModel(); 
console.log(model);

3）自引導與單一調用您的應用程序System.import：

System.import('bootstrap').then(null, console.error.bind(console));

嘗試這些步驟，我想你會解決你的問題。

來源

2016-06-02 10:58:48 Amid

好吧，我做到了，但現在有另一個問題：我使用很多ts文件。我使用腳本元素加載它們，所以它們在bootstrap.ts完成加載模塊之前加載，因此它們都會引發引用異常。我試圖通過將所有文件內容複製到bootstrap.ts並刪除腳本元素來臨時解決它。但是，我仍然得到一個例外，因爲我使用角。js，它試圖找到在html元素的ng-app屬性中聲明的模塊。順便說一句，如果我把腳本元素放在我配置System.js的腳本元素下面，這沒有幫助。 – Alon

刪除除systemjs之外的所有腳本元素。所有的加載都將由模塊加載器（systemjs）根據從引導模塊開始的import語句來完成（在你的情況下它是bootstrap.ts）。這就是TS/JS中的所有模塊。 – Amid

但是我該怎麼處理像angular.js這樣的第三方庫？ TypeScript編譯器說：「TS2306：'angular-1.4.7'不是一個模塊」。 – Alon

使用System.js在TypeScript中加載模塊

回答

相關問題