web-dev-qa-db-fra.com

Obtenez un service angulaire sur HTTPS

Ce qui suit ne semble rien faire.

ng serve --ssl true --ssl-key <key-path> --ssl-cert <cert-path>

Créer le certificat et la clé en les fournissant dans le répertoire ssl par défaut ne fait toujours rien. Ça ressemble à ng server ignore complètement le --ssl paramètre et continue à dire NG Live Development Server is running on http://localhost:4200.

angularhttpsangular-cli
35
grim

CLI angulaire 6+

J'ai mis à jour mes propres projets et je me suis dit que je pouvais maintenant mettre à jour cette réponse également.

Vous allez maintenant mettre le chemin de votre clé et de votre certificat dans votre fichier angular.json comme suit:

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "projects": {
       "<PROJECT-NAME>": {
           "architect": {
               "serve: {
                   "options": {
                       "sslKey": "<relative path from angular.json>/server.key",
                       "sslCert": "<relative path from angular.json>/server.crt",
                       ...
                   }, ...
               }, ...
           }, ...
       }, ...
   }, ...
}

Et puis tu peux courir:

ng serve --ssl

Si vous souhaitez activer SSL par défaut, vous devez ajouter une option "ssl": true, immédiatement sous la clé et sslCert .

Vous pouvez trouver le schéma angular.json dans le Documentation de CLI angulaire .

Ancienne réponse pour Angular CLI 1.0.0+.

Angular-CLI fonctionne maintenant avec les options SSL. Comme vous l'avez noté, vous pouvez sélectionner manuellement la clé et le certificat que vous souhaitez utiliser avec la commande:

ng serve --ssl --ssl-key <key-path> --ssl-cert <cert-path>

Si vous souhaitez définir un chemin par défaut pour votre clé et votre certificat, vous pouvez aller dans votre fichier .angular-cli.json et ajuster la section Defaults en conséquence:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "defaults": {
        "serve": {
            "sslKey": "<relative path from .angular-cli.json>/server.key",
            "sslCert": "<relative path from .angular-cli.json>/server.crt",
            ...
        }, ...
    }, ...
}

Et puis tu peux courir:

ng serve --ssl

Si vous souhaitez activer SSL par défaut, vous devez ajouter une option "ssl": true, immédiatement sous la clé et sslCert .

53
Taul

JFYI, dans Angular6, vous devez mettre la conf dans les options (dans angular.json):

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "app:build",
        "ssl": true,
        "sslKey": "path to .key",
        "sslCert": "path to .crt"
    },
    ...
}
20
Cyril Blanchet

Solution très simple de cette page

npm installez browser-sync --save-dev

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert/node_modules/browser-sync/lib/server/certs/server.crt

Rapide et gras) Je viens de l’utiliser dans mon projet angular cli 6.2.3

8
Alexander Poshtaruk

Pour compléter cette solution, si vous vous demandez comment générer une clé et un certificat pour localhost, voici un excellent article étape par étape à ce sujet:

https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

8
wawka

Vous avez raison. L’implémentation actuelle ne prend pas les options de configuration ssl sous le compte. J'ai créé un demande d'extraction qui résout ce problème. Cependant, il n'a pas encore été fusionné dans le master au moment de la rédaction de cet article.

3
Stefan Baramov

Vous pouvez utiliser

--ssl

ou

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "someapp:build",
            "ssl": true
          },

et un certificat SSL sera automatiquement généré pour vous.

Ensuite, pour Chrome accepter un certificat auto-signé pour localhost, voir ce responsable

0
Helzgate

CLI angulaire 1.0.0+.

ng servir - ssl 1- ssl-key {{key-path}} --- - ssl-cert {{cert-path} }

CLI angulaire 6+

ng servir - - ssl true- sslKey {{chemin-clé}} --- - sslCert {{chemin-cert}}

Remplacez les valeurs dans {{* -path}} par les valeurs correspondantes.

0
Charles Silva