Как настроить приложение Angular для использования CLI для производства и JIT для разработки?

Question

goal

Имея одну унифицированную кодовую базу, я хочу иметь возможность ...

1. компилировать с CLI и обслуживать все приложение с полученными в результате пакетными файлами
2. использовать JIT-компиляцию и обслуживать приложение с каждым файлом, имеющим собственный сетевой запрос (без объединения)

текущая попытка

До сих пор я создал отдельные файлы tsconfig для каждогоbuild.

Моя основная трудность заключается в установке путей для templateUrl в компонентах .

CLI по умолчанию использует относительные пути для templateUrl, в то время как JIT требует, чтобы moduleId был установлен в компоненте дляиспользуйте относительные пути.

например

@Component({
  selector: 'app-root',
  moduleId : module.id,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

... работает в режиме разработки (commonjs), но не работает в режиме prod (CLI) со следующей ошибкой:

Не удается найти имя «модуль».Вам нужно установить определения типа для узла?Попробуйте npm i @types/node.

. При удалении module.id работает с CLI, но не с commonjs.В этом случае браузер не может найти html-файл, потому что он ищет в корневом каталоге.

Я пытался ..

• (с резервированием) при установке типа узла
• приведение «модуля» к любому
• объявление окружения «модуля»,
  • объявление const модуля: {id: any};
• обертывание модуля в функцию, которая выполняет условную оценку только в сценарии commonjs
  • , т. е. moduleId : environment.bundled ? undefined : (() => module.id)()

, и все вышли из строя по разным причинам.

Любое предложение относительно этого подхода или нового подхода будет оценено по достоинству.

Answer 1

В конце концов, я обнаружил, что vsCode был более строгим, чем tsc или CLI, и я смог просто

1. объявить module в файле .d.ts ,
2. добавьте его к моим типам в tsconfig для версии CLI (prod) и
3. исключить его в tsconfig для версии JIT (dev) ..

ЦСИ / ambient.d.ts

declare var module: {id: string};

TSconfig-cli.json

{
    "compileOnSave": false,
    "compilerOptions": {
        ...
        "module": "es2015",
        "moduleResolution": "node",
        ...
        "types": [
            "src/ambient.d.ts"
        ]
    }
}

TSconfig-dev.json

{
    "compilerOptions": {
        ...
        "module": "commonjs",
        "moduleResolution": "node",
        ...
    },
    ...
    "exclude":[
      "src/main/main.ts",
            "src/ambient.d.ts"
    ]
}