运行ng build时，index.html什么都不做? [英] When running ng build, the index.html does nothing?

问题描述

我有一个Angular 5项目，并且在运行ng serve时可以正常工作，但是我想将其发送给设计人员以进行进一步的工作.运行ng build后，打开index.html会导致页面完全空白.

I have an Angular 5 project, and it works fine when running ng serve, but I want to send it to a designer to work on it further. After running ng build, opening the index.html results in a completely blank page.

还有其他需要做的事情吗?在我的environment.ts文件夹中，将生产设置为true.请让我知道是否有一种更简单的方法来发送仿真或如何修复此仿真，谢谢！

Is there something else I need to do? In my environment.ts folder, I have production set to true. Please let me know if there is an easier way to send a simulation or how to fix this one, thanks!

推荐答案

最有可能是<base href="">设置.假设我们有一个名为angular cli的项目，名为"foo".当我们运行ng build --prod时，默认情况下，Angular将输出dist/foo且没有任何终端错误.两件事:

Most likely it's the <base href=""> settings. Let's say we have an angular-cli-created project called, "foo". When we run ng build --prod, by default, Angular will output dist/foo without any terminal errors. A couple of things:

1. 这需要放在服务器上，而仅打开index.html不能正常工作.

1. This needs to be put on a server and won't work by simply opening up index.html.

我们的<base href="">需要反映如何将其放置在服务器上(即，在服务器上的其他项目/目录旁边添加"foo"文件夹，或将foo的所有内容转储到服务器的根目录中).

Our <base href=""> needs to reflect how this is being put on a server (i.e., adding the 'foo' folder alongside other projects/directories on the server or dumping all of foo's contents in the server's root).

因此，对于我们的示例，假设我们要将'foo'目录复制到其他项目的本地服务器(如mamp/wamp)中.我们这样做，请转到localhost/foo和voila！仍然是空白页.如果您查看(Chrome的)开发控制台，很可能会看到404缺少样式/js.打开索引文件，将<base href="/">更改为<base href="/foo/">，现在它应该可以正常显示了.您还可以按原样保留<base href="/">并将"foo"添加到所有引发错误的css/js文件路径中，并且它将起作用.

So, for our example, let's say we want to copy the 'foo' directory onto a local server like mamp/wamp with other projects. We do that, go to localhost/foo and voila! Still a blank page. If you look at (Chrome's) dev console, you'll most likely see 404s for missing styles/js. Open up the index file and change the <base href="/"> to <base href="/foo/"> and now it should show up without issues. You could also leave <base href="/"> as is and tack 'foo' onto all the css/js file paths that are throwing errors and it would work.

现在我们知道了问题所在，我们如何在项目中进行设置?在项目的根目录中，让我们打开angular.json(NG6)并修改此位以添加baseHref和deployUrl键/值:

Now that we know what the issue is, how can we set this in the project? In the root of your project, let's open up angular.json (NG6) and modify this bit to add the baseHref and deployUrl key/values:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref" : "/foo/",
        "deployUrl": "/foo/",

现在，当我们保存并执行另一个构建，并替换服务器上的先前构建时，一切都会显示出来.您也可以在构建时使用标志进行设置.从文档中:

Now, when we save and do another build, and replace the previous on the server, everything should show up. You can also set this up with a flag on build. From the docs:

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/

这篇关于运行ng build时，index.html什么都不做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！