Question

I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.

Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?

So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.

The console tells me:

GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND

The generated index.html looks something like this:

<!doctype html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="app/8d57a97f.app.css"/>
  </head>

  <body ng-app="myApp"> 
    <!-- some functionality... -->  
    <script src="app/47ab0f3e.vendor.js"></script>
    <script src="app/01b9b8a8.app.js"></script>
  </body>

</html>

The reason why I do this:

I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.

So this is my first attempt to solve this issue.

Answer 1

问题是标题中的<base href="/">。

可在此处找到解释（Loading local file in browser referenced css or js）。

grunt serve VS opening index.html in browser

1 个答案: