web-dev-qa-db-fra.com

Exécution d'une application angular 2 construite localement sur Chrome utilisant angular-cli sans serveur de noeud)

Je vais rendre ma Angular 2 question très précise.

1. J'utilise:

Angular 2, angular-cli: 1.0.0-beta.15, (construction du pack web): 6.4.0, os: linux x64

2. Ce que je veux réaliser:

Je veux construire mon projet d'une manière qui après la construction (ng build project-name) J'obtiens des fichiers statiques de mon Angular 2 application, que je peux exécuter directement depuis chrome sans utiliser ng serve ou le serveur de noeud. Je veux juste double-cliquer sur index.html et exécuter l'application localement.

. Pendant ce temps, ce que j'obtiens dans la sortie de la console du navigateur chrome lorsque je double-clique sur le fichier index.html généré est:

fichier: ///inline.js Échec de chargement de la ressource: net :: ERR_FILE_NOT_FOUND fichier: ///styles.b52d2076048963e7cbfd.bundle.js Échec du chargement de la ressource: net :: ERR_FILE_NOT_FOUND fichier: ///main.c45bb457f14bdc0f5b96.b Impossible de charger la ressource: net :: ERR_FILE_NOT_FOUND fichier: ///favicon.ico Impossible de charger la ressource: net :: ERR_FILE_NOT_FOUND

  1. Si je comprends bien, cela est lié aux chemins. L'application intégrée et intégrée ne trouve pas les bons chemins. Donc ma question est où et comment je devrais changer les chemins dans mon application ou dans n'importe quel construire des fichiers de configuration dans pour que mon application fonctionne comme je voudrais qu'elle fonctionne de la manière que j'ai décrite dans point numéro 2

  2. Merci d'avance pour une réponse directe et complète sur ce sujet, car d'autres sujets n'expliquent pas toute la portée de ce sujet.

javascriptangularwebpackember-cliangular-cli
25
BartB

Première étape:

Exécutez la commande

ng build

ou

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

Deuxième étape:

Changement dans index.html

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

Troisième étape:

Mettre tous les fichiers sur le serveur (peut être htdocs dans localhost ou n'importe quel serveur)

Espérons que cela fonctionnera.

25
sabuz

Solution sans serveur:

Première étape:

Changer index.html:

retirer <base href="/">

Deuxième étape:

Changer app.module.ts:

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

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

Troisième étape:

Exécutez la commande

ng build

ou

ng build -prod

Double clic dist/index.html pour voir le résultat.

22
Jakša Bašić

Si vous utilisez Angular-Cli, vous n'avez pas besoin de modifier index.html après la construction du projet. Selon le document github Angular-CLi https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml vous pouvez simplement modifier l'argument pendant que vous construisez le projet:

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

L'utilisation réelle est:

ng build --base-href <base>

vous pouvez simplement introduire une URL spécifique au lieu de la base. Dans cet exemple, nous utilisons. (point) comme argument

10
Nelly Sattari

Une solution simple: changez votre href de base lorsque vous construisez.

ng build --prod --base-href .

Vous pouvez maintenant double-cliquer sur index.html fichier et cela fonctionnera.

Voici un exemple de ce fonctionnement: https://mattspaulding.github.io/angular-material-starter/

9
Matt

Vous devez servir le /dist dossier utilisant un serveur HTTP. Vous ne pouvez pas contourner ce problème car le chargement local de fichiers ne permet pas l'exécution de code pour des raisons de sécurité.

Le serveur n'a pas besoin d'être quelque chose de lourd comme Express ou même un serveur minimaliste très en vedette comme HapiJS. Le serveur http Node http intégré fera très bien l'affaire. Si vous avez déjà configuré Apache, nginx ou IIS vous pouvez également les utiliser pour servez votre application.

EDIT: J'ai fait une recherche morale et j'ai décidé de proposer une solution que je n'utiliserais pas personnellement, mais qui pourrait vous convenir: Web Server for Chrome Extension =

4
gelliott181

Tout ce dont vous avez besoin est de créer votre application en utilisant cette seule ligne de code:

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

Suppression de <base href="/"> de index.html a fonctionné pour moi.

1
achola

Je recommande d'utiliser Expressjs, pourquoi les serveurs comment xampp, laragon, etc ... les routes ne fonctionnent pas bien, je l'ai fait comme ça: j'ai créé un nouveau dossier avec le serveur de noms, à l'intérieur j'ai copié un fichier index.js , l'itinéraire serait "src/assets/server/index.js",

Contenu 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'));
});

Dans package.json, à l'intérieur de la racine du projet

{
    "dependencies": {
        "express": "4.13.4"
    }
}

plus tard, exécutez la commande console ng build prod et exécutez

noeud dist/actifs/serveur /

cette commande exécute un serveur express, indiquant la direction du fichier de configuration de notre serveur, à cette occasion, le fichier index.js préconfiguré

p.s: désolé pour mon mauvais anglais, j'apprends

1
Wilder Perozo

Vous pouvez réaliser quelque chose comme ça en utilisant nw.js par exemple (ou électron). J'ai créé moi-même une application qui utilise angular 2 localement avec nw.js et cela fonctionne comme un charme;)

nwjs.io

0
kristóf baján