WIP: Angular v15

[JBBianchi]

Migrated Angular/Angular Material to v15 (dropped compatibility with previous versions. Could work, I didn't check.)

I didn't manage to reconfigure the test environment yet for angular-material.

Any help is more than welcome! <3

• pnpm run build
• pnpm run doc
• pnpm run test (fails: trying to "rewire" tests for angular-material)
• pnpm run test-cov (same as above)
• pnpm run lint (will do when the rest is fixed)
• Tested in angular seed project v15

Next steps:

• Remove support for deprecated @angular/flex-layout
• Add support for Angular v16 and v17

(Dev envs: Win 10/11 - NodeJS 16.14.2 & 18.18.2)

Related to

• WIP: Angular 15 and more #2130
• Fix reference type in schema and support angular 15 #2125 ?
• Remove enableIvy option #2117
• (Draft) angular/angular-material 13 #1994
• enableIvy should not be set to false! #2116
• Library build of Angular packages #1546
• Angular Ivy distribution #1993
• Support Angular w/ Material v16 #2138

@JonasDev17 @sdirix if you have some time to have a look, it would be great. Angular is a great framework often used in companies, it would be sad to drop support for it.

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	77624c6
🔍 Latest deploy log	https://app.netlify.com/sites/jsonforms-examples/deploys/65534540fb8ed40007d9c89e
😎 Deploy Preview	https://deploy-preview-2210--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[JBBianchi]

FYI, if it can help:

For a dummy Angular v15 application named foobar:

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, '../../coverage/foobar'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    browsers: ['Chrome'],
    restartOnFileChange: true
  });
};

and a dump of the webpack config for the same app when running the test:

