将非angular cli项目部分转换为angular cli项目（必须在angular cli项目中才能使用generate命令）

我遵循/克隆了以下内容：

我做了：

npm安装

然后我做了：

npm启动

项目可以运行

然后我想向这个项目添加一个新组件。我使用：

ng生成组件我的foo组件

但我有一个错误：

您必须在Angular CLI项目中才能使用generate命令

我在stackoverflow中找到了一些与我的问题相关的帖子，我试过了，但没有成功。如何解决我的问题。看起来这个项目不是由angular cli创建的，所以我不能使用如下命令：ng generate

我检查了我的package.json，我可以将angular cli视为依赖项吗

My

package.json

：

{
  "name": "angular-starter",
  "version": "6.0.0",
  "description": "An Angular Webpack Starter kit featuring Angular (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
  "keywords": [
    "angular",
    "angular2",
    "angular4",
    "webpack",
    "typescript"
  ],
  "author": "Patrick Stapleton <patrick@angularclass.com>",
  "homepage": "https://github.com/AngularClass/angular-starter",
  "license": "MIT",
  "scripts": {
    "build:aot:prod": "npm run clean:dist && npm run clean:aot && cross-env BUILD_AOT=1 npm run webpack -- --config config/webpack.prod.js  --progress --profile --bail",
    "build:aot": "npm run build:aot:prod",
    "build:dev": "npm run clean:dist && npm run webpack -- --config config/webpack.dev.js --progress --profile",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
    "ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
    "ci:nobuild": "npm run lint && npm test && npm run e2e",
    "ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
    "ci:travis": "npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
    "ci": "npm run ci:testall",
    "clean:dll": "npm run rimraf -- dll",
    "clean:aot": "npm run rimraf -- compiled",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean": "npm cache clean --force && npm run rimraf -- node_modules doc coverage dist compiled dll",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
    "e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
    "e2e": "npm-run-all -p -r server:prod:ci protractor",
    "github-deploy:dev": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
    "github-deploy:prod": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "node": "node",
    "postinstall": "npm run webdriver:update",
    "postversion": "git push && git push --tags",
    "preclean:install": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "protractor:delay": "sleep 3 && npm run protractor",
    "protractor:live": "protractor --elementExplorer",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist -c-1 --cors",
    "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "npm run lint && karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "webdriver-manager update",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  },
  "dependencies": {
    "@angular/animations": "~4.1.2",
    "@angular/common": "~4.1.2",
    "@angular/compiler": "~4.1.2",
    "@angular/core": "~4.1.2",
    "@angular/forms": "~4.1.2",
    "@angular/http": "~4.1.2",
    "@angular/platform-browser": "~4.1.2",
    "@angular/platform-browser-dynamic": "~4.1.2",
    "@angular/platform-server": "~4.1.2",
    "@angular/router": "~4.1.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "~5.0.2",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.0.3",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.45",
    "@types/node": "^7.0.13",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.6.28",
    "@types/webpack": "^2.2.15",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.1.2",
    "codelyzer": "~2.1.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cross-env": "^5.0.0",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "~2.1.0",
    "file-loader": "^0.11.1",
    "find-root": "^1.0.0",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "inline-manifest-webpack-plugin": "^3.0.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "~2.0.3",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "~2.0.0",
    "node-sass": "^4.5.2",
    "npm-run-all": "^4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.2",
    "preload-webpack-plugin": "^1.2.2",
    "protractor": "^5.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.1",
    "sass-loader": "^6.0.3",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "source-map-loader": "^0.2.1",
    "string-replace-loader": "~1.2.0",
    "style-loader": "^0.18.1",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.0.2",
    "tslib": "^1.6.1",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.5.2",
    "typedoc": "^0.7.1",
    "typescript": "~2.2.2",
    "url-loader": "^0.5.8",
    "webpack": "~2.6.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "~2.4.2",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~4.1.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/AngularClass/angular-starter.git"
  },
  "bugs": {
    "url": "https://github.com/AngularClass/angular-starter/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

{
“名称”：“角度启动器”，
“版本”：“6.0.0”，
“说明”：“AngularClass提供的Angular（路由器、Http、表单、服务、测试、E2E、覆盖）、Karma、量角器、Jasmine、伊斯坦布尔、TypeScript和网页包入门工具包”，
“关键词”：[
“棱角的”，
“angular2”，
“angular4”，
“网页包”，
“打字脚本”
],
“作者”：“帕特里克·斯台普顿”，
“主页”：https://github.com/AngularClass/angular-starter",
“许可证”：“麻省理工学院”，
“脚本”：{
“build:aot:prod”：“npm run clean:dist&&npm run clean:aot&&cross env build_aot=1 npm run webpack--config-config/webpack.prod.js--progress--profile--bail”，
“构建：aot”：“npm运行构建：aot:prod”，
“build:dev”：“npm run clean:dist&&npm run webpack--config/webpack.dev.js--progress--profile”，
“构建：docker”：“npm运行构建：产品和docker构建-t angular2网页包开始：最新版本。”，
“build:prod”：“npm run clean:dist&&npm run webpack--config/webpack.prod.js--progress--profile--bail”，
“构建”：“npm运行构建：dev”，
“ci:aot”：“npm运行lint&&npm运行测试&&npm运行构建：aot&&npm运行e2e”，
“ci:jit”：“npm运行lint和npm运行测试和npm运行构建：产品和npm运行e2e”，
“ci:nobuild”：“npm运行lint&&npm测试&&npm运行e2e”，
“ci:testall”：“npm运行lint&&npm运行测试和npm运行构建：产品和npm运行e2e&&npm运行构建：aot&&npm运行e2e”，
“ci:travis”：“npm运行lint&&npm运行测试&&npm运行构建：aot&&npm运行e2e:travis”，
“ci”：“npm运行ci:testall”，
“clean:dll”：“npm运行rimraf--dll”，
“clean:aot”：“npm运行rimraf——已编译”，
“清洁：地区”：“npm运行rimraf——地区”，
“清理：安装”：“npm设置进度=false&&npm安装”，
“清理”：“npm缓存清理--强制和&npm运行rimraf--节点\u模块文档覆盖区编译dll”，
“docker”：“docker”，
“docs”：“npm运行类型doc--options typedoc.json--exclude'***.spec.ts./src/”，
“e2e:live”：“npm运行所有-p-r服务器：产品：ci量角器：live”，
“e2e:travis”：“npm运行所有-p-r服务器：产品：ci量角器：延迟”，
“e2e”：“npm运行所有-p-r服务器：产品：ci量角器”，
“github部署：dev”：“npm运行webpack--config/webpack.github-deploy.js--progress--profile--env.githubDev”，
“github部署：prod”：“npm运行webpack--config/webpack.github-deploy.js--progress--profile--env.githubProd”，
“github部署”：“npm运行github部署：dev”，
“lint”：“npm运行tslint\”src/***.ts\”，
“节点”：“节点”，
“postinstall”：“npm运行webdriver:更新”，
“postversion”：“git push&&git push--tags”，
“预清洁：安装”：“npm运行清洁”，
“上一版本”：“npm测试”，
“量角器”：“量角器”，
“量角器：延迟”：“睡眠3和npm运行量角器”，
“量角器：活动”：“量角器--elementExplorer”，
“rimraf”：“rimraf”，
“服务器：dev:hmr”：“npm运行服务器：dev--inline--hot”，
“server:dev”：“npm运行webpack dev server--config/webpack.dev.js--open--progress--profile--watch--content base src/”，
“服务器：prod”：“http服务器区-c-1--cors”，
“服务器：产品：ci”：“http服务器区-p 3000-c-1--cors”，
“服务器”：“npm运行服务器：dev”，
“开始：hmr”：“npm运行服务器：dev:hmr”，
“开始”：“npm运行服务器：dev”，
“测试”：“npm运行林特和因果报应启动”，
“tslint”：“tslint”，
“typedoc”：“typedoc”，
“版本”：“npm运行构建”，
“watch:dev:hmr”：“npm运行watch:dev--hot”，
“watch:dev”：“npm运行构建：dev--watch”，
“watch:prod”：“npm运行构建：prod--watch”，
“监视：测试”：“npm运行测试--自动监视--无单次运行”，
“监视”：“npm运行监视：dev”，
“webdriver manager”：“webdriver manager”，
“webdriver:start”：“npm运行webdriver管理器启动”，
“webdriver:更新”：“webdriver管理器更新”，
“webpack dev server”：“node--max_old_space_size=4096 node_modules/webpack dev server/bin/webpack dev server.js”，
“webpack”：“node--max_old_space_size=4096 node_modules/webpack/bin/webpack.js”
},
“依赖项”：{
“@angular/animations”：“~4.1.2”，
“@angular/common”：“~4.1.2”，
“@angular/compiler”：“~4.1.2”，
“@angular/core”：“~4.1.2”，
“@angular/forms”：“~4.1.2”，
“@angular/http”：“~4.1.2”，
“@angular/platform浏览器”：“~4.1.2”，
“@angular/platform browser dynamic”：“~4.1.2”，
“@angular/platform服务器”：“~4.1.2”，
“@angular/router”：“~4.1.2”，
“@angularclass/hmr”：“~1.2.2”，
“@angularclass/hmr loader”：“~3.0.2”，
“核心js”：“^2.4.1”，
“http服务器”：“^0.9.0”，
“ie垫片”：“^0.1.0”，
“反映元数据”：“^0.1.10”，
“rxjs”：“~5.0.2”，
“zone.js”：“0.8.5”
},
“依赖性”：{
“@angular/compiler cli”：“~4.0.3”，
“@types/hammerjs”：“^2.0.34”，
“@types/jasmine”：“2.5.45”，
“@types/node”：“^7.0.13”，
“@types/sourcemap”：“^0.5.0”，
“@types/uglify js”：“^2.6.28”，
“@types/webpack”：“^2.2.15”，
“添加资产html网页包插件”：“^1.0.2”，
“angular2模板加载器”：“^0.6.2”，
“资产网页包插件”：“^3.5.1”，
“很棒的类型脚本加载程序”：“~3.1.2”，
“codelyzer”：“~2.1.1”，
“复制网页包插件”：^
 Go to 
1-View
2-Integrated Terminal
or ( CTRL+` )
use the Integrated Terminal for to generate component

ng generate component my-foo-component (or)
ng g component my-foo-component

Note:_
in command prompt you most be inside project folder

cd project
cd src/app

ng generate component my-foo-component

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",   
  "project": {
    "name": "angular-starter"   
  },   
  "apps": [
    {
      "root": "src",
      "index": "index.html",
      "main": "main.ts"
    }   
  ],   
  "defaults": {
    "styleExt": "css"   
  } 
}

ng c my-new-component

node_modules/.bin/ng c my-new-component