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

问题描述 投票:3回答:1

目标

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

  1. 使用CLI进行编译,并使用生成的捆绑文件提供整个应用程序
  2. 使用JIT编译并为每个拥有自己网络请求的文件提供应用程序(无捆绑)

目前的尝试

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

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

CLI默认使用templateUrl的相对路径,而JIT需要在组件上设置moduleId以使用相对路径。

EG

@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)()

所有人都因各种原因失败了。

任何关于这种方法或新方法的建议都将受到最高的赞赏。

angular angular-cli angular-jit
1个回答
-3
投票

最后,我发现vsCode比tsc或CLI更具限制性,而且我能够

  1. 在.d.ts文件中声明module
  2. 将它添加到tsconfig中的我的类型(CLI)(prod)版本和
  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"
    ]
}
© www.soinside.com 2019 - 2024. All rights reserved.