将Angular应用程序添加到现有项目

时间:2018-04-06 12:45:21

标签: angular angular-cli

我有一个现有项目,我想使用Angular CLI添加Angular应用程序。

项目结构现在看起来像这样:

  • node_modules
  • SRC
    • 客户端
    • 服务器
    • 共享
  • .angular-cli.json
  • 的package.json

客户端和共享文件夹仍然是空的,我想在客户端文件夹中安装我的角度应用程序但仍然只想为整个项目维护一个package.json。这就是为什么我尝试使用以下内容添加angular-cli.json:

{
  "project": {
    "name": "projectname"
  },
  "apps": [
    {
      "root": "./src/client",
      "outDir": "./dist/browser"
    }
  ]
}

问题:

现在将Angular应用程序(到/ src / client)添加到我的项目的最佳方法是什么?由于现有的package.json,我无法简单地运行ng new,也许它不会在/ src / client文件夹中生成应用程序。

4 个答案:

答案 0 :(得分:6)

使用ng new仍然是实现这一目标的最简单方法。

  1. 使用 ng new 创建角度项目。
  2. 将src文件夹中的所有内容移至src / client
  3. 将angular-cli.json中的根特性调整为 src / client ,如果您关心linting,请调整linting属性。
  4. tsconfig.app.json tsconfig.spec.json 中的 extends proeprty设置为" extends&# 34;:" ../../ tsconfig.json"

  5. 测试服务,构建,测试和linting命令。它们应该可以正常工作。

  6. 从服务器文件夹复制内容并将其依赖项添加到package.json

答案 1 :(得分:3)

@ Austin752的答案似乎已过时。根据文档,将角度应用程序添加到现有项目的命令是(Angular CLI版本8.3.23):

$ ng generate application <name> [options]

$ ng g application <name> [options]

请参阅:https://angular.io/cli/generate#application-command

这会将新应用添加到工作区根目录的projects文件夹中

答案 2 :(得分:0)

我最近从事的项目需要这种类型的设置。从Angular 7.2开始,只需键入

count

这将在项目文件夹中创建新的应用程序

要在新创建的应用程序中创建组件

ng g a yourNewApp

答案 3 :(得分:0)

至少在最新版本的Angular中有一个参数--directory。

所以现在您只需运行

ng new <app-name> --directory <dir-name>