Angular ng serve将无法在EC2服务器上工作

Angular ng serve将无法在EC2服务器上工作,angular,amazon-web-services,amazon-ec2,web-hosting,Angular,Amazon Web Services,Amazon Ec2,Web Hosting,我对使用Angular2创建的网站有问题。我用Angular CLI构建了框架。我已经在我的本地机器上对它进行了彻底的测试,它工作得非常好。“ng serve”主机位于端口4200上,整个页面按其应有的方式加载和运行。我所有的文件也都通过了测试。我运行了“ng lint”,没有收到任何警告或错误 但是,当我上传到我的服务器时,“ng serve”将不起作用。我的服务器是通过Amazon Web Services(AWS)在EC2节点上创建的Bitnami映像。我在服务器上安装了nodejs、np

我对使用Angular2创建的网站有问题。我用Angular CLI构建了框架。我已经在我的本地机器上对它进行了彻底的测试,它工作得非常好。“ng serve”主机位于端口4200上,整个页面按其应有的方式加载和运行。我所有的文件也都通过了测试。我运行了“ng lint”,没有收到任何警告或错误

但是,当我上传到我的服务器时,“ng serve”将不起作用。我的服务器是通过Amazon Web Services(AWS)在EC2节点上创建的Bitnami映像。我在服务器上安装了nodejs、npm和Angular CLI,并进行了检查以确保版本是最新的。他们都是

当我第一次尝试“ng serve”命令时,我遇到了以下错误:

Environment configuration does not contain "environmentSource" entry.

A new environmentSource entry replaces the previous source entry inside environments.

    To migrate angular-cli.json follow the example below:

    Before:

    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }


    After:

    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
我更改了angular-cli.json以反映“After:”部分,并再次运行“ng serve”命令。(我不认为这是问题所在,但我认为这是相关信息)

当前的错误是:

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:8062:20)
    at Object.createCompilerHost (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:44978:26)
    at Object.ngcLoader (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/@ngtools/webpack/src/loader.js:350:33)
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:8062:20)
    at Object.createCompilerHost (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:44978:26)
    at Object.ngcLoader (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/@ngtools/webpack/src/loader.js:350:33)
 @ multi ./src/polyfills.ts
据我所知,main.ts和polyfill.ts文件中都有一些换行符。我把它们看了一遍,什么也没发现。两个文件我都没有更改。这些文件是由angular cli生成的,我不太习惯自己修改它们

如何解决这些错误?我需要更新软件包吗?我是否需要更改polyfill和main typescript文件

如果您需要查看这些文件,请参阅以下文件:

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
polyfills.ts:

 // This file includes polyfills needed by Angular and is loaded before the app.
    // You can add your own extra polyfills to this file.
    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/set';
    import 'core-js/es6/reflect';

    import 'core-js/es7/reflect';
    import 'zone.js/dist/zone';

    // If you need to support the browsers/features below, uncomment the import
    // and run `npm install import-name-here';
    // Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html

    // Needed for: IE9
    // import 'classlist.js';

    // Animations
    // Needed for: All but Chrome and Firefox, Not supported in IE9
    // import 'web-animations-js';

    // Date, currency, decimal and percent pipes
    // Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
    // import 'intl';

    // NgClass on SVG elements
    // Needed for: IE10, IE11
    // import 'classlist.js';

谢谢你的帮助

Rj-s的解决方案适合我。运行
npm install-g@angular/cli
进行全局安装,然后运行
npm install@angular/cli
进行本地安装。这是在确保不再引用旧的
angular cli
包之后。如果上述错误仍然存在,请尝试以下操作:希望它能工作

打开angular-cli.json 发现-

“环境”:{“源”:“environments/environment.ts”,“dev”: “environments/environment.ts”、“prod”: “environments/environment.prod.ts”}

并替换为:

“environmentSource”:“environments/environment.ts”,“environments”:{ “dev”:“environments/environment.ts”,“prod”: “environments/environment.prod.ts”}


检查您的服务器或代理(nginx、tomcat等)是否指向应用程序中的
/dist
文件夹。例如,
~/your app name/dist
目录(在您的EC2中)

您不应该在EC2s中构建。假设您在本地构建,然后以递归方式(-r)
scp
/dist
文件夹中的文件保存到EC2中


我的猜测是:在EC2中,服务器没有指向
/dist
文件夹。

ng serve是一个开发web服务器。它不应该用于生产。使用
ngbuild[--prod]
,并使用真实的生产web服务器为dist目录中生成的静态文件提供服务。服务器上不需要node(除非您的后端是用node编写的)、npm和angularcli。谢谢,我将使用ng build。但是,有时我仍然使用此服务器进行开发。我非常希望能够使用ng serve实现此目的。我遇到了同样的问题,但通过在全球和本地升级angular cli得到了解决。很抱歉,我花了一些时间才选择此作为答案。我尝试了全局重新安装,但从未尝试过本地安装。这解决了我的问题。谢谢我删除了angular cli行,因为该软件包已经提到angular/cli,这是最新的。我很高兴它有所帮助。:)