node.js 在本地运行现有的 Angular 项目

Question

提问by mubashermubi

I am very new to Angular, I am trying to run an existing project of Angular on my machine. I have done a lot of tests and followed a lot of articles. But cannot run my project.

我对 Angular 很陌生，我正在尝试在我的机器上运行一个现有的 Angular 项目。我做了很多测试，也关注了很多文章。但无法运行我的项目。

I have the project files like this:

我有这样的项目文件：

I installed the nodejs on my system. And followed the following instructions as per an article:

我在我的系统上安装了 nodejs。并按照一篇文章遵循以下说明：

change directory to our repo

将目录更改为我们的 repo

cd myproject

光盘我的项目

installing Cli according to project readme file.

根据项目自述文件安装 Cli。

npm install -g @angular/[email protected]

install the repo with npm

使用 npm 安装 repo

npm install

安装

install TypeScript typings

安装 TypeScript 类型

npm run typings-install -- Gives error: npm ERR! missing script: typings-install

npm run typings-install -- 给出错误：npm ERR！缺少脚本：typings-install

Then I try the following:

然后我尝试以下操作：

npm install --global For following:

npm install --global 对于以下内容：

webpack (npm install --global webpack)
webpack-dev-server (npm install --global webpack-dev-server)
karma (npm install --global karma-cli)
protractor (npm install --global protractor)
typings (npm install --global typings)
typescript (npm install --global typescript)

start the server

启动服务器

npm start

-- Gives multiple error messages: Such as:

-- 给出多个错误信息：例如：

npm ERR! code ELIFECYCLE

-- For this I tried "npm cache clean" and then deleted "node_modules" and then installed packages again using: "npm install --save"

-- 为此，我尝试了“npm cache clean”，然后删除了“node_modules”，然后再次使用：“npm install --save”安装了软件包

Then tried again: npm startit gave me same error "npm ERR! code ELIFECYCLE"

然后再试一次：npm start它给了我同样的错误“ npm ERR! code ELIFECYCLE”

Also, this error message:

此外，此错误消息：

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

For this, I tried "npm uninstall -g webpack" and then: npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware from this: Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

为此，我尝试了“npm uninstall -g webpack”，然后： npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware 来自：错误：找不到模块' webpack/lib/node/NodeTemplatePlugin'

Tried running it again:

再次尝试运行它：

this time it gave me following error:

这次它给了我以下错误：

ERROR in ./node_modules/raw-loader!./node_modules/@angular/cli/node_modules/post
css-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./sr
c/styles.scss
Module build failed: Error: Cannot find module 'node-sass'

For this "Cannot find module 'node-sass'" I did the search again:

对于这个“ Cannot find module 'node-sass'”，我再次搜索：

and found this command: npm install node-sass

并找到了这个命令：npm install node-sass

i tried it and then tried starting again

我试过了，然后又试着重新开始

Now I received ERROR in No NgModule metadata found for 'AppModule'.

现在我收到了 ERROR in No NgModule metadata found for 'AppModule'.

And for this I tried the following from git cli issues 8798

为此，我从 git cli 问题 8798 中尝试了以下内容

remove the node_modules folder

删除 node_modules 文件夹

rm -rf node_modules

remove the webpack

移除 webpack

npm remove webpack

clean npm cahe

清理 npm 缓存

npm cache clean --force

install the latest version of angular cli

安装最新版本的 angular cli

npm install --save-dev @angular/cli@latest

install the dependencies

安装依赖项

npm install

now it's just testing

现在只是测试

npm start our ng serve

Now it start giving me: Local workspace file ('angular.json') could not be found and wont work at all. To resolve this: I did: ng update @angular/cli --migrate-only --from=1.7.4

现在它开始给我：找不到本地工作区文件（'angular.json'）并且根本无法工作。要解决这个问题：我做了：ng update @angular/cli --migrate-only --from=1.7.4

Which remove the error: "Local workspace file ('angular.json') could not be found" but now it gives me error

其中删除了错误：“找不到本地工作区文件（'angular.json'）”但现在它给了我错误

ERROR in src/app/web-player/albums/album-context-menu/album-context-menu.compon
nt.ts(13,14): error TS2515: Non-abstract class 'AlbumContextMenuComponent' does
not implement inherited abstract member 'getAllTracks' from class 'ContextMenuC
mponent<Album>'.
src/app/web-player/artists/artist-context-menu/artist-context-menu.component.ts
13,14): error TS2515: Non-abstract class 'ArtistContextMenuComponent' does not
mplement inherited abstract member 'getAllTracks' from class 'ContextMenuCompon
nt<Artist>'.
src/app/web-player/context-menu/context-menu.component.ts(58,34): error TS2304:
Cannot find name 'TrackList'.
src/app/web-player/playlists/playlist-context-menu/playlist-context-menu.compon
nt.ts(15,14): error TS2515: Non-abstract class 'PlaylistContextMenuComponent' d
es not implement inherited abstract member 'getAllTracks' from class 'ContextMe
uComponent<Playlist>'.

