8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. angular
  3. 构建生产角度应用程序时，外部库停止工作

构建生产角度应用程序时，外部库停止工作

Ramadita 1月前
36 0

您好，我正在开发一款使用 leaflet.heat 库的应用程序。要使用它，必须按如下方式导入：import * as L from 'leaflet';import 'leaflet.heat';...// 然后就可以使用了...

您好，我正在开发一个使用该库的应用程序 leaflet.heat 。要使用它，必须按如下方式导入： 

import * as L from 'leaflet';
import 'leaflet.heat';

...
// Then it can be used:
  private addHeatmapToMap(heatmapData: L.HeatLatLngTuple[]) {
   ...
    let heatmap = L.heatLayer(heatmapData, { radius: 10, max: 200, gradient: { 0.1: 'yellow', 0.4: 'orange', 0.6: 'red', 0.8: 'white' }, minOpacity: 0.8 });
   ...
  }

使用时，此方法可按预期工作 ng serve 。但是，当构建应用程序以在 docker 容器中使用时， ng build --configuration production --output-path=/dist 其派生的功能 L. 依赖于 的导入 leaflet.heat 停止工作。

我的第一个猜测是，angular 在构建过程中删除了导入，因为在组件中没有直接使用该导入，但我不知道如何指示 angular 不这样做。

使用的版本为： 

    angular 18:
    ...
    "leaflet": "^1.9.4",
    "leaflet.heat": "^0.2.0",
    ...
    "@types/leaflet": "^1.9.12",
    "@types/leaflet.heat": "^0.2.4",

Dockerfile： 

#################
# Build the app #
#################
FROM node:22-alpine AS build

WORKDIR /app

RUN npm install -g @angular/cli

COPY package.json package-lock.json ./
RUN npm install --fetch-timeout=600000 
COPY . .

RUN ng build --configuration production --output-path=/dist

################
# Run in NGINX #
################
FROM nginx:alpine

COPY --from=build /dist/browser /usr/share/nginx/html
COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf

# When the container starts, replace the env.js with values from environment variables
CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/environment/env.template.js > /usr/share/nginx/html/assets/environment/env.js && exec nginx -g 'daemon off;'"]
帖子版权声明 1、本帖标题：构建生产角度应用程序时，外部库停止工作
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Ramadita在本站《angular》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    我不确定这是否是同一个问题，但我 leaflet.markercluster 在生产中遇到了问题。

    虽然应用程序在我的本地机器上运行良好，但 ng serve , L.markerClusterGroup 在部署到生产服务器后却无法运行。（我忘了具体错误是什么样子的。）无论如何，我找到了以下解决方法： 

    import * as leaflet from 'leaflet';

import 'leaflet';
import 'leaflet.markercluster';

// workaround for angular 18, otherwise leaflet.markercluster doesn't work
declare let L: typeof leaflet;

    此外，我已将插件的脚本文件添加到 angular.json .

    也许这有助于解决你的问题？

  • 引用 3楼

    @nck 这应该可行，尝试 npm run build 并验证传单脚本是否在 dist 文件夹中，然后检查并检查脚本是否正确添加，您应该启动角度应用程序，并尝试检查正确的路径以查看脚本，如 http://localhost:4200/leaflet-heat.js，也更新了我的答案

  • 引用 4楼

    它似乎不起作用。它在构建时永远找不到脚本。我对传单的图像也有类似的情况，但那里没有问题。

  • 引用 5楼

    @nck 你应该尝试在脚本中进行不同的导入变体，例如 /assets/leaflet-heat.js 如果我的答案脚本值不起作用

  • 引用 6楼

    我已经尝试过但没有什么区别：\'scripts\': [ \'node_modules/leaflet/dist/leaflet.js\', \'node_modules/leaflet.heat/dist/leaflet-heat.js\' ]\'

  • 引用 7楼

    当您运行带有优化的角度构建时，该库可能会被树摇动并被删除。

    首先我们需要把这个脚本添加到 assets 文件夹中，这也是一个关于 assets angular.json数组的配置。

    然后通过脚本文件夹明确导入脚本 angular.json .

    angular.json： 

      ...
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/app",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [ 
          "src/favicon.ico", 
          "src/assets", 
          "./node_modules/leaflet.heat/dist/leaflet-heat.js"
        ],
        "styles": ["src/styles.scss"],
        "scripts": [
          ...
          "src/assets/leaflet-heat.js",
          ...
        ]
      },
      ...
  • 引用 8楼

    将选项 allowSyntheticDefaultImports 更改为 true`` 似乎不会对错误 '\'/app/node_modules/@types/leaflet/index\'' 没有导出成员 'HeatLayer' 产生任何影响。其他选项已经为 true。

  • 引用 9楼

    也许与 typescript 检查导入的方式有关。将其添加到您的 tsconfig：json { \'compilerOptions\': { ... \'esModuleInterop\': true, \'allowSyntheticDefaultImports\': true } }

  • JOR 1月前 0 只看Ta
    引用 10楼

    我添加了我的 dockerfile 以完成。但我不认为这是问题所在，因为 leaftlet 库和其他库都正常工作。只是这个依赖于 leaflet-heatmap 的函数不起作用。如果我将 import 'leaflet-heat'; 更改为 import 'leaflet.heat/dist/leaflet-heat.js'; ，它将无法编译命名空间 '\'/app/node_modules/@types/leaflet/index\'' 没有导出成员 'HeatLayer'。

  • 引用 11楼

    也许你在创建 Dockerfile 时没有正确安装项目依赖项？但如果这不是问题，我会使用 angular.json 中的脚本数组： 

    "scripts": [
  "node_modules/leaflet/dist/leaflet.js",
  "node_modules/leaflet.heat/dist/leaflet-heat.js"
]

    或者，您可以通过将其作为副作用导入来确保 Angular 不会在摇树过程中将其删除。 

    import * as L from 'leaflet';
import 'leaflet.heat/dist/leaflet-heat.js';
返回
作者最近主题：