3

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!

3
  • 1
    ng serve is a development web server. It should NOT be used in production. Use ng build [--prod], and use a real, production web server to serve the static files generated in the dist directory. You don't need node (unless your backend is written in node), npm and angular-cli on the server.
    – JB Nizet
    Commented Feb 21, 2017 at 0:16
  • Thanks, I will use ng build for that. However, I still use this server for development purposes sometimes. I would really like to be able to use ng serve for that purpose. Commented Feb 21, 2017 at 0:32
  • I faced same issue but got resolved by upgrading angular-cli globally and locally.
    – Rj-s
    Commented Feb 22, 2017 at 12:35

3 Answers 3

9

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" }

0
5

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.

2
  • Sorry I took a while to choose this as an answer. I tried the global reinstall, but I didn't ever try the local install. That fixed my issue. Thanks! Commented Mar 1, 2017 at 17:00
  • I removed angular-cli line as, the package had already referred to angular/cli which is latest
    – Nazeel
    Commented Apr 17, 2017 at 14:17
1

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.

1
  • This is the better answer though, reduce usage costs for sure. Commented Jul 4, 2022 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.