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

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

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

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

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

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

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

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

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

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

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

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.

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

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 )

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

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

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

+++ Rick ---