运行 angular 8 个应用程序可以在没有服务器的情况下(离线)吗?
Is possible to run angular 8 app without a server (offline)?
我有一个应用程序必须 运行 不服务。生成一个 html 文件,它需要的一切都在里面。我正在使用 jquery 和 bootstrap(我只是直接将它们导入 html),但我想更改为 Angular 8,例如,因为项目越来越大。我相信 Angular 发出 http 请求来读取文件、模板、可能的路由等,并且我们知道,浏览器不允许在没有 http 服务器的情况下读取文件。
问题:是否有任何 angular/ng-cli 构建说明或开发指南(例如不延迟加载模块)允许我构建离线独立应用程序(只需打开 html 文件) ?
当我使用 ng build --prod
构建应用程序时,生成的文件仍然需要服务器。我在 chrome 上收到以下错误:
Not allowed to load local resource
(一些编辑使其更清晰)
我处在一个非常严格和多样化的 OS 商业环境中,不可能生成二进制文件。每个人的计算机上都有浏览器,但并非每个人都可以访问互联网。然后 运行 使 html 离线是强制性的。
这是过程:我生成一个 html 文件,然后我将这个 html 文件发送给无法访问互联网的人,然后他们只需单击它就可以在浏览器中打开它.没有可以访问生成的 html.
的 http 服务器
如果我正确理解你想问的是什么,一旦 Angular 被打包,你不需要任何东西来 运行 它,因此你可以将它捆绑并作为Amazon Web Services S3 存储桶 ("serverless") 等地方的静态网站。您可以在断开连接的环境中读取 JSON 个文件,只要它们在项目本地即可。它可能类似于以下内容:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IDataFile } from '../interfaces/data-file.interface';
@Injectable({
providedIn: 'root'
})
export class MyDataService {
static data: IDataFile;
constructor(private http: HttpClient) { }
load() {
const jsonFile = `assets/data/my-data.json`;
return new Promise<void>((resolve, reject) => {
this.http.get(jsonFile).toPromise().then((response: IDataFile) => {
MyDataService.data = <IDataFile>response;
resolve();
}).catch((response: any) => {
reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
});
});
}
}
然后您可以在启动时将数据加载到服务中,方法是在导入后将方法添加到您的 app.module.ts 中,然后在提供者下添加您的服务:
export function initializeApp(data: MyDataService ) {
return () => data.load();
}
...
providers: [
MyDataService ,
{
provide: APP_INITIALIZER,
useFactory: initializeApp,
deps: [MyDataService], multi: true
},
]
然后,您可以通过 MyDataService.data.somedata
在应用程序的任何位置使用您的服务。
所有这一切的主要警告是,正如我所说,您可以从 JSON 文件中读取,但您不能写回它,所以这不是您可以更新的数据,除了在内存中(数据将是非持久性的,并会在重新加载时重置)。如果您使用本地 sessionStorage 或 localStorage,甚至 cookie,您可以在某种程度上解决这个问题,然后如果您的本地存储已填充,则覆盖预加载的数据;但在这种情况下,不会有数据的中央管理,因此它必须是一个特定的用例。
如果您想写入文件系统上的文件,我会为您的 Angular 应用程序查看桌面应用程序包装器,如 Electron (https://electronjs.org/),但这需要安装您的用户。
我有一个应用程序必须 运行 不服务。生成一个 html 文件,它需要的一切都在里面。我正在使用 jquery 和 bootstrap(我只是直接将它们导入 html),但我想更改为 Angular 8,例如,因为项目越来越大。我相信 Angular 发出 http 请求来读取文件、模板、可能的路由等,并且我们知道,浏览器不允许在没有 http 服务器的情况下读取文件。
问题:是否有任何 angular/ng-cli 构建说明或开发指南(例如不延迟加载模块)允许我构建离线独立应用程序(只需打开 html 文件) ?
当我使用 ng build --prod
构建应用程序时,生成的文件仍然需要服务器。我在 chrome 上收到以下错误:
Not allowed to load local resource
(一些编辑使其更清晰)
我处在一个非常严格和多样化的 OS 商业环境中,不可能生成二进制文件。每个人的计算机上都有浏览器,但并非每个人都可以访问互联网。然后 运行 使 html 离线是强制性的。
这是过程:我生成一个 html 文件,然后我将这个 html 文件发送给无法访问互联网的人,然后他们只需单击它就可以在浏览器中打开它.没有可以访问生成的 html.
的 http 服务器如果我正确理解你想问的是什么,一旦 Angular 被打包,你不需要任何东西来 运行 它,因此你可以将它捆绑并作为Amazon Web Services S3 存储桶 ("serverless") 等地方的静态网站。您可以在断开连接的环境中读取 JSON 个文件,只要它们在项目本地即可。它可能类似于以下内容:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IDataFile } from '../interfaces/data-file.interface';
@Injectable({
providedIn: 'root'
})
export class MyDataService {
static data: IDataFile;
constructor(private http: HttpClient) { }
load() {
const jsonFile = `assets/data/my-data.json`;
return new Promise<void>((resolve, reject) => {
this.http.get(jsonFile).toPromise().then((response: IDataFile) => {
MyDataService.data = <IDataFile>response;
resolve();
}).catch((response: any) => {
reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
});
});
}
}
然后您可以在启动时将数据加载到服务中,方法是在导入后将方法添加到您的 app.module.ts 中,然后在提供者下添加您的服务:
export function initializeApp(data: MyDataService ) {
return () => data.load();
}
...
providers: [
MyDataService ,
{
provide: APP_INITIALIZER,
useFactory: initializeApp,
deps: [MyDataService], multi: true
},
]
然后,您可以通过 MyDataService.data.somedata
在应用程序的任何位置使用您的服务。
所有这一切的主要警告是,正如我所说,您可以从 JSON 文件中读取,但您不能写回它,所以这不是您可以更新的数据,除了在内存中(数据将是非持久性的,并会在重新加载时重置)。如果您使用本地 sessionStorage 或 localStorage,甚至 cookie,您可以在某种程度上解决这个问题,然后如果您的本地存储已填充,则覆盖预加载的数据;但在这种情况下,不会有数据的中央管理,因此它必须是一个特定的用例。
如果您想写入文件系统上的文件,我会为您的 Angular 应用程序查看桌面应用程序包装器,如 Electron (https://electronjs.org/),但这需要安装您的用户。