Console Module parse errors when compiling in Angular project

[heavis]

I import latest ol and ol-mapbox-style pakcage, and I only write one line code 'apply('map', this.serverHost + 'event_didi.json');', but error occured when compiling.

ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color.js Module parse failed: Unexpected token (17:5) You may need an appropriate loader to handle this file type. | */ | class Color { | r: number; | g: number; | b: number; ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/expression/index.js Module parse failed: Unexpected token (19:12) You may need an appropriate loader to handle this file type. | import { success, error } from '../util/result'; | | import type {Type} from './types'; | import type {Value} from './values'; | import type {Expression} from './expression'; ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/feature_filter/index.js Module parse failed: Unexpected token (5:12) You may need an appropriate loader to handle this file type. | import { createExpression } from '../expression'; | | import type {GlobalProperties} from '../expression'; | export type FeatureFilter = (globalProperties: GlobalProperties, feature: VectorTileFeature) => boolean; | ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/interpolate.js Module parse failed: Unexpected token (5:24) You may need an appropriate loader to handle this file type. | import Color from './color'; | | export function number(a: number, b: number, t: number) { | return (a * (1 - t)) + (b * t); | } ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/function/convert.js Module parse failed: Unexpected token (7:12) You may need an appropriate loader to handle this file type. | import extend from '../util/extend'; | | import type {StylePropertySpecification} from '../style-spec'; | | export default convertFunction; ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color_spaces.js Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. | import {number as interpolateNumber} from './interpolate'; | | type LABColor = { | l: number, | a: number, ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/expression/definitions/interpolate.js Module parse failed: Unexpected token (9:12) You may need an appropriate loader to handle this file type. | import { findStopLessThanOrEqualTo } from '../stops'; | | import type { Stops } from '../stops'; | import type { Expression } from '../expression'; | import type ParsingContext from '../parsing_context';

[ahocevar]

I have no experience with Angular, but the error message above comes from Webpack. You will need to configure Webpack to use the babel-loader for the node_modules directory, and you need to configure babel to strip flow types (see #89).

[paperslayer]

I too am having the same issue. The following entry did not work for me. { test: /.js$/, loader: 'babel-loader', include: [ path.resolve(__dirname, 'node_modules/@mapbox'), path.resolve(__dirname, 'node_modules/ol-mapbox-style') ], exclude: /node_modules/(?!(@mapbox|ol-mapbox-style)/).*/, options: { presets: ['@babel/preset-env'], plugins: ['babel-plugin-transform-flow-strip-types'], } }