javascript - 如何使用此文件夹结构在 Angular 2 中引用 node_modules？

Question

我刚开始使用 Angular 2，我正在尝试使用以下文件夹结构:

- angular-app
    - src 
    - dist
    - package.json

src 是实际源代码的位置，dist 是 typescript 编译后生产版本的位置，等等。

现在，为了运行该应用程序，我使用了快速启动建议，我已经安装了 lite-server 并且我有 package 的 scripts 部分.json 定义为:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
}

现在，为了告诉 lite-server 代码在 src 中，我添加了一个文件夹 configs 到根目录，其中一个bs-config.json 文件内容:

{
    "port": 3000,
    "files": ["./src/**/*.{html,htm,css,js}"],
    "server": { "baseDir": "./src/" }
}

并将 lite 脚本更改为 lite-server -c configs/bs-config.json。

现在，它确实从 src 中提供文件。它把所有东西都放在里面。但是有一个问题。

在 index.html 上，有几个脚本从 ../node_modules 加载。并且 lite-server 不知道这个文件夹，因此对于进入 ../node_modules 的任何请求，它都会返回 404。

这是个大问题。我该如何解决？我如何从 src 中请求 ../node_modules 中的脚本并让它们由 lite-server 提供服务？

Answer 1

您可以尝试将您的 angular-app 文件夹作为根目录添加到 bs-config.json 文件(注意 baseDir 中额外的“.”):

  "server": { 
    "baseDir": ["./src", "."]
  }

在 angular-app/src/index.html 中引用如下示例:

<script src="node_modules/core-js/client/shim.min.js"></script>

然后将被解析(假设您的 nodes_modules 将您的“angular-app”作为其父文件夹)。