angular2-masonry won't compile under Angular 5

[web-snake]

Angular 5 has stricter Typescript compilation configurations and will not compile:
node_modules/angular2-masonry/index.ts
The error is:
ERROR in ./node_modules/angular2-masonry/index.ts
Module build failed: Error: myapp/node_modules/angular2-masonry/index.ts is not part of the compilation output. Please check the other error messages for details.

This type script file is incorrectly packed in angular2-masonry according to the Angular team.
You should not package uncompiled .ts files in packages because it can compile diffferently under different configs.
Angular plans to make it even harder for you to use this bad practice in the future. YOur package is already broken for Angular 5.
Here's an Angular team member saying this: angular/angular-cli#8284
( see filipesilva 's comment )

[khalid-halo]

Any work around for the time being?

[JaronrH]

Temporary workaround is to bring the angular2-masonry into a sub-folder of your app. You can that include it as usual using:

import { MasonryModule } from './angular2-masonry';

[rahulmodu]

hello JaronrH
if you import
like import { MasonryModule } from './angular2-masonry';
then ssr will not work

error come=>>>>>>>>>>>>>>>
}( window, function factory( Outlayer, getSize ) {
^

ReferenceError: window is not defined

---

if you running project via ng serve it will work fine

[Gorniv]

take a look https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

[ElkeCodes]

Another workaround is to temporarily add the package in the include array of your tsconfig.json. My full tsconfig.json is this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include":[
    "node_modules/angular2-masonry",
    "src/**/*"
  ]
}

Note that by default there was no include present and I also had to add src/**/* into it to have full compilation of my project.

[gethinoakes]

I've forked this repository and updated it for Angular 5+
https://github.com/gethinoakes/ngx-masonry

Works fine for me. I'll try to work on it more when I have time.

[juhguu]

@gethinoakes ty. 👍

[Shailu4u]

Angular 5 Masonry Module with animations: https://github.com/Shailu4u/ng-masonry-grid

[renzo031109]

Thanks Shailu4u this works for me.