AngularJS
Todo Angular 2.0 Sample Application
Gravatar is a globally recognized avatar based on your email address. Todo Angular 2.0 Sample Application
  Marcel DESMET
  All
  Feb 26, 2017 @ 03:36pm

Hello,

Reading the help but have problems on step 8 Angular project doesn't link to the server . The rest process is ok and return data out of the Angular application

The app/todo/todo.ts was updated as show step 8

http://west-wind.com/webconnection/docs/_4q40nfesr.htm

The only difference is that the todo was setup not on web level but web/todo

Marcel

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Feb 27, 2017 @ 11:49am

Make sure you enable the CORS directives in the server since requests effectively run cross site (ie. from one port to another which is considered a new site). This is covered at the end in Step 7.

Otherwise you're going to have to be more specific when you say it doesn't 'link' to the server.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Feb 27, 2017 @ 01:00pm

Yes Cors directives are ok in the rest process class

The server reply's when navigate to todo/todos.td on the localhost and on the web

[

    {
        "title": "Load up sailing gear",
        "description": "Load up the car, stock up on food.",
        "entered": "2017-02-26T21:35:29Z",
        "completed": false
    },
    {
        "title": "Get on the road out East",
        "description": "Get in the car and drive until you find wind",
        "entered": "2017-02-26T21:35:29Z",
        "completed": false
    },
    {
        "title": "Wait for wind",
        "description": "Arrive on the scene only to find no wind",
        "entered": "2017-02-26T21:35:29Z",
        "completed": false
    },
    {
        "title": "Pray for wind",
        "description": "Still waiting!",
        "entered": "2017-02-26T21:35:29Z",
        "completed": false
    },
    {
        "title": "Sail!",
        "description": "Score by hitting surprise frontal band and hit it big!",
        "entered": "2017-02-26T21:35:29Z",
        "completed": false
    }

]

Here is the code I changed in Todo.ts ( myserver is not the real name .. ) I also change the error message and the message I see when running the application is "failed to get todo items" without the "!!"

loadTodos() { this.http.get("http://myserver/todo/todos.td") .subscribe( (response) => { this.todos = response.json(); }, (response) => { this.showError("failed to get todo items !!"); }); }

Thanks Marcel

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Feb 27, 2017 @ 03:31pm

What code?

Are you sure you're hitting the right URL? Make sure you step through the code or else hardcode the URL to ensure you're hitting the right location.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Feb 27, 2017 @ 04:17pm

Yes the Url is correct, here is the code

loadTodos() {
this.http.get("http://myserver/myproject/todo/todos.td")
    .subscribe( (response) => {
    	this.todos = response.json();
    }, (response) => {
    	this.showError("failed to get todo items !!");
    });
    }

Please note I don't see the "!!" I added ??

The only difference with you sample is the web.config the *.td handler was added in myproject/web.config and I remove the web.config in the todo directory because he was in conflict

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Feb 28, 2017 @ 02:10pm

The Angular application has to be recompiled or you have to be running the development server. It looks like your code is not recompiling.

Make sure the development server is running (see first step) by running npm start and then navigating to the localhost:3000 location.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Feb 28, 2017 @ 02:55pm

Thanky you Rick missing the step 1 with Angular sound's good to me ??

So it seems we have to be connected now to compile applications npm has problems with my router to connect registry.npmjs.org on port 443 ..

Marcel

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Mar 1, 2017 @ 01:03am

Not to compile, but to intially download packages in order to set up the build system. Once everything is installed you don't need an Internet Connection.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Mar 1, 2017 @ 04:02am

It seems the "this.http" is the problem ..

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Marcel DESMET
  Mar 1, 2017 @ 12:09pm

Copy again the "Angular2-Project-Template" and now compilation is ok but not the data update, back to the Feb 27, 2017 @ 04:17pm situation ...

http://localhost:3000/. gives a Welcome to Angular seed in the browser

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Mar 1, 2017 @ 12:51pm

You probably need to import the Http component or you didn't declare the property on your component. Look at the constructor in the example. The public or private keyword on a parameter makes the parameter a property of the class.

Look at the Dependency Injection section in this topic:

http://west-wind.com/webconnection/docs/_4qf13io39.htm

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Mar 1, 2017 @ 01:06pm

Yes I check it before and this is done in your todoservice.ts from your sample, I only try to use your sample as it is.

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Mar 1, 2017 @ 02:40pm

Don't know then. Code is clearly not working if you have the constructor set up correctly. There must be something else happening - like you're not in the right scope. Try creating a variable of the http object out side of the arrow function and then reference that object instead of this.http.

+++ rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Mar 2, 2017 @ 03:51pm

Thank you Rick !

Redo the complete installation with node.js 7.7.1 ( first install was done with v6.10.0 and npm 3.10.10)

Now it works from everywhere localhost and web..

It seems there are some presentation problems with IE11 ( it's ok with firefox and chrome )

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Mar 2, 2017 @ 03:59pm

The node version shouldn't make a difference especially since the install isn't that new in terms of components used.

What issues do you see with IE 11?

Pre IE 10 will be problematic for the interactive inputs, but with anything IE 11 now unsupported by Microsoft old content is now being aborted by all major frameworks including even jquery (3.x).

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Marcel DESMET
  Rick Strahl
  Mar 3, 2017 @ 01:11pm

Just compare Firefox ( on the left) and IE with your home component

Gravatar is a globally recognized avatar based on your email address. re: Todo Angular 2.0 Sample Application
  Rick Strahl
  Marcel DESMET
  Mar 3, 2017 @ 01:49pm

Hmmm... that's an Angular issue I guess in the date formatting filter expression. Might be fixed by a newer version of Angular.

+++ Rick ---

© 1996-2017