如何配置我的 Angular 应用程序以使用 CLI 进行生产并使用 JIT 进行开发？

Question

目标

有了一个统一的代码库，我希望能够...

使用 CLI 编译并使用生成的捆绑文件为整个应用提供服务
使用 JIT 编译并为应用提供服务，每个文件都有自己的网络请求（无捆绑）

当前尝试

到目前为止，我已经为每个构建创建了单独的 tsconfig 文件。

我的主要困难是在组件中设置 templateUrl 的路径。

CLI默认使用templateUrl的相对路径，而JIT需要组件上设置的moduleId才能使用相对路径。

例如

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

... 适用于开发模式 (commonjs)，但不适用于生产模式 (CLI)，并出现以下错误：

Cannot find name 'module'. Do you need to install type definitions for node? Try npm i @types/node.

虽然删除 module.id 适用于 CLI，但不适用于 commonjs。在这种情况下，浏览器无法找到 html 文件，因为它正在源代码根目录中查找。

我试过了..

（有保留）安装节点类型
将"module"转换为任何
"module" 的环境声明，
- 声明常量模块：{id: any};
将模块包装在一个仅在 commonjs 场景中有条件地求值的函数中
- 即moduleId : environment.bundled ? undefined : (() => module.id)()

并且由于不同的原因都失败了。

如有任何关于此方法或新方法的建议，我们将不胜感激。

Answer 1

最后，我发现 vsCode 在这方面比 tsc 或 CLI 更严格，我只能

在 .d.ts 文件中声明 module，
将它添加到 CLI（prod）版本的 tsconfig 中的我的类型中，
在 JIT（开发）版本的 tsconfig 中排除它..

src/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"
    ]
}

如何配置我的 Angular 应用程序以使用 CLI 进行生产并使用 JIT 进行开发？

How can I configure my Angular app to use CLI for production and JIT for development?

angular-cli

angular

angular-jit

目标

当前尝试