8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

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)
  • 我不确定这是否是同一个问题,但我 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 .

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

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

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

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

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

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

    首先我们需要把这个脚本添加到 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",
              ...
            ]
          },
          ...
    
  • 将选项 allowSyntheticDefaultImports 更改为 true`` 似乎不会对错误 '\'/app/node_modules/@types/leaflet/index\'' 没有导出成员 'HeatLayer' 产生任何影响。其他选项已经为 true。

  • 也许与 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'。

  • 也许你在创建 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';
    
返回
作者最近主题: