Date de création : 2021/04/21 08:34
Petit server pour des actions répétitives sur des projets afin d’éviter de surfer pour rien sur internet et aller droit au but.
npm install -g @angular/cli
ng new my-first-projectc
Ou pour passer directement les options:
ng new nomDeMonSuperProject —style=scss —routing=true —strict=true
puis faire ng serve dans le dossier de l’application.
ng serve
Si on veut un peu plus de fantaisie on peut faire :
ng serve --prod --host 0.0.0.0 --port 4200 --live-reload
npm i --save firebase @angular/fire
npm install -g firebase-tools
Pour voir la liste des projets
Firebase projects:list
npm install firebase
Nom install angularfire:
ng add @angular/fire
Ensuite dans App.module.ts il faut faire les imports.
//Firebase import { AngularFireModule } from "@angular/fire"; import { AngularFirestoreModule } from "@angular/fire/firestore";
imports: [ AngularFireModule.initializeApp(environment.firebaseConfig), AngularFirestoreModule, ],
ng add @angular/material
Il faut installer @agm/core
npm install @agm/core agm-direction
Puis agm-direction
npm install —save agm-direction npm install @types/googlemaps
on désinstalle core
npm uninstall @agm/core
puis on réinstalle core
npm install @agm/core
Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:51:41 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
Il y a un bug connu. Il faut passer sur la version 3.39.13 qui est stable.
npm i @types/googlemaps@3.39.13
Pour faire une isntallation de ionic il est recommendé sur le site de Ionic de faire une mise a jour de tout les packages mais Attention aux conflits de version. Si vous voulez installer le minimum installer directement le CLI
Update all npm packages in the newly created Ionic project.
npm i -g npm-check-updates && ncu -u
on installe TypeScript si cela n'est pas déjà fait:
npm install -g typescript
Si erreur de version pas de soucis, on bloque la version sur la dernière stable acceptée. TypeScript >=4.0.0 and <4.2.0 but 4.2.3
npm i -D typescript@4.1.5
Voir la page Problème de version
npm install -g @ionic/cli
Si il y a déjà une ancienne version de Ionic,il faut faire un Uninstall pour repartir sur de bonne base:
npm uninstall -g ionic
Puis refaire l'installation.
npm install -g @ionic/cli
Pour utilister Ionic dans une application Angular faire:
npm install @ionic/angular@latest –save
Pour ajouter Ionic à un projet Angular déjà existant, utilisez la fonction Angular CLI ng add.
ng add @ionic/angular
Cela ajoutera les importations nécessaires au @ionic/angularpackage ainsi que les styles nécessaires.
Installer nouveau Project depuis Ionic https://ionicframework.com/docs/developing/starting
ng add @capacitor/angular
App Package ID (in Java package format, no dashes) fr.monSuperProject.myProject
npm install @ionic/pwa-elements
Ajouter dans le main.ts: Dans les imports:
import { defineCustomElements } from '@ionic/pwa-elements/loader'
À la fin du fichier mains.ts
// Call the element loader after the platform has been bootstrapped; defineCustomElements(window);
https://www.npmjs.com/package/http-server
Globally via npm
npm install --global http-server
Running on-demand:
Using npx you can run the script without installing it first:
npx http-server [path] [options]
http-server -p 8080
As a dependency in your npm package:
npm install http-server
Usage: http-server [path] [options] [path] defaults to ./public if the folder exists, and ./ otherwise. Now you can visit http://localhost:8080 to view your server Note: Caching is on by default. Add -c-1 as an option to disable caching.
https://www.npmjs.com/package/ftp-deploy
npm install --save-dev ftp-deploy
angularx-qrcode
You could use *ngIf directive here to show conditional icon. <button clear text-center (click)=“toggle()”>
<ion-icon name="arrow-drop down-circle" *ngIf="!visible"></ion-icon> <ion-icon name="arrow-drop up-circle" *ngIf="visible"></ion-icon>
</button> You could use name property instead of creating two different ion-icon <button clear text-center (click)=“toggle()”>
<ion-icon [name]="visible ? 'arrow-drop up-circle' :'arrow-drop down-circle'"> </ion-icon>
</button>
828 x 1792 PX ~ 326 Pixels Per Inch iPhone 11 Viewport 414 x 896 PX ~ 163 Pixels Per Inch
npm i json-server
json-server --watch db.json
Dans le package.json on ajout une ligne avec —p pour le port différent “json” : “json-server –p 3001 –watch db.json”,
$ json-server –watch db.json –port 3004
ng build --prod --common-chunk --optimization --service-worker --base-href ./ ng build --prod --service-worker true --common-chunk true --optimization true --base-href ./ && http-server -p 4200 ng build --prod --service-worker true --common-chunk true --optimization true --base-href ./ && http-server ./dist/*/ -p 4200 -g