CODEWITHSUNDEEP
angularamazon-web-servicesamazon-ec2web-hosting
Logan Kitchen
Logan Kitchen

Reputation: 774

ng serve Will Not Work on EC2 Server

I am having a problem with a website created using Angular2. I built the framework with Angular CLI. I have tested it on my local machine thoroughly and it works perfectly. "ng serve" hosts on port 4200 and the entire page loads and functions as it should. All of my documents pass ts lint as well. I ran "ng lint" and recieved no warnings or errors.

However, when I upload it to my server "ng serve" will not work. My server is a Bitnami image created on an EC2 node through Amazon Web Services (AWS).I installed nodejs, npm, and Angular CLI to the server and checked to make sure the versions were up to date. All of them are.

When I first tried the "ng serve" command I got this error:

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"

I changed my angular-cli.json to reflect the "After:" section and ran the "ng serve" command again. (I don't think that was the issue, but I thought it was relevant information).

The current error is this: 

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

As far as I can tell there is some newLine character in both my main.ts and my polyfill.ts files. I have looked them over and found nothing. I didn't change either file. These files were generated by the angular cli and I am not really comfortable enough to modify them on my own.

How can I resolve these errors? Do I need to update a package? Do I need to change my polyfill and main typescript files?

Here are those files if you need to look them over:

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';

Thanks for the help!

Upvotes: 3

Views: 5016

Answers (3)

Gene
Gene

Reputation: 11295

Check if your server or proxy (nginx, tomcat, etc) is pointed at the /dist folder in your app. For example, ~/your-app-name/dist directory (in your EC2).

You are not suppose to be building in the EC2s. You're suppose to build locally, and then recurisively (-r) scp the files inside /dist folder into the EC2.

My guess is this: In the EC2 you doesn't have the server pointed at the /dist folder.

Upvotes: 1

Neo Soko
Neo Soko

Reputation: 137

If the error above still persist then try this: hope it works.

open angular-cli.json find-

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

and replace with:

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

Upvotes: 9

Jason Sultana
Jason Sultana

Reputation: 1177

Rj-s's solution worked for me. Run npm install -g @angular/cli to install globally and then npm install @angular/cli to install locally. That's after making sure you're not referencing the old angular-cli package anymore.

Upvotes: 5

Related Questions