Using angular2-calendar with webpack

[fmoessle]

Hi,

I don't get the angular2-calendar running with webpack.
I am using this starter: https://github.com/qdouble/angular-webpack2-starter

Npm throws this error, when building the app:

WARNING in ./~/angular2-calendar/~/calendar-utils/dist/src/calendarUtils.js Cannot find source file '../../src/calendarUtils.ts': Error: Can't resolve '../../src/calendarUtils.ts' in '/Users/Flo/projects/angular2-webrtc/node_modules/angular2-calendar/node_modules/calendar-utils/dist/src' @ ./~/angular2-calendar/dist/esm/src/components/week/calendarWeekView.component.js 2:0-64 @ ./~/angular2-calendar/dist/esm/src/index.js @ ./src/app/app.imports.ts @ ./src/app/app.module.ts @ ./src/main.browser.ts @ multi main

What I did:

1. Installed angular2-calendar: npm install angular2-calendar --save

2. Copy required css to dist via COPY_FOLDERS:
   { from: 'node_modules/angular2-calendar/dist/css/angular2-calendar.css' },
   and added this to index.html: <link rel="stylesheet" href="angular2-calendar.css">

3. Import Module: CalendarModule.forRoot()

I don't see why it does not work? Any advise?

[fmoessle]

Turns out, that this solution works.

But maybe someone would like to read these steps.

Issue can be closed

[mattlewis92]

I think your issue was caused by webpack trying to transpile the library in node_modules which shouldn't be done as it's already transpiled: https://github.com/qdouble/angular-webpack2-starter/blob/master/webpack.config.ts#L132

[SebastianPodgajny]

I'm still having this issue

Cannot find source file '../src/calendar-utils.ts': Error: Can't resolve '../src/calendar-utils.ts'
Cannot find source file '../src/positioning.ts': Error: Can't resolve '../src/positioning.ts'

any tips?

[mattlewis92]

It sounds like your webpack config is trying to transpile your node_modules folder, make sure you have exclude: path.resolve(__dirname, 'node_modules') set on the typescript loader that is transpiling your app.

[AhmedHamedTN]

@SebastianPodgajny I had the same errors, I figured this out, just add these packages to your package.json file . I don't think it is mentioned in the library though

"dependencies": {
"angular-draggable-droppable": "^1.1.1",
"angular-resizable-element": "^1.2.4",
"calendar-utils": "0.0.59",
"date-fns": "^1.28.5",
"positioning": "^1.3.1"
}

then,
npm install