Angularjs 2打字稿進口問題（systemjs？）

我的應用程序的結構，像這樣：Angularjs 2打字稿進口問題（systemjs？）

app 
- assets 
- src 
-- autogenerated 
-- components 
---- app 
---- tabs

的「自動生成」文件夾中使用從組件文件夾相同的目錄結構包含打字稿產生編譯JavaScript文件。我使用gulp-tsc來創建它。（我最終將其重命名爲「build」）

應用程序和選項卡是組件...應用程序是頂級組件。

在app.ts（在應用/組件/應用）是：

import {Component, bootstrap} from 'angular2/angular2'; 
import {Tabs} from '../Tabs/tabs'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/components/app/app.html', 
    directives: [Tabs] 
}) 
class AppComponent { } 
bootstrap(AppComponent);

當這種編譯，生成的js文件具有這樣的：

var tabs_1 = require('../Tabs/tabs');

不解決，並且導致一個404，因爲它被瀏覽器加載時沒有.js擴展名。

編輯...剛剛意識到「require」來自nodejs，而不是systemjs ......仍然不知道如何繼續。

**編輯2 **吞氣任務：

gulp.task('compile', function() { 
    // compile sass to css 
    gulp.src('./app/assets/sass/*.scss') 
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError)) 
    .pipe(gulp.dest('./app/assets/css')); 

    // compile typescript 
    // this ignores tsconfig.json, but ideally configuration in both places should match 
    gulp.src(['./app/src/**/*.ts']) 
    .pipe(typescript({ target: "ES5", 
         experimentalDecorators: true, 
         sourceMap: true, 
         emitDecoratorMetadata: true })) 
    .pipe(gulp.dest('./app/src/autogenerated/')); 
});

吞氣的任務不應該使用tsconfig.json來......我添加它來消除視覺誤差Studio代碼....但這裏的tsconfig.json

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "commonjs", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    } 
}

index.html的代碼什麼：

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <script src="../../node_modules/systemjs/dist/system.src.js"></script> 
    <script src="../../node_modules/angular2/bundles/angular2.dev.js"></script> 
<script> 
    System.config({ 
    packages: {'app': { 
     defaultExtension: 'js'} 
     } 
    }); 
    System.import('../src/components/app/app.js'); 
</script> 
    </head> 
    <body> 
    <my-app>Loading... please wait</my-app> 
    </body> 
</html>

來源

2015-11-10 Chris Klepeis

能告訴你更多的配置？ Gulp文件爲例子？ –

我已經添加了gulp任務。它使用gulp-tsc包。 –

使用tsconfig.json，這是配置TypeScript編譯器的最佳方法，它由TypeScript團隊維護。無需一些吞嚥任務來了解什麼是打字稿。在命令行中運行'tsc'（讓gulp運行'exec'）。
如果你將你的模塊編譯成commonjs（這完全有效），你應該有一些方法來在瀏覽器中加載commonjs模塊。和SystemJS（與angular2正在使用相同）是目前最好的模塊加載器。因此，只需爲您的應用程序創建一個SystemJs配置文件並導入應用程序即可。

來源

2015-11-10 21:04:05 gilamran

我覺得我的大腦正在被所有不同的模塊加載器等（jspm，commonjs，systemjs ...）煎炸。我會根據建議去使用打字稿編譯器，而不是使用一些吞嚥包。只是要清楚......我不認爲我創建了任何模塊。我只是用npm來安裝節點模塊。 Typescript將導入語句編譯爲需要語句，我無法將其加載到瀏覽器中。一個例子會很棒......我在互聯網上找不到任何好的。我已將我的systemjs代碼從index.html添加到我的問題 –

我現在看到您已將systemjs作爲模塊加載器。現在有什麼問題？（它應該工作，據我可以看到） – gilamran

當觀看在電子的angular2應用程序，它嘗試的加載/標籤/標籤，而不是/Tabs/tabs.js。沒有js擴展它不解決。 –

安裝了TypeScript的Visual Studio將忽略您的tsconfig文件。

在你的項目下打字稿生成屬性設爲您的模塊系統，「系統」

您必須通過的PropertyGroup下將這些行手動更改項目文件：

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> 
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

來源

2015-11-19 02:21:22 Rob

Angularjs 2打字稿進口問題（systemjs？）

回答

相關問題