angular - 如何将 Ionic 框架与自定义 webpack 配置集成到现有的 Angular 应用程序中？

Question

我正在使用 webpack 为 Angular 8 和 Ionic 4 设置构建过程。如何使用完全自定义的 webpack 配置将 Ionic 4 完全集成到我的应用程序中？

我们正在重写现有的 Cordova 8 和 AngularJS 1.4.9 混合移动应用程序，以并行运行现代 Angular 8 和旧版 AngularJS 代码。使用完全自定义的 webpack 配置，我们能够将所有内容（包括 node_modules）捆绑在一起并在移动设备上运行。

话虽如此：自定义 Angular 8 组件样式和 HTML 模板完全集成在包中并应用于组件。

现在我们正在尝试使用 webpack 构建过程将 Ionic 4 组件集成到 Angular 8 应用程序中。我们还能够将 Ionic 4 组件捆绑到 vendor.js 文件中。

唯一仍然缺少的是 CSS 样式，Ionic 不会将它们应用于组件。我发现 Ionic 需要运行一些 JavaScript 片段才能将所有样式完全应用于其组件。尝试集成 Ionic 4 Web 组件 JavaScript 代码时没有发生任何事情。

以下代码显示了我们当前使用来自 @ngtools/webpack 模块的 Angular 编译器插件的 webpack 配置：

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CircularDependencyPlugin = require('circular-dependency-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: false,
    runtimeChunk: { name: 'runtime' },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  entry: {
    'main': './src/main.ts'
  },
  output: { filename: '../app/_bundles/[name].js' },
  resolve: {
    extensions: ['.ts', '.js'],
    modules: ['node_modules']
  },
  module: {
    rules: [
      { test: /\.ts$/, exclude: /node_modules/, loader: '@ngtools/webpack' },
      { test: /\.html$/, loader: ['html-loader'] },
      { test: /\.(css|scss)$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], include: [/node_modules/] },
      { test: /\.(css|scss)$/, loaders: ['to-string-loader', 'css-loader', 'sass-loader'], exclude: [/node_modules/] }
    ]
  },
  plugins: [
    new CircularDependencyPlugin({ failOnError: false, cwd: process.cwd() }),
    new AngularCompilerPlugin({ tsConfigPath: './tsconfig.json', entryModule: './src/app/app.module#AppModule', sourceMap: true })
  ]
};

这些都是我们项目中使用的 AngularJS、Angular 和 Ionic 模块：

  ...
  "dependencies": {
    "angular": "1.4.9",
    "@angular/animations": "^8.2.3",
    "@angular/common": "^8.2.3",
    "@angular/compiler": "^8.2.3",
    "@angular/core": "^8.2.3",
    "@angular/forms": "^8.2.3",
    "@angular/platform-browser": "^8.2.3",
    "@angular/platform-browser-dynamic": "^8.2.3",
    "@angular/router": "^8.2.3",
    "@angular/upgrade": "^8.2.3",
    "@ionic-native/core": "^5.12.0",
    "@ionic-native/splash-screen": "^5.12.0",
    "@ionic-native/status-bar": "^5.12.0",
    "@ionic/angular": "^4.8.1",
    ...

标签： angulartypescriptionic-frameworkwebpack