Запуск приложения с угловым 2, созданного локально в Chrome с использованием углового cli без узла сервера

Ответ 1

Первый шаг:

Запустить команду

ng build

или же

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

Второй шаг:

Изменение в index.html

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

Третий шаг:

Поместите все файлы на сервер (может быть htdocs на localhost или на любой сервер)

Надеюсь, это сработает.

Ответ 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

Doubleclick dist/index.html чтобы увидеть результат.

Ответ 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 вместо базового. В этом примере мы используем. (точка) в качестве аргумента

Ответ 4

Простое решение: измените свой href при сборке.

ng build --prod --base-href .

Теперь вы можете дважды щелкнуть файл index.html, и он будет работать.

Вот пример этой работы: https://mattspaulding.github.io/angular-material-starter/

Ответ 5

Вы должны обслуживать папку /dist с помощью HTTP-сервера. Вы не можете обойти это, потому что загрузка файлов локально не позволяет выполнять код по соображениям безопасности.

Сервер не обязательно должен быть чем-то тяжелым, как Express или даже высокопоставленным минималистским, похожим на HapiJS. Встроенный HTTP-сервер узла будет очень хорош. Если у вас уже установлены Apache, nginx или IIS, вы также можете использовать их для обслуживания своего приложения.

EDIT: Я сделал некоторые нравственные поиски и решил предложить решение, которое лично я бы не использовал, но может быть вам подходит: веб-сервер для расширения Chrome

Ответ 6

Все, что вам нужно, - это создать приложение, используя одну строку кода:

ng build --prod --base-href ./

Ответ 7

Я рекомендую использовать Expressjs, почему серверы, как xampp, laragon и т.д., Маршруты не работают, я сделал это так: я создал новую папку с сервером имен, внутри скопировал файл index.js, маршрут был бы "src/assets/server/index.js ",

Содержание 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'));
});

Ответ 8

Удаление <base href="/"> из index.html работало для меня.

Ответ 9

Вы можете добиться чего-то подобного, используя nw.js, например (или электрон). Я сам создал приложение, которое использует угловой 2 локально с nw.js, и оно работает как шарм;)

nwjs.io

Ответ 10

используйте ng serve --open для сборки приложения и запуска веб-сервера