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!
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.