What am i missing here? I tried a lot of articles from 3 days but cannot run it.

我在这里缺少什么？我从 3 天开始尝试了很多文章，但无法运行它。

Also, I see different types of Warning and messages.

此外，我看到了不同类型的警告和消息。

Read Me file in project:

项目中的自述文件：

# Client

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

Package.json file:

Package.json 文件：

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
    "build": "ng build --prod --sourcemaps --build-optimizer",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.2",
    "@angular/common": "^5.1.2",
    "@angular/compiler": "^5.1.2",
    "@angular/core": "^5.1.2",
    "@angular/forms": "^5.1.2",
    "@angular/http": "^5.1.2",
    "@angular/platform-browser": "^5.1.2",
    "@angular/platform-browser-dynamic": "^5.1.2",
    "@angular/router": "^5.1.2",
    "bootstrap": "^4.0.0-beta",
    "chart.js": "^2.7.0",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^2.5.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.18.1",
    "ng-lazyload-image": "^3.3.3",
    "ngx-color-picker": "^4.3.4",
    "normalize.css": "^7.0.0",
    "perfect-scrollbar": "^0.8.1",
    "popper.js": "^1.12.5",
    "raven-js": "^3.18.1",
    "rxjs": "^5.4.2",
    "svg4everybody": "^2.1.4",
    "tooltip.js": "^1.1.5",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.2",
    "@angular/compiler-cli": "^5.1.2",
    "@angular/language-service": "^5.1.2",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "~6.0.60",
    "@types/popper.js": "^1.10.1",
    "@types/youtube": "0.0.31",
    "@types/clipboard": "^1.5.35",
    "cheerio": "^1.0.0-rc.2",
    "codelyzer": "~3.1.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-filter": "^5.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-svgmin": "^1.2.3",
    "gulp-svgstore": "^6.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "material-design-icons": "^3.0.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack-bundle-analyzer": "^2.9.0"
  }
}

Answer 1

回答by bereket gebredingle

Run the following commands

运行以下命令

 npm uninstall -g @angular/cli
 npm cache verify
 npm install -g @angular/cli@next
 npm update

Then

然后

 ng serve

I hope it works now. Comment if u face any error while.

我希望它现在有效。如果您遇到任何错误，请发表评论。

Answer 2

回答by SeReGa

That should be much easier...

那应该容易多了……

Take your project files as is

按原样使用您的项目文件

Run npm install

跑 npm install

Since you have the package.jsonfile, it will read all dependencies and install them.

由于您拥有该package.json文件，它将读取所有依赖项并安装它们。

Then run npm audit fixif needed (the terminal will tell you that).

然后npm audit fix在需要时运行（终端会告诉你）。

Good luck!

祝你好运！

Answer 3

回答by Kalpesh Kashyap

try ng serve --openit will compile your project and directly open in browser

试试ng serve --open它会编译你的项目并直接在浏览器中打开

Answer 4

回答by NaveenT

rename the file .angular-cli.jsonto angular.jsonand re run the ng serve --opencommand.

将文件重命名.angular-cli.json为angular.json并重新运行ng serve --open命令。

node.js 在本地运行现有的 Angular 项目

提问by mubashermubi

change directory to our repo

将目录更改为我们的 repo

installing Cli according to project readme file.

根据项目自述文件安装 Cli。

install the repo with npm

使用 npm 安装 repo

install TypeScript typings

安装 TypeScript 类型

Then I try the following:

然后我尝试以下操作：

start the server

启动服务器

回答by bereket gebredingle

回答by SeReGa

回答by Kalpesh Kashyap

回答by NaveenT

相关推荐

最近更新

标签

node.js 在本地运行现有的 Angular 项目

提问by mubashermubi

change directory to our repo

将目录更改为我们的 repo

installing Cli according to project readme file.

根据项目自述文件安装 Cli。

install the repo with npm

使用 npm 安装 repo

install TypeScript typings

安装 TypeScript 类型

Then I try the following:

然后我尝试以下操作：

start the server

启动服务器

回答by bereket gebredingle

回答by SeReGa

回答by Kalpesh Kashyap

回答by NaveenT

相关推荐

node.js 如何使用 npm 安装 PhantomJS v2

node.js 什么可能导致与 npm 无法找到文件相关的错误？我的 node_modules 子文件夹中没有内容。这是为什么？

node.js 使用强大的文件名解析表单值

node.js npm start - npm 错误！缺少脚本：开始

相关推荐

最近更新

标签