Comment utiliser la configuration Webpack personnalisée dans Ionic 4

Je n'ai pas assez de représentants pour commenter, ce sera mieux si vous ajoutez votre code package.json et angular.json.Essayez de rétrograder votre package "@ angular-devkit / build-angular" à ^ 0.12.X, si vous utilisez la version 6 de "@ angular-builders / custom-webpack".

Référez-vous si vous avez doute

TypeORM de npm:

 "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

Au moment d'écrire ces lignes, typeorm v0.2.16 code> sera installé.

Ensuite, installez Node.js types:

"customWebpackConfig": {"path": "./custom.webpack.config.js"}:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

Puisque nous allons faire des tests dans le navigateur, nous devons également installer sql.js:

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

Au moment d'écrire ces lignes, sql.js v0.5.0 sera installé.

Ensuite, ouvrez le fichier tsconfig.json et ajoutez "typeRoots": ["node_modules / @ types"] code > sous compilerOptions s'il n'est pas déjà là.

Ensuite, ouvrez le src / tsconfig.app.json et changez en conséquence:

const webpack = require('webpack');
console.log('The custom config is used');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.SQL': 'sql.js/js/sql.js'
        }),
        new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
            result.request = result.request.replace(/typeorm/, "typeorm/browser");
        })
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    optimization: {
        minimize: false
    }
};

Ajout d'un Webpack personnalisé Configuration Ensuite, créez un fichier de configuration Webpack personnalisé à la racine de votre projet:

$ touch custom.webpack.config.js 

Ouvrez le fichier custom.webpack.config.js et ajoutez le code suivant:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"],
    "paths": {
      "typeorm": ["node_modules/typeorm/browser"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Ensuite, retournez sur votre terminal et installez les packages @ angular-builders / custom-webpack et @ angular-builders / dev-server de npm:

$ npm install sql.js --save

Les @ angular-builders / custom-webpack v7.4.3 et * @ angular-builders / dev-server v7.3.1 * Les packages seront installés.

Le générateur @ angular-devkit / build-angular: dev-server utilise le générateur de pack Web personnalisé pour obtenir la configuration du pack Web. Contrairement à la configuration par défaut @ angular-devkit / build-angular: dev-server, elle n'utilise pas la configuration du navigateur @ angular-devkit / build-angular: pour exécuter le serveur de développement. Si vous utilisez @ angular-builders / dev-server: generic avec @ angular-builders / custom-webpack: browser, ng serve fonctionnera avec la configuration personnalisée fournie dans ce dernier.

Maintenant, ouvrez le angular.json , recherchez l'entrée projects -> app -> architect -> build -> builder et échangez @ angular-devkit / build-angular: browser avec @ angular-builders / custom-webpack: browser.

Ensuite, sous l'objet options, ajoutez

$ npm install @types/node --save-dev

Ensuite, changez le générateur propriété sous la propriété serve à @ angular-builders / dev-server: generic:

$ cd ionic-crm
$ npm install typeorm --save

Maintenant, si vous servez à nouveau votre application, la configuration Webpack personnalisée sera utilisée et vous devrait voir Le message La configuration personnalisée est utilisé affiché dans votre terminal.

Vous pouvez créer une configuration Webpack personnalisée pour Ionic 4 / Angular comme suit.

Créez un fichier de configuration Webpack personnalisé à la racine de votre projet:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

Ouvrir le fichier custom.webpack.config.js et ajoutez le code suivant:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

Ensuite, retournez sur votre terminal et installez le Paquets @ angular-builders / custom-webpack et @ angular-builders / dev-server de npm:

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

Le @angular -devkit / build-angular: le générateur de serveur de développement utilise le générateur de pack Web personnalisé pour obtenir la configuration du pack Web.

Contrairement à la configuration par défaut de @ angular-devkit / build-angular: dev-server, il n'utilise pas la configuration du navigateur @ angular-devkit / build-angular: pour exécuter le serveur de développement. Si vous utilisez @ angular-builders / dev-server: generic avec @ angular-builders / custom-webpack: browser, ng serve fonctionnera avec la configuration personnalisée fournie dans ce dernier.

Maintenant, ouvrez le fichier angular .json, localisez les projets -> app -> architect -> build -> builder et échangez @ angular-devkit / build-angular: browser avec @ angular-builders / custom-webpack: browser.

Ensuite, sous l'objet options, ajoutez "customWebpackConfig": {"path": "./custom.webpack.config.js"}:

const webpack = require('webpack');
console.log('The custom config is used');

Ensuite, changez le builder sous la propriété serve à @ angular-builders / dev-server: generic:

$ touch custom.webpack.config.js 

Maintenant, si vous servez à nouveau votre application, la configuration Webpack personnalisée sera utilisée et vous devriez voir le message La configuration personnalisée est utilisée affiché dans votre terminal.

Vous pouvez trouver un tutoriel avec un exemple pratique ici