I'm writing an app to go into a website, which is intended to calculate simplex algorithms. At the moment I am attempting to create functionality whereby the user can enter the number of coefficients and constraints, name these whatever they wish, and have the app spawn the relevant number and type of UI elements relative to the user's input. Here's what appears to be the relevant portion of the code (app.component.ts):

import { Component } from '@angular/core';

[...]

export class UIComponent {
  id: 1;
  name: string;
  value: number;
  type: string;
}

//* Mock data */
const UICOMPONENTS: UIComponent[] = [
  { id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
  { id: 2, name: 'constraint1', value: 2, type: '2dslide' },
  { id: 3, name: 'min_max', value: 0, type: 'switch' },
  { id: 4, name: 'profit', value: 100, type: 'num_output' }
];

[...]

export class AppComponent {
  title = 'SimutronX';
  uicomponents = UICOMPONENTS;
  [...]
}

This produces an error on screen saying:

Failed to compile.

/root/simutronx/simutron-app/src/app/app.component.ts (18,49): ',' expected.

Which relates to this line:

{ id: 2, name: 'constraint1', value: 2, type: '2dslide' },

Specifically the digit 2 in 2dslide. The error message (it's extremely long so I won't reproduce it all) also includes:

./src/app/app.component.ts
Module parse failed: /root/simutronx/simutron-app/node_modules/@ngtools/webpack/src/index.js!/root/simutronx/simutron-app/src/app/app.component.ts Unexpected token (22:85)
You may need an appropriate loader to handle this file type.
| var UICOMPONENTS = [
|     { id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
|     { id: 2, name: 'constraint1, value: 2, type: ', 2: dslide, ' },: { id: 3, name: 'min_max', value: 0, type: 'switch' }, },
|     { id: 4, name: 'profit', value: 100, type: 'num_output' }
| ];

Which is particularly confusing since, as you can see, that's not how I wrote the code. What's going on here?