简体   繁体   English

转换现有的角度2项目以使用角度CLI

[英]Converting an existing angular 2 project to use angular CLI

I have a project that was not created using ng new (rather, I followed the quickstart guide). 我有一个项目不是使用ng new创建的(相反,我遵循了快速入门指南)。 When I run an angular CLI command in that project (such as ng generate ) I get this error message: 当我在该项目中运行一个角度CLI命令(例如ng generate )时,我收到以下错误消息:

You have to be inside an angular-cli project in order to use the generate command. 您必须在angular-cli项目中才能使用generate命令。

Is there a way I can turn my existing project into an angular-cli project? 有没有办法可以将现有项目转变为角度cli项目? (I wanted to try using it because it apparently automatically works around an issue with barrel imports and SystemJS .) (我想尝试使用它,因为它显然会自动解决桶进口和SystemJS的问题 。)

You should be able to run ng init and follow the prompts. 您应该能够运行ng init并按照提示操作。 Have a look at this issue if you need some guidance: https://github.com/angular/angular-cli/issues/755 如果您需要一些指导, 查看此问题: https//github.com/angular/angular-cli/issues/755

Edit (March 13, 2017): 编辑(2017年3月13日):

ng-init was removed from the latest version of the angular cli. 从最新版本的角度cli中删除了ng-init https://github.com/angular/angular-cli/pull/4628 https://github.com/angular/angular-cli/pull/4628

So for now you'll need to resort to mimicking what it tried to accomplish. 所以现在你需要诉诸于它试图完成的事情。 ie: 即:

  1. Create a new angular project ng new myTemplate 创建一个新的角度项目ng my mympmplate

  2. Copy relevant files to your existing project from your new myTemplate project: 从新的myTemplate项目中将相关文件复制到现有项目:

    .angular-cli.json package.json tslint.json src/polyfills.ts src/styles.css src/tsconfig.json .angular-cli.json package.json tslint.json src / polyfills.ts src / styles.css src / tsconfig.json

Depending on the state of your existing application you may want to copy over way more or way less. 根据您现有应用程序的状态,您可能希望更多或更少地复制。 I guess this is why the feature was removed from the CLI. 我想这就是从CLI中删除该功能的原因。 There isn't really any way for it to know exactly what you want it to do. 它没有任何方法可以确切地知道你想要它做什么。

ng init has been removed . ng init 已被删除 What worked for me was to manually create a .angular-cli.json file in the root folder with the following keys: 对我.angular-cli.json是使用以下键在根文件夹中手动创建.angular-cli.json文件:

 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "version": "1.0.0",
      "name": "new-cli"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",

        "prefix": "app",
        "scripts": [],
        "environmentSource": "environments/environment.ts"
      }
    ]
  }

You will have to change values according to your setup of course. 您必须根据您的设置更改值。

ng init was removed from the latest version of the angular CLI but You can use yarn package manager to resolve all the dependencies. ng init已从最新版本的角度CLI中删除,但您可以使用yarn package manager来解析所有依赖项。 In order to use yarn , you have to install it first. 为了使用纱线 ,您必须先安装它。

To install yarn in Ubuntu, enter the following command in your terminal: 要在Ubuntu中安装yarn,请在终端中输入以下命令:

sudo apt-get update && sudo apt-get install yarn

For Windows you can download yarn installer from here . 对于Windows,您可以从此处下载纱线安装程序。

After installing yarn, you can run the command yarn install in your project direcotry which will download all the dependencies of your project. 安装yarn之后,您可以在项目目录中运行命令yarn install ,它将下载项目的所有依赖项。

For additional information about yarn check official docs 有关纱线检查官方文档的其他信息

Try the below solution may be it could help. 尝试以下解决方案可能会有所帮助。

  1. Run this command on root folder npm install -g angular-cli 在根文件夹npm install -g angular-cli上运行此命令
  2. Create new folder for your project ng new project_folder_name 为项目ng new project_folder_name创建新文件夹
  3. Enter inside that folder cd project_folder_name 在该文件夹中输入cd project_folder_name
  4. Run the project by this command ng serve (Note: Now on localhost:4200, the demo project will run) 通过此命令ng serve运行项目(注意:现在在localhost:4200上,将运行演示项目)
  5. Copy the src folder of your existing project and replace with the src of your newly created project from project's root folder only . 复制现有项目的src文件夹,并仅从项目的根文件夹中替换为新创建的项目的src

Copy everything from package.json from the existing project. 从现有项目中复制package.json中的所有内容。 Run npm install again.If it breaks, it probably needs tinker with webpack.config 再次运行npm install。如果它中断,它可能需要修改webpack.config

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM