5
votes

Exécutez le projet Angular 7 localement sur file: /// sans serveur

Je veux construire mon projet angulaire et générer un fichier ZIP le contenant pour l'envoyer par e-mail et je veux que la personne qui le reçoit puisse l'ouvrir sur son bureau en cliquant sur le fichier index.html.

J'ai changé la baseUrl en ./ ou en document.location mais j'obtiens l'erreur suivante: "Erreur de navigation non gérée"

Quelqu'un a-t-il une idée de la façon de résoudre ce problème?

angular routing angular7

1 commentaires

Est-ce que cela répond à votre question? Exécutez Angular2 en tant qu'application statique dans un navigateur sans serveur

4 Réponses :

11
votes

Vous pouvez exécuter l'application angulaire en double-cliquant sur le fichier index.html. Ajoutez simplement le code ci-dessous dans votre app.module.ts

notez que: supprimez baseUrl = ./ du fichier index.html

//in App.module.ts : 

//import these packages  

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


// add these packages into providers as below : 

@NgModule({
    imports: 
     [
      .....
     ],
    declarations: 
     [
     ....
     ],
    providers: 
      [
        ....
        { provide: APP_BASE_HREF, useValue: '/' },
        { provide: LocationStrategy, useClass: HashLocationStrategy },
        
        ....
       ]
   ....
   
   })
   
   export class Appmodule{}

Maintenant, exécutez: npm run build et double-cliquez sur le fichier index.html du dossier dist . Votre application doit s'exécuter.

5 commentaires

@ user10899511 peut produire un exemple de stackblitz, qu'avez-vous essayé jusqu'à présent

Il me manquait pour supprimer l'élément de index.html, je l'ai fait et ça marche!

@ user10899511 heureux que cela ait fonctionné! ... veuillez accepter la réponse :)

mate, une chance d'utiliser le routeur dans ce mode index.html ?

Merci, cela a fonctionné avec de petits changements pour Angular 8 que j'ai postés en réponse.

6
votes

Voici ce que j'ai fait pour Angular 8.

Après avoir suivi les étapes fournies par @programoholic, allez dans ./dist/index.html et supprimez l'attribut type = "module" de toutes les balises de script. p>

Voici mon fichier index.html de travail

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>StartApp</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <script src="runtime-es2015.js"></script>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="polyfills-es2015.js"></script>
  <script src="styles-es2015.js"></script>
  <script src="styles-es5.js" nomodule defer></script>
  <script src="vendor-es2015.js"></script>
  <script src="vendor-es5.js" nomodule defer></script>
  <script src="main-es2015.js"></script>
  <script src="main-es5.js" nomodule defer></script>
</body>

</html>

J'espère que cela aide

0 commentaires

1
votes

En plus de la réponse de @ programoholic. Si vous ne souhaitez pas supprimer l'élément manuellement de index.html , vous pouvez créer en utilisant ceci:

ng build --base-href= --prod

0 commentaires

0
votes

Dans Angular 9 (pas sûr des versions entre Angular 2-9, devrait fonctionner de la même manière), vous n'avez pas besoin de changer la LocationStrategy pour afficher le index.html strong> du répertoire dist / .

Au lieu de cela, vous devez simplement spécifier l ' url de base comme ./ pour la rendre accessible en tant que un chemin de fichier.

Exécutez un ng build --prod --base-href ./ dans le répertoire de route de l'application et générez les fichiers dist /

Ensuite, comme @ zaki-mohammed l'a dit, supprimez le type = "module" du script s. J'ai également supprimé le nomodule defer

<script src="runtime-es2015.1eba213af0b233498d9d.js"></script> <script src="runtime-es5.1eba213af0b233498d9d.js"></script>

doit être remplacé par,

<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script> <script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>

Le fichier index.html doit maintenant s'afficher dans un navigateur.
Suivez également, https://stackoverflow.com/a/61220058/4294275

0 commentaires