使用angular-cli在没有节点服务器的情况下运行本地构建在Chrome上的角度2应用程序

Question

我将非常精确地使我的Angular 2问题.

我正在使用:

Angular 2,angular-cli:1.0.0-beta.15,(webpack building)节点:6.4.0,os:linux x64

2.我想要实现的目标:

我想以一种方式构建我的项目,在构建之后(ng build project-name)我获得了我的Angular 2应用程序的静态文件,我可以直接从chrome运行而不使用ng服务或节点服务器.我只想双击index.html并在本地运行应用程序.

3.同时,当我双击生成的index.html时,我在chrome浏览器控制台输出中获得的是:

file:///inline.js无法加载资源:net :: ERR_FILE_NOT_FOUND文件:///styles.b52d2076048963e7cbfd.bundle.js无法加载资源:net :: ERR_FILE_NOT_FOUND文件:///main.c45bb457f14bdc0f5b96.bundle.js无法加载资源:net :: ERR_FILE_NOT_FOUND文件:///favicon.ico无法加载资源:net :: ERR_FILE_NOT_FOUND

4. 据我所知,这与路径有关.构建和捆绑的应用程序找不到正确的路径.所以我的问题是我应该在哪里以及如何更改我的应用程序或任何构建配置文件中的路径,以便我的应用程序像我希望的那样以我在第2点中描述的方式工作

5. 提前感谢您对该主题的直接和完整答案,因为其他主题并未解释该主题的全部范围.

Answer 1

第一步:

运行命令

ng build

要么

ng build -prod (then it will compact all files for production version)

第二步:

index.html中的变化

<base href="/"> to <base href="./">

第三步:

将所有文件放入服务器(可能是localhost或任何服务器中的htdoc)

希望它能奏效.

Answer 2

解决方案,而服务器:

第一步:

变更index.html:

去掉 <base href="/">

第二步:

变更app.module.ts:

import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
   providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]
})

第三步:

运行命令

ng build

要么

ng build -prod

双击dist/index.html以查看结果.

Answer 3

如果您正在使用Angular-Cli,则在构建项目后无需修改index.html.根据Angular-CLi github文档https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml, 您可以在构建项目时简单地修改参数:

    Example: ng build --prod --base-href .

实际用法是:

ng build --base-href <base>

你可以简单地引入一个特定的URL而不是base.在这个例子中我们使用.(点)作为参数

Answer 4

一个简单的解决方案:在构建时更改基础href.

ng build --prod --base-href .

现在您可以双击该index.html文件,它将起作用.

以下是此工作的一个示例:https://mattspaulding.github.io/angular-material-starter/

Answer 5

您必须/dist使用HTTP服务器为该文件夹提供服务。您无法解决此问题，因为出于安全原因，本地加载文件不允许执行代码。

服务器不必像Express那样繁重，甚至不必像Ha​​piJS这样功能强大的极简主义者。内置的Node http服务器会很好。如果您已经设置了Apache，nginx或IIS，则也可以使用它们来服务您的应用程序。

编辑：我做了一些道德搜索，并决定提供一个我个人不会使用的解决方案，但可能更适合您：适用于Chrome扩展程序的Web服务器