Можно ли запускать приложение angular 8 без сервера (в автономном режиме)? - PullRequest
0 голосов
/ 30 сентября 2019

У меня есть приложение, которое должно работать без обслуживания. Создается HTML-файл, и все, что ему нужно, находится внутри. Я использую jquery с bootstrap (я просто импортирую их непосредственно в html), но я бы хотел перейти на Angular 8, например, потому что проект становится больше. Я считаю, что Angular делает http-запросы на чтение файлов, шаблонов, может быть маршрутизации и т. Д., И, как мы знаем, браузеры не позволяют читать файлы без http-сервера.

ВОПРОС: Существуют ли какие-либо инструкции или инструкции по сборке angular / ng-cli (например, не ленивые загрузочные модули), которые позволяют мне создавать автономное автономное приложение (просто откройте файл html)?

Когда я создаю приложение с ng build --prod, сгенерированные файлы все еще нуждаются в сервере. Я получаю следующую ошибку в Chrome:

Не разрешается загружать локальный ресурс


(некоторые правки, чтобы сделать его более понятным)

Я нахожусь в очень ограниченной и диверсифицированной бизнес-среде ОС, где генерировать двоичный файл будет невозможно. У каждого есть браузер на своем компьютере, и не у всех есть доступ в Интернет. Затем запуск html в автономном режиме является обязательным.

Это процесс: я генерирую html-файл, затем отправляю этот html-файл людям, у которых нет доступа к Интернету, затем они открывают его в браузере, просто нажимая наЭто. Нет http-сервера, на котором они могли бы получить доступ к сгенерированному html.

1 Ответ

1 голос
/ 30 сентября 2019

Если я правильно понимаю, о чем вы пытаетесь спросить, после того, как Angular упакован, вам не нужно ничего для его запуска, поэтому вы можете связать его и использовать как статический веб-сайт в таких местах, как Amazon Web Services S3ведра ("без сервера"). Вы можете читать из файлов 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, но вы не можете записать обратно, так что это не будут данные, которые вы можете обновить, кроме как в памяти (данные будут непостоянными и будут сброшены при перезагрузке). Вы можете бороться с этим до некоторой степени, если вы используете local sessionStorage или localStorage, или даже cookie-файлы, а затем перезаписать свои предварительно загруженные данные, если ваше локальное хранилище заполнено;но в этом случае не будет централизованного управления данными, поэтому это должен быть конкретный вариант использования.

Если вы хотите записывать файлы в файловой системе, я бы посмотрел на рабочий столОболочка приложения для вашего Angular-приложения, такого как Electron (https://electronjs.org/),, но это потребует установки для ваших пользователей.

...