web-dev-qa-db-ja.com

Angular2 TypeScriptファイルとJavaScriptファイルを異なるフォルダーに分離します。「dist」

私は、angular.io Webサイトの 5 min quickstart を使用していますが、これには次のようなファイル構造が含まれています。

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 です。しかし、私は彼らがそれをどのように行うのか分かりませんでしたか？

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

おかげで、

javascriptjsonangular
81
Xinrui Ma

おそらく遅いですが、ここに2段階のソリューションがあります。

ステップ1

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

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を実行すると、コンパイルされたすべての.jsおよび.map.jsファイルがdistフォルダーに表示されます。

注：他の回答をご覧ください。これらも非常に有用で有益です。

96
Muhammad Raheel

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

そして、以下を変更しただけです：

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

npm run startは以前と同じように機能します（html/cssおよびコピーなしのその他のファイルでも）が、コンパイルされた.jsおよび.mapファイルはdist/appに組み込まれ、ユーザーを汚染しませんsrc/appディレクトリ。

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

20
NagyI

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

最初に ラハイル・シャンが言ったこと 。

次に作成する 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 フォルダ。

17
Lirianer

Raheel shanさん、ありがとうございました。

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

残念ながら、私のhtml/cssファイルはdistフォルダーにありません。 distフォルダー内のすべてのhtml/cssをコピーする方法

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

多くの時間の後-私はそれを理解しました-Gulpを使用せずに:) Yipppeee

8
Abdeali Chandanwala

したがって、これを解決するには：

残念ながら、私のhtml/cssファイルはdistフォルダーにありません。 distフォルダー内のすべてのhtml/cssをコピーする方法

@raheel shanと@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をご使用の場合は、rsyncを介して、または cwRsync などのパッケージ化されたソリューションでCygwinを取得できます。

7
WillyC

@ 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削除の場合、rsyncスクリプトのwatchassetsコマンドの--deleteフラグに注意してください。

5
AlphaZygma

別のフォルダーにAngular2 TypeScriptファイルとJavaScriptファイル

以下は、最新バージョンV2.1.1のAngular 2の私の設定です。

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

enter image description here

3
xgqfrms

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

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

npm install cpx

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

"baseDir":"dist"

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

"outDir": "../dist"

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

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

4.2）「cpx」コマンドを含むように「start」行を変更します。

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

Step 2 modification

Step 3 modification

Step 4 modification

3
Windchill

plunker がangular 2 tsテンプレートで行っているように、ブラウザで.tsファイルをトランスパイルできます。

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

2
Eggy

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

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

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

2
M. Neuweiler

上記のオプションのいくつかを試しましたが、最終的にはこれが解決しました： Peep -anextensionfor Visual Studio Code。

インストールする方法：

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

-

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

01/25/2017-アップデート：angular-cli箱から出して、これを処理します。そしてインストールが動作するようになりました。

2
Anand Rockzz

ここにリストされたソリューションを試しました。彼らは良いですが、私には理想的ではありません。シンプルなソリューションが必要です。すべてのコンポーネントファイルにパス情報をハードコーディングしたくありません。これを処理するために、さらにnpmパッケージをインストールしたくありません。

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

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

私はSublime Textを使用しているので、ここに私のプロジェクト設定のために持っているものがあります：

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

他の多くのエディターにも同様の機能があるはずです。

更新：

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

2
Shawn

Angular 2.4を使用しています。私はそれを機能させるために追加のステップが必要でした。これは、index.htmlのmain.jsファイルへのsystemJの参照を更新したものです。

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

に：

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

1
Eugenio

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

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

I am using the following structure

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

Systemjs.config.jsに変更しました

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

systemjs.config.js

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

tsconfig.json

1
Sanjoy Kanrar

ラヒール・シャンが言ったことに加えて。正しい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); });
0
Tanmay