无法在 Angular 2 应用程序中更改 lite-server 的基本文件夹答案

【问题标题】：Can't change the base folder for lite-server in Angular 2 application无法在 Angular 2 应用程序中更改 lite-server 的基本文件夹
【发布时间】：2016-02-02 09:24:56
【问题描述】：

我正在通过5 minute quickstart of Angular 2。但是，我的应用程序驻留在src/ 文件夹中，而不是存储库的根目录中，当我运行npm start 时，应用程序试图在根目录中找到index.html 文件。我阅读了lite-server，文档显示它使用BrowserSync，我可以在我的存储库中使用bs-config.json 重新配置BrowserSync。我这样做了，这就是我的配置：

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

根据日志它正在使用指定的配置：

[1] > todo-app-angular2@1.0.0 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。我做错了什么？

【问题讨论】：

尝试在npm start 命令中添加--config path/to/bs-config.json
确保浏览器同步配置选项文件使用 lite-server v2

标签： node.js angular browser-sync lite-server

【解决方案1】：

您应该使用一个名为 bs-config.js 的文件（而不是 bs-config.json 文件），因为 lite-server 尝试使用 require 函数加载模块。配置应该是一个有效的 Node 模块：

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

查看源代码中的这一行：https://github.com/johnpapa/lite-server/blob/master/lib/lite-server.js#L20。

此文件默认从用户的项目文件夹中加载。

编辑

在深入挖掘之后，我的答案的第一部分依赖于来自 github 的代码，而不是使用 npm install（版本 1.3.4）实际安装的代码

在这种情况下有两种选择：

端口
baseDir

使用此命令将解决您的问题：

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

希望对你有帮助蒂埃里

【讨论】：

我实际上忘了提到我已经尝试过了。我用 bs-config.js 文件中的 module.export 替换了 json 配置。那仍然什么也没做:(实际上当我添加这个时，我的 npm start 会失败。
我刚刚尝试过，它仍然从 ./ [1] [BS] 访问 URL：[1] -------------------- ----------------- [1] 本地：localhost:3000 [1] 外部：xx.xx.xx.xx:3000 [1] -------------- ---------------------- [1] UI：localhost:3001 [1] UI 外部：xx.xx.xx.xx:3001 [1] -------- ---------------------------------------- [1] [BS] 服务文件来自：./
您使用哪个版本的 lite-server？
@ShawnNorthrop 是的，您可以利用 --files 参数。在此级别指定文件模式。类似./**/*.js...
确保浏览器同步配置选项文件使用 lite-server v2

【解决方案2】：

Thierry Templier 的答案不太正确（不再），您可以使用bs-config.json 或bs-config.js 配置来调整您的浏览器同步配置。这就是我最初为 angular2 quick start example 提出的带有 JIT(Just-In-Time) 和 AOT(Ahead-Of-Time) 编译支持 (bs-config.json)

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

从多个目录托管项目。

但是，我不喜欢这个解决方案，因为通过覆盖json 文件中的server 部分，同时覆盖了默认的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
    })
  ]
};

【讨论】：