Angular2TypeScriptファイルとJavaScriptファイルを別々のフォルダーに分けます。

次のようなファイル構造を含むangular.ioWebサイトからの5分のクイックスタートを使用しています。

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.jsonは次のようなコードブロックです：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
} 

また、package.json：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

sourceMapをtrueからfalseに変更したので、コードエディターで、マップファイルは再度生成されませんが、jsファイルは引き続き生成されます。

tsファイルのみで作業したいのですが、jsファイルとjs.mapファイルのブランチを取得したくありません。すべてのtsファイルをアプリフォルダーやすべてのjsとjsなどの通常の開発フローダーに配置するにはどうすればよいですか。ファイルをdistというフォルダにマップしますか？

この良い例は、angular2-webpack-quickstartです。しかし、私は彼らがそれをどのように行うのか理解していませんでしたか？

もちろん、手動ではなく、それを行う方法についてのアドバイス。

ありがとう、

おそらく遅いですが、ここに2段階の解決策があります。

ステップ1

次のように更新して、system.config.jsを変更'app'し'dist/app'ます。

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

これで、次のようになります。

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

ステップ2

distフォルダーを作成します。tsconfig.jsonを

編集して、以下を追加します。

"outDir": "dist"

結果tsconfig.json：

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

実行するnpm startと、distフォルダー内のすべてのコンパイル済みファイル.jsと.map.jsファイルが表示されます。

注：他の回答を確認してください。それらは非常に有用で有益でもあります。

私の解決策は上記とは少し異なります。私はここで定義されたAngular2クイックスタートシードから始めていました：https：//github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

そして、以下のみを変更しました。

• 追加されました"outDir": "../dist"へtsconfig.json
• baseDir内部の属性をbs-config.jsonに変更しました"baseDir": ["dist", "src"]

そして、npm run start（いずれかのコピーがなくても、HTML / CSSおよびその他のファイル）以前のように動作しますが、コンパイル.jsおよび.mapファイルがに組み込まれているdist/appし、あなたの汚染はありませんsrc/appディレクトリを。

これがテストにどのように影響するかはまだテストしていないことに注意してください。

私も遅れるかもしれませんが、私はこれをしました。

まず、raheelshanが言ったことを実行します。

次に、distフォルダーを作成します。

フォルダを作成したら、ファイルに移動して次tsconfig.jsonを追加します。

"outDir": "dist"

結果として tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

あなたは今、実行する場合はnpm start、ファイルを保存すると、あなたはすべてのコンパイル済み見るべき.jsと.map.jsしてdistのフォルダ。

Thanx raheel shan、あなたの答えは有利なスタートを切りました、

@Adavoがコメントで上で正しく尋ねたように

残念ながら、私のhtml / cssファイルはdistフォルダーにありません。distフォルダー内のすべてのhtml / cssをコピーするにはどうすればよいですか？

この質問への答えは、*すべての.tsファイルおよび主に@Componentの「templateURL」プロパティで「/」（ルートディレクトリから）を使用してHTML / CSSファイルへのフルパスを提供することです。

長い時間の後-私はそれを理解しました-Gulpを使用せずに：）Yipppeee

残念ながら、私のhtml / cssファイルはdistフォルダーにありません。distフォルダー内のすべてのhtml / cssをコピーするにはどうすればよいですか？

Angular 2の相対パスは、フレームワークがAngular 2のコンポーネント相対パスの記事に従ってファイル（CommonJ、SystemJなど）をロードする方法に柔軟に対応することを望んでいるため、それほど単純ではありません。

記事で説明module.idされているように、CommonJで使用すると（tsconfig.jsonを確認してください）、モジュールの絶対ルートが含まれ、相対パスを構築するために使用できます。

したがって、より良い代替手段は、css / htmlファイルをtsファイルのままにして、ビルドファイルがdistと呼ばれる別のフォルダーにあると仮定して、以下のようにコンポーネントを構成することです。このようにして、cssファイルとhtmlファイルが派生ビルドパスをそれらを含むソースパスに変換することで相対パスを使用しても問題ありません-基本的に/dist/それを削除または名前変更し/src/ます;）

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

ソースとビルドに別々のフォルダーがある場合は、代わりにこれを行うことができます。

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

だから、これを解決するには：

残念ながら、私のhtml / cssファイルはdistフォルダーにありません。distフォルダー内のすべてのhtml / cssをコピーするにはどうすればよいですか？

@raheelshanと@Lirianerの両方の回答の手順を実行します。...それならこれで終わらせることができます。

私はnpmスクリプトを使用して私の目的のためにこれを解決しました。package.jsonファイルのスクリプトセクションは以下のとおりです。解決策は、サーバーと同時にonchnage（npmパッケージ- npm install --save onchange）を実行することtscです。次に、rsyncを使用して、移動するアセットをコピーします。

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

