Angular 在 Chrome 中不起作用

Question

I have created an Angular-cli project in WebStorm and when I run the project by click on Run icon I can see my project in http://127.0.0.1:4200/ or http://localhost:4200/ but when I copy these links into Chrome I can not see my project and it seems that the Chrome browser does not work. I see all related pages but I could not find a solution.

Answer 1

Do this...

run your app using 'ng serve'

if the app is not opened on browser

load the app using http://127.0.0.1:4200/

Enter ctrl+shift+i to open the browser console check whether there is an error if found debug it from your app.

if it is not work try with bellow

you may install cors plugin from chrome web store and active cros origin resorce sharing and re-try.

best wishes.

Answer 2

I have the same issue. After running ng serve and open web page in Chrome it displays:

This page isn't working.

In Edge the application works normally.

Even in IE 11 I get response and display but Chrome somehow ...

Added:

Ok I've managed to find a workaround for Chrome. When using http://localhost:4200 in Chrome it won't work. But using 127.0.0.1:4200 works,

where 127.0.0.1 is loop back address.

Added:

After some experimenting it appears to be Chrome extension problem. Because when I opened the page in incognito mode then it worked in Chrome as well.

Answer 3

Use your local IP address instead of local host. It worked for me ex: http://10.0.1.30:4200

Answer 4

In addition to the solution methods above, the beginning of the applicationUrl can also be checked if it is http or https caused from auto conversion by the browser. Because Google Chrome might attempt to connect to HTTPs, but there is no need to enable HTTPs for IIS Express settings.