Anyone using c9 to do the angular2 project

angular2

#1

Hi,
Anyone did angular2 project on C9? I tried couple of times and failed.

Thanks
Eugene


#2

I have had it work, you need to update the node and npm. I have used https://github.com/deeleman/learning-angular2, to get a start. A great book to learn Angular 2
I’m no expert just a hobby users but in this way I have been started and been able to play with Angular 2

/ Johan


#3

Yes, i just have created a new workspace using angular-cli and everything works fine except livereload part.

Which issues did you face ?


#4

I try to do a npm start after cloning https://github.com/deeleman/learning-angular2

I got this error Cannot find module

ah0ha:~/workspace/chapter_01 (master) $ npm start

chapter_01@1.0.0 prestart /home/ubuntu/workspace/chapter_01
tsc

hello-angular.ts(1,27): error TS2307: Cannot find module ‘@angular/core’.
hello-angular.ts(2,27): error TS2307: Cannot find module ‘@angular/platform-browser-dynamic’.
pomodoro-timer.ts(1,27): error TS2307: Cannot find module ‘@angular/core’.
pomodoro-timer.ts(2,27): error TS2307: Cannot find module ‘@angular/platform-browser-dynamic’.

npm ERR! Linux 4.2.0-c9
npm ERR! argv “/home/ubuntu/.nvm/versions/node/v4.5.0/bin/node” “/home/ubuntu/.nvm/versions/node/v4.5.0/bin/npm” "start"
npm ERR! node v4.5.0
npm ERR! npm v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! chapter_01@1.0.0 prestart: tsc
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the chapter_01@1.0.0 prestart script ‘tsc’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the chapter_01 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs chapter_01
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls chapter_01
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/workspace/chapter_01/npm-debug.log


#5

I just got the Angular 2 Quickstart running on c9. :slight_smile:


#6

It seems the lite server starts but I cannot do a preview of the app and it says its not running

ah0ha:~/workspace/quickstart/app (master) $ npm start

angular2-quickstart@1.0.0 start /home/ubuntu/workspace/quickstart
tsc && concurrently “tsc -w” “lite-server”

[1] Did not detect a bs-config.json or bs-config.js override file. Using lite-server defaults…
[1] ** browser-sync config **
[1] { injectChanges: false,
[1] files: [ ‘./**/*.{html,htm,css,js}’ ],
[1] watchOptions: { ignored: ‘node_modules’ },
[1] server: { baseDir: ‘./’, middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] ---------------------------------------
[1] Local: “http://localhost:3000
[1] External: “http://172.17.200.197:3000
[1] ---------------------------------------
[1] UI: “http://localhost:3001
[1] UI External: “http://172.17.200.197:3001
[1] ---------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files…
[1] 16.09.19 23:55:05 200 GET /index.html
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/app.component.spec.js
[1] [BS] File changed: app/app.module.js
[1] [BS] File changed: app/main.js
[1] [BS] File changed: e2e/app.e2e-spec.js
[0] 11:55:08 PM - Compilation complete. Watching for file changes.


#7

i’m trying to get the “5 minute quickstart” running on cloud9. did you do the “5 min” one or clone the quick start source to get it working?

I’m having trouble getting my npm start to work in localhost through that walkthrough


#8

I’ve just created a new workspace for an angular2 app. Node version v6.9.4 (npm v3.10.10).

On scaffolding an app using the angular CLI, the app does not seem to run (using ng serve).

This is what i see -

** NG Live Development Server is running on http://localhost:8080. **
Hash: 358c12bf65456678769769
Time: 12236ms
chunk {0} main.bundle.js, main.bundle.map (main) 4.54 kB {2} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.map (styles) 9.96 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.84 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: bundle is now VALID.

But the app does not run on the standard url, or port 8080 or 4200 … am i missing something?
Thanks


#9

I got Angular 2 running this week on a Blank Workspace using Angular CLI. It displays the “app works!” message (ie, their hello world example).

To set this up run the following in the c9 console:
npm install -g angular-cli
ng new myapp
ng serve --host 0.0.0.0 --port 8080 --live-reload-port 8081


#10

Works perfect now, thanks @developeralex


#11

Well I completely failed trying to run Angular 2 on C9. Perhaps this is not the best place for a beginner to learn Angular 2? :unamused:


#12

To create an Angular 2 project on C9 do the following:

  • Create a blank workspace.
  • Get the latest node.js (to keep ng2 CLI happy).
  • nvm install node
  • nvm use 7.4.0
  • nvm alias default v7.4.0
  • Update npm.
  • npm install -g npm
  • Get the Angular 2 CLI (Command Line Interface).
  • npm install -g @angular/cli
  • Old way (don’t do this anymore: npm install -g angular-cli@latest)
  • Create an Angular 2 app using the CLI.
  • ng new myapp
  • Spin up Angular 2.
  • ng serve --host 0.0.0.0 --port 8080 --live-reload-port 8081
  • View your Angular 2 app running.
  • Press the Preview button on the top of the C9 window.

@JohnnyBizzel I hope the above helps


Angularjs 2 project development with angular-cli
#13

@developeralex - I can’t get that to work, despite navigating what I think is one minor exception to the steps that you posted ; it seems nvm install node installs the latest version which as of this writing is 7.6.0, and it seems it automatically uses it once installed. I changed the default using nvm alias default v.7.6.0

However when I get to the spin-up Angular2 step, it complains that I’m not in an AngularCLI so I can’t run it. I opened command prompts from what I thought was the proper directory and tried again, to no avail. :frowning: I’d really like these steps to work because they make the most sense. I don’t know what I’m doing wrong…


#14

Angular CLI just went into rc0 (release candidate) over the past weekend. So use the following to install instead:

  • npm install -g @angular/cli

For me - I did a fresh ng new – then copied my files (from the previous cli) into the new one. This is due to the slight changes/improvements to the files generated by ng new.


#15

Please use the Angular CLI to get an Angular project running - instead of the Quickstart. See my link:


#16

The quickest way for me was decribed in this video: https://www.youtube.com/watch?v=0eaWoJsanSI

  1. Create a blank workspace
  2. Paste this into Terminal: source <(curl -s https://angularbootcamp.com/c9a2cli)
  3. Start App with: ng serve --host 0.0.0.0 --port 8080

#17

solution for me:
open node_modules/webpack-dev-server/lib server.js
edit line 451 change false to true
edit line 473 change false to true
then cd yourproject
then run ng serve --host 0.0.0.0 35.187.1.119

this allows “public host name” of listening address and the allowedHost === hostname
must accept that public hostname and allowedHost are exactly ===
the ip in the cmd is the PUBLIC ip of c9
I am using ubuntu, angular/cli latest


#18

You may need to add the public-host command option now:

ng serve --host 0.0.0.0
–port 8080
–live-reload-port 8081
–public-host=http://projectname.c9users.io/


#19

Thanks a lot,

It looks like –public-host is the parameter which does the magic to be able to publish. It worked for me this way:

ng serve --host $IP --port $PORT --public-host http://project_name-user_name.c9users.io


#20

I got error: ‘ng: command not found’ and had to do ‘npm link @angular/cli’ before using ng (in case it helps anyone)