Javascript 在没有节点服务器的情况下使用 angular-cli 运行在 Chrome 本地构建的 angular 2 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39771458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Running an angular 2 application built locally on Chrome using angular-cli without a node server
提问by BartB
I will make my Angular 2question very precise.
我会让我的Angular 2问题非常精确。
1. I am using:
1.我正在使用：
Angular 2, angular-cli: 1.0.0-beta.15, ( webpack building ) node: 6.4.0, os: linux x64
Angular 2, angular-cli: 1.0.0-beta.15, ( webpack building ) node: 6.4.0, os: linux x64
2. What I want to achieve:
2.我想达到的目标：
I want to build my project in a way that after the build ( ng build project-name )I get static files of my Angular 2 application, which I can run directly from chrome without using ng serveor the node server. I just want to double click index.html and run the app locally.
我想以一种方式构建我的项目，在构建之后（ ng build project-name ）我得到我的 Angular 2 应用程序的静态文件，我可以直接从 chrome 运行，而不使用ng serve或节点服务器。我只想双击 index.html 并在本地运行该应用程序。
3. Meanwhile, what I get in the chrome browser console output when I double click the generated index.html is:
3. 同时，当我双击生成的 index.html 时，我在 chrome 浏览器控制台输出中得到的是：
file:///inline.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///styles.b52d2076048963e7cbfd.bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///main.c45bb457f14bdc0f5b96.bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///favicon.ico Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///inline.js 无法加载资源：net::ERR_FILE_NOT_FOUND file:///styles.b52d2076048963e7cbfd.bundle.js 无法加载资源：net::ERR_FILE_NOT_FOUND file:///main.c45bb457f14bdc0f5b96加载资源失败：net::ERR_FILE_NOT_FOUND file:///favicon.ico 加载资源失败：net::ERR_FILE_NOT_FOUND
As I understand this is related to paths. The built and bundled application cannot find the right paths. So my question is whereand howI should change the pathsin my app or in any build configuration filesin order for my app to work like I would like it to work in the way I have described in point number 2
Thank you in advance for a direct and full answer on that topic, because other topics are not explaining the full scope on that subject.
据我了解，这与路径有关。构建和捆绑的应用程序找不到正确的路径。所以我的问题是我应该在哪里以及如何更改我的应用程序或任何构建配置文件中的路径，以便我的应用程序像我希望它以我在第 2 点中描述的方式工作一样工作
预先感谢您对该主题的直接而完整的回答，因为其他主题并未解释该主题的全部范围。
回答by sabuz
First Step:
第一步：
Run the command
运行命令
ng build
or
或者
ng build -prod (then it will compact all files for production version)
Second Step:
第二步：
Change in index.html
index.html 中的更改
<base href="/"> to <base href="./">
Third Step:
第三步：
Put all files into server(may be htdocs in localhost or any server)
将所有文件放入服务器（可能是本地主机或任何服务器中的 htdocs）
Hopefully it will work.
希望它会起作用。
回答by Jak?a Ba?i?
Solution without server:
没有服务器的解决方案：
First Step:
第一步：
Change in index.html:
变化index.html：
remove <base href="/">
消除 <base href="/">
Second Step:
第二步：
Change in app.module.ts:
变化app.module.ts：
import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from '@angular/common';
@NgModule({
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: LocationStrategy, useClass: HashLocationStrategy }
]
})
Third Step:
第三步：
Run the command
运行命令
ng build
or
或者
ng build -prod
Doubleclick dist/index.htmlto see the result.
双击dist/index.html查看结果。
回答by Nelly Sattari
If you're using Angular-Cli you don't need to amend index.html after building the project. As per Angular-CLi github document https://github.com/angular/angular-cli#base-tag-handling-in-indexhtmlyou can simply modify argument while you're building the project:
如果您使用的是 Angular-Cli，则无需在构建项目后修改 index.html。根据 Angular-CLi github 文档https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml，您可以在构建项目时简单地修改参数：
Example: ng build --prod --base-href .
The actual Usage is:
实际用法是：
ng build --base-href <base>
you can simply introduce a specific url instead of base. In this example we use . (dot) as an argument
你可以简单地引入一个特定的 url 而不是 base。在这个例子中，我们使用 . （点）作为参数
回答by Matt
A simple solution: Change your base href when you build.
一个简单的解决方案：在构建时更改 base href。
ng build --prod --base-href .
Now you can double click the index.htmlfile and it will work.
现在您可以双击该index.html文件，它将起作用。
Here is an example of this working: https://mattspaulding.github.io/angular-material-starter/
这是这个工作的一个例子：https: //mattspaulding.github.io/angular-material-starter/
回答by gelliott181
You must serve the /distfolder using an HTTP server. You can't get around this because loading files locally doesn't allow code execution for security reasons.
您必须/dist使用 HTTP 服务器为文件夹提供服务。您无法解决这个问题，因为出于安全原因，在本地加载文件不允许执行代码。
The server doesn't have to be something heavy like Express or even a highly featured minimalist one like HapiJS. The built in Node http-server will do just fine. If you've already got Apache, nginx, or IIS set up you can also use them to serve your app.
服务器不必像 Express 那样沉重，甚至不必像 HapiJS 那样具有高度特色的极简主义。内置的 Node http-server 就可以了。如果您已经设置了 Apache、nginx 或 IIS，您还可以使用它们来为您的应用程序提供服务。
EDIT: I did some moral searching and decided to offer up a solution I personally wouldn't use, but may be a good fit for you: Web Server for Chrome Extension
编辑：我做了一些道德搜索，并决定提供一个我个人不会使用的解决方案，但可能很适合你：Chrome 扩展的 Web 服务器
回答by Nikolay_R
All you need is to build your app using this one line of code:
您所需要的只是使用这一行代码构建您的应用程序：
ng build --prod --base-href ./
回答by achola
Removing <base href="/">from index.htmlworked for me.
<base href="/">从index.html为我工作中删除。
回答by Wilder Perozo
I recommend use Expressjs, why servers how xampp, laragon, etc... the routes not work well, I did it like that: I created new folder with name server, inside copied an file index.js, the route would be "src/assets/server/index.js" ,
我推荐使用 Expressjs，为什么服务器如何 xampp、laragon 等......路由不能正常工作，我是这样做的：我创建了一个带有名称服务器的新文件夹，在里面复制了一个文件index.js，路由将是“src /assets/server/index.js" ,
Index.js content
Index.js 内容
var express = require('express'),
path = require('path'),
fs = require('fs');
var app = express();
var staticRoot = __dirname + '/../../';
app.set('port', (process.env.PORT || 80));
app.use(express.static(staticRoot));
app.use(function(req, res, next){
var accept = req.accepts('html', 'json', 'xml');
if(accept !== 'html'){
return next();
}
var ext = path.extname(req.path);
if (ext !== ''){
return next();
}
fs.createReadStream(staticRoot + 'index.html').pipe(res);
});
app.listen(app.get('port'), function() {
console.log('app running on port', app.get('port'));
});In package.json, inside the root of project
在 package.json 中，在项目的根目录中
{
"dependencies": {
"express": "4.13.4"
}
}later, run in console command ng build prodand run
稍后，在控制台命令ng build prod 中运行并运行
node dist/assets/server/
节点分布/资产/服务器/
this command execute an express server, indicating the direction of file config our server, on this occasion, the file index.js preconfigured
该命令执行一个express server，指示文件配置我们的服务器的方向，此时预配置的文件index.js
p.s: sorry for my bad english, I am learning
ps：抱歉我的英语不好，我正在学习
回答by John Khbeis
use ng serve --open to build the application and start a web server
使用 ng serve --open 构建应用程序并启动 Web 服务器
回答by kristóf baján
You can achieve something like this using nw.js for example (or electron). I created an app myself that uses angular 2 locally with nw.js and it works like a charm ;)
例如，您可以使用 nw.js（或电子）来实现类似的功能。我自己创建了一个应用程序，它在本地使用 angular 2 和 nw.js，它的工作原理非常棒；)
nwjs.io
网易网
