Это свидетельствует о неправильной конфигурации TypeScript / SystemJS?

Question

У меня есть проект, который использует TypeScript и Angular 7, пытаясь настроить все в Visual Studio. Первоначально проект был создан для более старых версий всего, и я пытаюсь обновить его и запустить.

Я получаю следующую ошибку в Chrome:

ReferenceError: require is not defined
    at main.ts:1

и аналогичный в Edge:

[object Error]: {
  description: "'require' is not defined", 
  message: "'require' is not defined", 
  number: -2146823279,     
  stack: "ReferenceError: 'require' is not defined at Global code (blah … /main.js:3:1) }

Из того, что я читал в Интернете, я подумал, что SystemJS должен был разобраться с этим, чтобы в браузере нормально работали серверные вещи. Я вполне уверен, что systemjs загружается и делает что-то , потому что если я изменяю конфигурацию, все происходит иначе, и я вижу, что соответствующие файлы JS, которые я ожидаю загрузить, загружаются (глядя на разработчика браузера вкладка "Инструменты сети")

{
  "paths": {
    "npm": "/node_modules/"
  },
  "map": {
    "app": "/Scripts/Discussion",

    "@angular/core": "npm:@angular/core/bundles/core.umd.js",
    "@angular/common": "npm:@angular/common/bundles/common.umd.js",
    "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js",
    "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
    "@angular/http": "npm:@angular/http/bundles/http.umd.js",
    "@angular/router": "npm:@angular/router/bundles/router.umd.js",
    "@angular/forms": "npm:@angular/forms/bundles/forms.umd.js",
    "rxjs": "npm:rxjs",
    "angular-in-memory-web-api": "npm:angular-in-memory-web-api"
},
"packages": {
    "app": {
        "main": "./main.js",
        "defaultExtension": "js"
    }
}

Мой tsconfig.json выглядит так:

{
    "compilerOptions": {
        "target": "es6",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "typeRoots": [ "node_modules" ],
        "types": [ "system" ]
    }
}

Но моя вкладка «Сборка TypeScript» в VS не совсем соответствует этому (и все еще редактируема, несмотря на наличие tsconfig):

Теперь, если я изменю этот выпадающий список с CommonJS на System, я получу сотни ошибок, которые сборка TS не может найти в модуле 'X', и я не совсем понимаю, что делать для их устранения - все, что мне кажется, является древним. сообщения (которые все еще относятся к Angular как Angular2) и совет, который не сработает.

Должны ли мои настройки сборки машинописи VS быть выровнены с tsconfig.json? В настоящее время я получаю проблемы, потому что tsc учитывает настройки VS и генерирует что-то несовместимое с systemjs, установленным в tsconfig / используемым при загрузке модуля на стороне клиента?