web-dev-qa-db-ja.com

Angular 2アプリケーションでlite-serverのベースフォルダを変更できません

Angular 2 の5分間のクイックスタート）を実行していますが、私のアプリケーションはリポジトリのルートではなくsrc/フォルダにあります。 npm startを実行すると、アプリケーションはルートでindex.htmlファイルを見つけようとします。lite-serverを読んだところ、BrowserSyncが使用されていることがドキュメントに示され、再構成できますBrowserSync with bs-config.json with my repository。私はそれを行いました、そしてこれは私の設定がどのように見えるかです：

{
  "port": 8123,
  "server": { "baseDir": "./src" }
}

ログによると、指定された設定を使用しています：

[1] > [email protected] lite E:\GitHub\todo-app-angular2
[1] > lite-server "./bs-config.json"

また、bs-config.jsを使用してオーバーライドを試しました

module.exports = {
  port: 8123,
  server: {
    baseDir: "./src"
  }
};

しかし、Angularアプリケーションはまだポート3000で開かれており、設定で定義されたbaseDirを無視しています。何が問題なのですか？

node.jsangularbrowser-synclite-server
9
Konstantin Dinev

Lite-serverはrequire関数を使用してモジュールをロードしようとするため、bs-config.jsというファイルを（bs-config.jsonの代わりに）使用する必要があります。構成は有効なNodeモジュールでなければなりません：

module.exports = {
  "port": 8123,
  "server": { "baseDir": "./src" }
};

ソースコードの次の行を参照してください： https://github.com/johnpapa/lite-server/blob/master/lib/lite-server.js#L2 。

デフォルトでは、このファイルはユーザーのプロジェクトフォルダーから読み込まれます。

編集

もう少し掘り下げた後、私の答えの最初の部分はgithubからのコードに依存していますが、npm install（バージョン1.3.4）を使用して実際にインストールされたコードには依存していません

この場合、2つのオプションがあります。

  • ポート
  • baseDir

このコマンドを使用すると、問題が修正されます。

$ lite-server --baseDir ./src --port 3333

それがあなたを助けることを願っています、ティエリー

16
Thierry Templier

Thierry Templierからの回答は（もう）正しくありません。bs-config.jsonまたはbs-config.jsのいずれかの構成を使用して、ブラウザーの同期構成を調整できます。これは、JIT（Just-In-Time）およびAOT（Ahead-Of-Time）コンパイルを使用した angular2クイックスタートの例 で最初に思いついたものですサポート（bs-config.json）

{
  "port": 8000,
  "server": ["app", "."]
}

複数のディレクトリからプロジェクトをホストします。

ただし、serverファイルのjsonセクションを上書きすることにより、デフォルトのmiddleware構成が同時に上書きされたため、このソリューションは好きではありませんでした。

したがって、私は次のアプローチで終了しました、私はデフォルト lite-server のconfig-defaults.jsファイルを取り、代わりにそれを変更しました（ bs-config.js ）：

'use strict';
var fallback = require('connect-history-api-fallback');
var log = require('connect-logger');
/*
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 */
module.exports = {
  port: 8000,
  injectChanges: false, // workaround for Angular 2 styleUrls loading
  filters: ['./**/*.{html,htm,css,js}'],
  watchOptions: {
    ignored: 'node_modules'
  },
  server: ['./', 'app'],
  middleware: [
    log({ format: '%date %status %method %url' }),
    fallback({
        index: '/index.html',
        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] // systemjs workaround
    })
  ]
};
5
Evgeny Bobkin