在Angular应用中集成MapLibre GL遇阻：教程代码报错、组件黑屏求助

先明确教程代码的错误 #

你看到的教程代码犯了Angular基础概念错误：它把组件的配置（template、styles）放到了@NgModule装饰器里，但@NgModule本身并没有template这个属性，这就是编译报错的原因。正确的做法是组件用@Component装饰器，模块用@NgModule来管理依赖导入。

针对你的代码的修复方案 #

你的组件黑屏主要有两个原因：未导入MapLibre的组件依赖、地图容器高度设置不合理，以下分两种常用场景给出修复步骤：

场景1：使用传统NgModule模式（你的组件设置standalone: false） #

1. 修正你的MapPage组件代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 400px; /* 不要用100%，除非父容器有明确高度，否则会因高度为0显示黑屏 */
        width: 100%;
      }
    `,
  ],
  standalone: false
})
export class MapPage {
  constructor() {}
}

2. 在对应模块（比如TabsModule或AppModule）中导入MapLibre模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MapPage } from './map-page.component';
import { MapLibreModule } from '@maplibre/ngx-maplibre-gl';

@NgModule({
  declarations: [MapPage],
  imports: [
    CommonModule,
    MapLibreModule // 必须导入这个模块才能使用mgl-map组件
  ],
  exports: [MapPage]
})
export class TabsModule {}

场景2：使用独立组件模式（当前Angular版本更推荐） #

直接修改组件，设置standalone: true并导入所需的MapLibre组件：

import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-tabs',
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 400px; /* 给地图设置明确高度，避免黑屏 */
        width: 100%;
      }
    `,
  ],
  standalone: true,
  imports: [MapComponent] // 直接导入MapComponent即可使用
})
export class MapPage {
  constructor() {}
}

关键注意点 #

• 黑屏核心原因：你设置了height: 100%，但父容器没有明确的高度值，导致地图元素实际高度为0。如果一定要用百分比高度，需要给父容器（包括body、html）都设置height: 100%。
• 依赖前提：确保已经安装了必要的包，执行命令：npm install @maplibre/ngx-maplibre-gl maplibre-gl

内容的提问来源于stack exchange，提问作者user24538254