You may need an appropriate loader to handle this file type

[steuraa]

I added mangol to an angular2/typescript project with webpack but not with angular_cli. I added import 'openlayers/dist/ol.js'; import 'proj4/dist/proj4.js'; import 'jspdf/dist/jspdf.min.js'; to vendor.ts which is specified as an entry point in the webpack.config.json.

After building I'm getting the following errors:

./~/mangol/src/lib/modules/_index.ts Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/modules/_index.ts Unexpected character '@' (21:0) You may need an appropriate loader to handle this file type.	];
@NgModule({
imports: [
MangolMapModule.forRoot(),

@ ./~/mangol/src/lib/_index.ts 2:0-33 @ ./~/mangol/index.ts @ ./ClientApp/app/app.module.ts @ ./ClientApp/main.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts errors ./~/mangol/src/lib/core/map.ts Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/map.ts Unexpected token (7:11) You may need an appropriate loader to handle this file type.	export class MangolMap extends ol.Map {
options: any;
layers: MangolLayer[];

@ ./~/mangol/src/lib/core/_index.ts 1:0-22 @ ./~/mangol/src/lib/_index.ts @ ./~/mangol/index.ts @ ./ClientApp/app/app.module.ts @ ./ClientApp/main.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts errors ./~/mangol/src/lib/core/layergroup.ts Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/layergroup.ts Unexpected token (3:8) You may need an appropriate loader to handle this file type.	export class MangolLayergroup {
name: string;
children: any[];
expanded: boolean;

@ ./~/mangol/src/lib/core/_index.ts 2:0-29 @ ./~/mangol/src/lib/_index.ts @ ./~/mangol/index.ts @ ./ClientApp/app/app.module.ts @ ./ClientApp/main.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts errors ./~/mangol/src/lib/core/layer.ts Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/layer.ts Unexpected token (3:8) You may need an appropriate loader to handle this file type.	export class MangolLayer {
name: string;
layer: any;
opacity: number;

@ ./~/mangol/src/lib/core/_index.ts 3:0-24 @ ./~/mangol/src/lib/_index.ts @ ./~/mangol/index.ts @ ./ClientApp/app/app.module.ts @ ./ClientApp/main.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts errors ./~/mangol/src/lib/services/map.service.ts Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/services/map.service.ts Unexpected character '@' (4:0) You may need an appropriate loader to handle this file type.	import { MangolMap } from '../core/_index';
@Injectable()
export class MangolMapService {
maps: MangolMap[];

@ ./~/mangol/src/lib/services/_index.ts 1:0-30 @ ./~/mangol/src/lib/_index.ts @ ./~/mangol/index.ts @ ./ClientApp/app/app.module.ts @ ./ClientApp/main.ts @ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts

If you need any other info, shoot!

[fegyi001]

I guess your config is not right. Upgrade angular-cli to its newest version (at the moment 1.2.0), create a blank project and see how everything is configured there. I recently did that, added Mangol to its main component, and it works just fine.