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

Question

目标

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

1. 使用CLI编译，并使用生成的捆绑文件为整个应用程序提供服务
2. 使用JIT编译，并为每个具有其自己的网络请求的文件提供服务（不捆绑）

当前尝试

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

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

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

例如

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

...适用于开发模式（commonjs），但不适用于生产模式（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. 在 .d.ts 文件
中声明module
2. 将其添加到tsconfig中的CLI（产品）版本和
的我的类型中
3. 将其排除在tsconfig中以获取JIT（dev）版本。

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