如何在Angular 5中正确实现OpenLayers 4快速入门示例？

别担心，我帮你一步步搞定这个地图加载的问题！你遇到的ol.js找不到的情况是因为OpenLayers 4本身就是模块化设计的，npm包提供的是ES模块而非单个打包好的JS文件，所以不用纠结找这个文件，按下面的步骤调整配置和代码就行：

1. 确保样式正确引入 #

首先在angular-cli.json里的styles数组中添加OpenLayers的CSS文件，这样地图的样式才能正常显示：

"styles": [
  "styles.css",
  "../node_modules/ol/ol.css"
],

2. 修正组件的导入方式 #

你之前直接导入整个ol包的方式不太对，OpenLayers推荐按需导入需要的模块，这样还能减小打包体积。修改你的map.component.ts代码：

import { Component, OnInit } from '@angular/core';
// 按需导入需要的OpenLayers模块
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import { fromLonLat } from 'ol/proj';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  // 给mapId赋值，对应HTML里的元素ID
  mapId = 'map-container';
  map: Map;

  constructor() { }

  ngOnInit() {
    this.map = new Map({
      target: this.mapId,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: fromLonLat([6.661594, 50.433237]),
        zoom: 3,
      })
    });
  }
}

3. 完善地图容器的HTML #

在map.component.html里添加一个有固定尺寸的地图容器，否则地图会因为没有高度而显示不出来：

<div id="map-container" style="width: 100%; height: 600px;"></div>

4. 确认组件已在模块中声明 #

检查app.module.ts，确保MapComponent已经被添加到declarations数组里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component'; // 导入组件

@NgModule({
  declarations: [
    AppComponent,
    MapComponent // 声明组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么找不到ol.js？ #

OpenLayers 4及以上版本采用了模块化的构建方式，npm发布的包是由多个ES模块文件组成的，没有提供传统的单个ol.js文件。Angular的构建工具（webpack）会自动处理这些模块的导入和打包，所以你不需要手动引入ol.js，只要正确导入模块即可。

现在重新启动你的Angular项目，地图应该就能正常加载显示了！

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