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

plus d'options ici

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

https://angular.io/cli/generate#ng-generate

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

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

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

https://www.npmjs.com/package/angularx-qrcode

https://www.npmjs.com/package/ngx-device-detector

https://www.tektutorialshub.com/angular/angular-passing-optional-query-parameters-to-route/#reading-query-parameters

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

Error: initial exceeded maximum budget. Budget 1.00 MB was not met by 1.84 MB with a total of 2.84 MB. Dans angular.json voir Budget et changer la valeur

Page dans la catégorie: