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

Question

目标

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

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

当前尝试

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

我的主要困难是在 components 中为 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 场景中有条件地评估的函数中
  • IEmoduleId : environment.bundled ? undefined : (() => module.id)()

并且都因不同的原因而失败。

任何关于这种方法或新方法的建议将不胜感激。

Answer 1

最后，我发现 vsCode 在这方面比 tsc 或 CLI 更具限制性，我能够

1. module在.d.ts文件中声明，
2. 将其添加到 CLI (prod) 版本的 tsconfig 中的我的类型中，然后
3. 在 JIT (dev) 版本的 tsconfig 中排除它..

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