Windowsを使用している場合は、cwRsyncなどのパッケージソリューションrsyncを介して、Cygwinまたはそれを使用して入手できます。

@WillyCの提案を試してみましたが、魅力のように機能しました。ファイルにonchange依存関係を追加する必要があることに注意してくださいpackage.json。最初の実行時にクリーンなセットアップを行い、残りのhtml / cssファイルを削除するために少しだけ余分なスクリプトを追加しました（TSCでも同じことができればいいのですが）

とにかく、ここに私のpackage.jsonファイルのセクションがあります

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

rsync削除については、スクリプトのコマンドの--deleteフラグに注意してくださいrsyncwatchassets

Angular2TypeScriptファイルとJavaScriptファイルを別のフォルダーに

これがAngular2の最新バージョンV2.1.1の設定で、非常にうまく機能します！

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

@Nagylに触発されて、私は独自の方法を開発しました。共有する価値があると信じています。

1）cpxをインストールします

npm install cpx

2）bs-config.jsonを更新し、baseDirを「src」から「dist」に変更します

"baseDir":"dist"

3）tsconfig.jsonを更新し、compilerOptionsの最後にoutDirを追加します。

"outDir": "../dist"

4）package.jsonを更新します：4.1）スクリプトの最後に新しいコマンドを追加します：

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2）「開始」行を変更して「cpx」コマンドを含めます。

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

あなたはtranspileできる.tsと同じように、ブラウザでファイルをplunkerがそれらの角度2つのTSテンプレートでやっています。

エディタを起動し、[新規]、[AngularJS]、および2.0.x（TS）オプション（一番下）を選択するだけです。しかし、webpack（または他のバンドルツール）を使用することの全体的なポイントは、ファイルをローカルにトランスパイルすることです。

私は、上記のオプションのいくつか試して、最終的には、これは私がに落ち着いものです：ピープ-拡張のためにVisual Studio Code。

インストールする方法：

• 表示->拡張機能
• のぞき見
• インストール
• リロード
• 表示->コマンドパレット
• のぞき見なし
• 必要に応じて.vscode / settings.jsonを変更します（以下に示すもの）

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

2017年1月25日-更新： angular-cliは箱から出して、これを処理します。とインストールが動作し、今。

ここにリストされている解決策を試しました。それらは良いですが、私には理想的ではありません。簡単な解決策が欲しいです。すべてのコンポーネントファイルにパス情報をハードコーディングしたくありません。これを処理するためにこれ以上npmパッケージをインストールしたくありません。

だから私は最も簡単な代替案を考え出します。これはこの質問に対する直接の答えではありませんが、私にとっては非常にうまく機能します。

js下のファイルが表示され/appないように、ワークスペースの設定を微調整しました。彼らはまだそこにいます。それらは私のワークスペースから隠されているだけです。私にとっては、それで十分です。

私はSublimeTextを使用しているので、プロジェクト設定用に次のように設定します。

"file_exclude_patterns": ["app/*.js"]

他の多くのエディターにも同様の機能があると思います。

更新：

AngularCLIを使用するだけです。すべてが自動的に処理されます。

クイックスタートからのファイルを含むAngular4の場合、私がしなければならなかったのは次のことだけでした（前述の回答の組み合わせですが、値がわずかに異なります）：

• tsconfig.json（追加）： "outDir": "../dist"
• bs-config.json（変更）： "baseDir": ["dist", "src"],
• bs-config.e2e.json（変更）： "baseDir": ["dist", "src"],

systemjs.config.jsに変更はありません。

@raheelの提案を試してみましたが、うまくいきました。必要に応じて構造を変更しました。

私は次の構造を使用しています

これを取得するために、2つのファイル1.systemjs.config.jsと2.tsconfig.jsonのみを変更しました。

systemjs.config.jsで私はに変更しました

map: { // previously it was app: 'app', app: 'app/js', ...

tsconfig.jsonに追加する必要があります "outDir": "app/js"

私はAngular2.4を使用しています。それを機能させるには、追加の手順が必要でした。これは、index.htmlのmain.jsファイルへのsystemJs参照の更新でした。

System.import（ 'main.js'）。catch（function（err）{console.error（err）;}）;

に：

System.import（ 'dist / main.js'）。catch（function（err）{console.error（err）;}）;

raheelshanが言ったことに加えて。正しいjavascriptファイルをインポートするために、index.htmlに追加の変更を加える必要がありました。

これが私の側からの要約です。

tsconfig.json

前

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

後：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  },
  "exclude": [ 
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

systemjs.config.js

前：

'app': 'app',

後：

'app': 'dist/app', //'app

index.html

前：

System.import('main.js').catch(function(err){ console.error(err); });

後：

System.import('dist/main.js').catch(function(err){ console.error(err); });