module.exports = () => ({
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: 1,
    cacheDirectory: 'C:\\Dev\\Sandbox\\ng-jsonforms\\.angular\\cache\\15.2.10\\angular-webpack',
    name: '239af6a0275057ce3ee99a87b8f8452277b7d3b9'
  },
  context: 'C:\\Dev\\Sandbox\\ng-jsonforms',
  entry: {
    polyfills: { import: [ 'zone.js' ] },
    main: {
      import: [
        'zone.js/testing',
        'ng-virtual-main.js!=!data:text/javascript;base64,CiAgaW1wb3J0IHsgZ2V0VGVzdEJlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvdGVzdGluZyc7CiAgaW1wb3J0IHsKICAgIEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwKICAgIHBsYXRmb3JtQnJvd3NlckR5bmFtaWNUZXN0aW5nLAogICB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYy90ZXN0aW5nJzsKCiAgLy8gSW5pdGlhbGl6ZSB0aGUgQW5ndWxhciB0ZXN0aW5nIGVudmlyb25tZW50LgogIGdldFRlc3RCZWQoKS5pbml0VGVzdEVudmlyb25tZW50KEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwgcGxhdGZvcm1Ccm93c2VyRHluYW1pY1Rlc3RpbmcoKSwgewogICAgZXJyb3JPblVua25vd25FbGVtZW50czogdHJ1ZSwKICAgIGVycm9yT25Vbmtub3duUHJvcGVydGllczogdHJ1ZQogIH0pOwo='
      ]
    }
  },
  experiments: { syncWebAssembly: true, asyncWebAssembly: true },
  infrastructureLogging: {
    level: 'error',
    stream: {
      _readableState: {
        constructed: true,
        sync: true,
        autoDestroy: true,
        defaultEncoding: 'utf8'
      },
      _eventsCount: 1,
      _writableState: {
        highWaterMark: 16384,
        defaultEncoding: 'utf8',
        allBuffers: true,
        allNoop: true,
        constructed: true,
        autoDestroy: true
      },
      columns: 128,
      rows: 33,
      _type: 'tty',
      fd: 2,
      _isStdio: true
    },
    colors: true
  },
  mode: 'development',
  module: {
    parser: { javascript: { strictExportPresence: true } },
    rules: [
      {
        test: /\.?(svg|html)$/,
        resourceQuery: /\?ngResource/,
        type: 'asset/source'
      },
      { test: /[/\\]rxjs[/\\]add[/\\].+\.js$/, sideEffects: true },
      {
        test: /\.[cm]?[tj]sx?$/,
        exclude: [
          /[\\/]node_modules[/\\](?:core-js|@babel|tslib|web-animations-js|web-streams-polyfill|whatwg-url)[/\\]/
        ],
        use: [
          {
            loader: 'C:\\Dev\\Sandbox\\ng-jsonforms\\node_modules\\.pnpm\\@angular-devkit+build-angular@15.2.10_@angular+compiler-cli@15.2.10_karma@6.3.20_ng-packagr@15.2.2_typescript@4.9.5\\node_modules\\@angular-devkit\\build-angular\\src\\babel\\webpack-loader.js'
          }
        ]
      },
      {
        test: /\.[cm]?jsx?$/,
        enforce: 'pre',
        loader: 'C:\\Dev\\Sandbox\\ng-jsonforms\\node_modules\\.pnpm\\source-map-loader@4.0.1_webpack@5.76.1\\node_modules\\source-map-loader\\dist\\cjs.js'
      },
      {
        test: /\.[cm]?tsx?$/,
        loader: 'C:\\Dev\\Sandbox\\ng-jsonforms\\node_modules\\.pnpm\\@ngtools+webpack@15.2.10_@angular+compiler-cli@15.2.10_typescript@4.9.5_webpack@5.76.1\\node_modules\\@ngtools\\webpack\\src\\ivy\\index.js',
        exclude: [
          /[\\/]node_modules[/\\](?:css-loader|mini-css-extract-plugin|webpack-dev-server|webpack)[/\\]/
        ]
      },
      { test: /\.(?:css)$/i },
      { test: /\.(?:scss)$/i },
      { test: /\.(?:sass)$/i },
      { test: /\.(?:less)$/i }
    ]
  },
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'named',
    splitChunks: {
      maxAsyncRequests: Infinity,
      cacheGroups: {
        defaultVendors: {
          name: 'vendor',
          enforce: true,
          test: /[\\/]node_modules[\\/]/
        }
      },
      defaultSizeTypes: [ '...', 'css/mini-extract' ]
    }
  },
  output: {
    chunkFilename: '[name].js',
    clean: true,
    enabledChunkLoadingTypes: [ '...' ],
    enabledLibraryTypes: [ '...' ],
    enabledWasmLoadingTypes: [ '...' ],
    filename: '[name].js',
    hashFunction: 'xxhash64',
    scriptType: 'module',
    path: '/_karma_webpack_/',
    publicPath: '/_karma_webpack_/',
    trustedTypes: { policyName: 'angular#bundler' },
    uniqueName: 'foobar'
  },
  plugins: [
    {
      modulesCount: 5000,
      dependenciesCount: 10000,
      showEntries: true,
      showModules: true,
      showDependencies: true
    },
    {
      sourceMapFilename: '[file].map',
      sourceMappingURLComment: '\n//# sourceMappingURL=[url]',
      moduleFilenameTemplate: '[resource-path]',
      fallbackModuleFilenameTemplate: 'webpack://[namespace]/[resourcePath]?[hash]',
      options: {
        filename: '[file].map',
        include: [ /js$/, /css$/ ],
        sourceRoot: 'webpack:///',
        moduleFilenameTemplate: '[resource-path]',
        test: /\.((c|m)?js|css)($|\?)/i
      }
    },
    {
      pluginOptions: {
        emitNgModuleScope: true,
        jitMode: true,
        directTemplateLoading: true,
        tsconfig: 'C:\\Dev\\Sandbox\\ng-jsonforms\\projects\\foobar\\tsconfig.spec.json',
        compilerOptions: { sourceMap: true },
        inlineStyleFileExtension: 'css'
      }
    },
    {
      options: {
        filename: '[name].css',
        runtime: true,
        chunkFilename: '[name].css'
      },
      runtimeOptions: { linkType: 'text/css' }
    },
    { outputPath: './', name: 'foobar.dump.js', depth: 7 },
    {
      options: {
        include: [ '**/*.spec.ts' ],
        workspaceRoot: 'C:\\Dev\\Sandbox\\ng-jsonforms',
        projectSourceRoot: 'C:\\Dev\\Sandbox\\ng-jsonforms\\projects\\foobar\\src'
      }
    }
  ],
  resolve: {
    roots: [ 'C:\\Dev\\Sandbox\\ng-jsonforms\\projects\\foobar' ],
    extensions: [ '.ts', '.tsx', '.mjs', '.js' ],
    symlinks: true,
    modules: [ 'C:/Dev/Sandbox/ng-jsonforms', 'node_modules' ],
    mainFields: [ 'es2020', 'es2015', 'browser', 'module', 'main' ],
    conditionNames: [ 'es2020', 'es2015', '...' ]
  },
  resolveLoader: { symlinks: true },
  stats: {
    colors: true,
    hash: true,
    timings: true,
    chunks: true,
    builtAt: true,
    warnings: true,
    errors: true,
    assets: true,
    cachedAssets: true,
    ids: true,
    entrypoints: true
  },
  target: [ 'web', 'es2015' ],
  watch: true
})

[lucas-koehler]

Hi @JBBianchi , thank you very much for the contribution :)
I'll have a look in the next days. Dropping support for Angular versions below 15 is no problem :)

[JBBianchi]

I did a mistake. I wanted to sync my master with the upstream via the GH UI but I did it on the angular-v15 branch instead... gonna try to fix this, sorry.