如何将 Angular 应用程序嵌入另一个网站？答案

【问题标题】：How to embed an Angular app in another website?如何将 Angular 应用程序嵌入另一个网站？
【发布时间】：2021-06-14 10:29:05
【问题描述】：

有一个文件ts，导入如下：

import dictJsonRu from '../../assets/i18n/ru_RU.json';

构建后，浏览器尝试使用相对路径在我的本地计算机上查找此文件。

如何使这条路径成为绝对路径？

我试过这个：

import dictJsonRu from 'src/assets/i18n/ru_RU.json';

我的 ts 配置是：

 "compilerOptions": {
        "baseUrl": "./"

错误是：

Fetch API cannot load file:///C:/Users/O/Desktop/Projects/ka/assets/i18n/ru_RU.json. URL scheme must be "http" or "https" for CORS request.

我也试过这个：

  "paths": {
      "@assets*": ["src/assets/*"]
   }

import dictJsonRu from '@assets/i18n/ru_RU.json';

如果在 html 文件中设置 <base href="/" /> 我会收到此错误：

 Fetch API cannot load file:///C:/assets/i18n/ru_RU.json. URL scheme must be "http" or "https" for CORS request.

我的 html 文件如下所示：

<body>
<app-root></app-root>
<script src="http://remoteserve/mp.js"></script>
</body>

我想找到这个http://remoteserve/mp.js/ssets/i18n/ru_RU.json.的相关文件

我使用 IIS，也许我可以设置 web.config 来说明当客户端需要 main.js 时在哪里查找文件？

【问题讨论】：

试试import dictJsonRu from 'assets/i18n/ru_RU.json'; --> 我猜你“tsconfig.json”里面有"baseUrl": "./src",
再次看到我的问题，我发布了 config ts
所以环境之间是有区别的！？它适用于“dev”，但不适用于“prod”环境。对吗？
不，我不是从环境中得到这个文件的，我只是像往常一样导入它的 ts 文件
您应该将“.dist/”文件夹中的所有内容放在托管服务器上，而不仅仅是“main.js”文件

【解决方案1】：

你可以试试这个方法，

   "paths": {
        "@assets/*": ["src/assets/*"]
    },


import dictJsonRu from '@assets/i18n/ru_RU.json';

【讨论】：

我试过了，见上，问题是我从localhot运行index.html，但是bundle.js我从远程服务器请求
你在@assets 后面拼错了/
无论如何都不起作用，我的 html 看起来像这样：<body> <app-root></app-root> <script src="http://remoteserve/mp.js"></script> </body>