Reveal doesn't work after build:prod --aot

[gwenaellarmet]

When run locally with ng serve --aot or make a simple ng build, everything work as intended but at soon as I build my application with ng build:prod the reveal doesn't work anymore, the overlay class is not added to my div and the popin is render at the bottom of the page as plain html.

It seems that I'm missing the script which add the classes but I don't understand why. after reading the docs several times I didn't found anything related to my issues and I hope it's just an issue with my config

my dependencies versions: "@angular/common": "^7.2.3", "foundation-sites": "6.5.3", "ngx-foundation": "1.0.8", "@angular/cli": "~7.3.0", "typescript": "~3.2.4"

The angular.json build config :

          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/foundation-sites/dist/js/foundation.min.js",
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },

[gwenaellarmet]

Added infos :

adding the script directly in the index.html doesn't help, the issue stay the same

  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js" integrity="sha256-/PFxCnsMh+nTuM0k3VJCRch1gwnCfKjaP8rJNq5SoBg= sha384-9ksAFjQjZnpqt6VtpjMjlp2S0qrGbcwF/rvrLUg2vciMhwc1UJJeAAOLuJ96w+Nj sha512-UMSn6RHqqJeJcIfV1eS2tPKCjzaHkU/KqgAnQ7Nzn0mLicFxaVhm9vq7zG5+0LALt15j1ljlg8Fp9PT1VGNmDw==" crossorigin="anonymous"></script>

[Nefonfo]

I have the same problem when i code ng build --prod, i click the hamburger AND doesn't appear the reveal

[vaimeo]

For now until this issue is resolved officially you can do add following jQuery code to add missing class to model content

$('modal-container').addClass('reveal-overlay');
$('div[role=document]').addClass('reveal').removeClass('modal-dialog');

And Add following CSS on same component or root component

.reveal
{

align-content: normal;
align-items: normal;
align-self: auto;
alignment-baseline: auto;
all: ;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
backface-visibility: hidden;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: rgb(254, 254, 254);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
baseline-shift: 0px;
block-size: 546.469px;
border-block-end-color: rgb(202, 202, 202);
border-block-end-style: solid;
border-block-end-width: 1px;
border-block-start-color: rgb(202, 202, 202);
border-block-start-style: solid;
border-block-start-width: 1px;
border-bottom-color: rgb(202, 202, 202);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-inline-end-color: rgb(202, 202, 202);
border-inline-end-style: solid;
border-inline-end-width: 1px;
border-inline-start-color: rgb(202, 202, 202);
border-inline-start-style: solid;
border-inline-start-width: 1px;
border-left-color: rgb(202, 202, 202);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(202, 202, 202);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(202, 202, 202);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
bottom: -100px;
box-shadow: none;
box-sizing: border-box;
break-after: auto;
break-before: auto;
break-inside: auto;
buffered-rendering: auto;
caption-side: top;
caret-color: rgb(10, 10, 10);
clear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: rgb(10, 10, 10);
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
color-rendering: auto;
column-count: auto;
column-fill: balance;
column-gap: normal;
column-rule-color: rgb(10, 10, 10);
column-rule-style: none;
column-rule-width: 0px;
column-span: none;
column-width: auto;
contain: none;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
cx: 0px;
cy: 0px;
d: none;
direction: ltr;
display: block;
dominant-baseline: auto;
empty-cells: show;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flex-basis: auto;
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
font-family: Montserrat, sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-size: 16px;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variation-settings: normal;
font-weight: 400;
grid-auto-columns: auto;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-column-end: auto;
grid-column-start: auto;
grid-row-end: auto;
grid-row-start: auto;
grid-template-areas: none;
grid-template-columns: none;
grid-template-rows: none;
height: 546.469px;
hyphens: manual;
image-rendering: auto;
inline-size: 576px;
isolation: auto;
justify-content: normal;
justify-items: normal;
justify-self: auto;
left: 0px;
letter-spacing: normal;
lighting-color: rgb(255, 255, 255);
line-break: auto;
line-height: 24px;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-block-end: 0px;
margin-block-start: 0px;
margin-bottom: 0px;
margin-inline-end: 672px;
margin-inline-start: 672px;
margin-left: 672px;
margin-right: 672px;
margin-top: 0px;
marker-end: none;
marker-mid: none;
marker-start: none;
mask: none;
mask-type: luminance;
max-block-size: none;
max-height: none;
max-inline-size: 1000px;
max-width: 1000px;
min-block-size: 0px;
min-height: 0px;
min-inline-size: 0px;
min-width: 0px;
mix-blend-mode: normal;
object-fit: fill;
object-position: 50% 50%;
offset-distance: 0px;
offset-path: none;
offset-rotate: auto 0deg;
opacity: 1;
order: 0;
orphans: 2;
outline-color: rgb(10, 10, 10);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-anchor: auto;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: hidden;
overscroll-behavior-x: auto;
overscroll-behavior-y: auto;
padding-block-end: 16px;
padding-block-start: 16px;
padding-bottom: 16px;
padding-inline-end: 16px;
padding-inline-start: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
page: ;
paint-order: normal;
perspective: none;
perspective-origin: 288px 273.234px;
pointer-events: auto;
position: relative;
quotes: ;
r: 0px;
resize: none;
right: 0px;
row-gap: normal;
rx: auto;
ry: auto;
scroll-behavior: auto;
scroll-margin-block-end: 0px;
scroll-margin-block-start: 0px;
scroll-margin-bottom: 0px;
scroll-margin-inline-end: 0px;
scroll-margin-inline-start: 0px;
scroll-margin-left: 0px;
scroll-margin-right: 0px;
scroll-margin-top: 0px;
scroll-padding-block-end: auto;
scroll-padding-block-start: auto;
scroll-padding-bottom: auto;
scroll-padding-inline-end: auto;
scroll-padding-inline-start: auto;
scroll-padding-left: auto;
scroll-padding-right: auto;
scroll-padding-top: auto;
scroll-snap-align: none;
scroll-snap-stop: normal;
scroll-snap-type: none;
shape-image-threshold: 0;
shape-margin: 0px;
shape-outside: none;
shape-rendering: auto;
size: ;
speak: normal;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
tab-size: 8;
table-layout: auto;
text-align: start;
text-align-last: auto;
text-anchor: start;
text-combine-upright: none;
text-decoration-color: rgb(10, 10, 10);
text-decoration-line: none;
text-decoration-skip-ink: auto;
text-decoration-style: solid;
text-indent: 0px;
text-orientation: mixed;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-size-adjust: 100%;
text-transform: none;
text-underline-position: auto;
top: 100px;
touch-action: auto;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-box: view-box;
transform-origin: 288px 273.234px;
transform-style: flat;
transition-delay: 0s, 0s;
transition-duration: 0.3s, 0.3s;
transition-property: transform, -webkit-transform;
transition-timing-function: ease-out, ease-out;
unicode-bidi: normal;
user-select: auto;
vector-effect: none;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: 576px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
writing-mode: horizontal-tb;
x: 0px;
y: 0px;
z-index: 1006;
zoom: 1;
-webkit-app-region: none;
-webkit-appearance: none;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-font-size-delta: ;
-webkit-font-smoothing: antialiased;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-line-clamp: none;
-webkit-locale: "en";
-webkit-margin-after-collapse: collapse;
-webkit-margin-before-collapse: collapse;
-webkit-margin-bottom-collapse: collapse;
-webkit-margin-top-collapse: collapse;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position-x: 0%;
-webkit-mask-position-y: 0%;
-webkit-mask-repeat-x: ;
-webkit-mask-repeat-y: ;
-webkit-mask-size: auto;
-webkit-perspective-origin-x: ;
-webkit-perspective-origin-y: ;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
-webkit-ruby-position: before;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(10, 10, 10);
-webkit-text-emphasis-position: over right;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(10, 10, 10);
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(10, 10, 10);
-webkit-text-stroke-width: 0px;
-webkit-transform-origin-x: ;
-webkit-transform-origin-y: ;
-webkit-transform-origin-z: ;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-border-image: none;
-webkit-text-orientation: vertical-right;
}

[tazilios]

$('modal-container').addClass('reveal-overlay');
$('div[role=document]').addClass('reveal').removeClass('modal-dialog');

Hi Vaimeo,

Having the same issue, where do you place those lines exactly?

$('modal-container').addClass('reveal-overlay'); $('div[role=document]').addClass('reveal').removeClass('modal-dialog');

Cheers

Anastasios

[RobertKitzing]

any progress here? got the same issue

[tazilios]

Some weeks ago, I wanted to implement the accordion feature. After having lost hours in trying to configure it, I finally choose for an alternative outside Zurb. I was sooo happy to find this ngx-foundation component since I needed a "reveal" component What a disappointment to see this feature does not work...

[RobertKitzing]

I found out the the modal-container.component.metadata.json seams to be outdated, thats why the AOT build uses a wrong template string.

"arguments": [ { "selector": "modal-container", "template": "\n <div [class]=\"'modal-dialog' + (config.class ? ' ' + config.class : '')\" role=\"document\">\n <div class=\"modal-content\">\n <ng-content></ng-content>\n </div>\n </div>\n ", "host": { "class": "modal", "role": "dialog", "tabindex": "-1", "[attr.aria-modal]": "true", "$quoted$": [ "[attr.aria-modal]" ] } } ]

instead of : "arguments": [ { "selector": "modal-container", "template": "\n <div [class]=\"'reveal' + (config.class ? ' ' + config.class : '')\" role=\"document\" style=\"display: block;\">\n <div class=\"modal-content\">\n <ng-content></ng-content>\n </div>\n </div>\n ", "host": { "class": "reveal-overlay", "role": "dialog", "tabindex": "-1", "[attr.aria-modal]": "true", "$quoted$": [ "[attr.aria-modal]" ] } } ]

If i change the metadata.json directly the AOT build does work with a nice Modal-Dialog. I am not quite sure how to fix this in a good way. Any Ideas? like in my PR ?

[yherasymchukarchitech]

I could confirm the same issue with

"@angular/core": "7.0.3",
"@angular/common": "7.0.3",
"foundation-sites": "^6.5.3",
"ngx-foundation": "^1.0.8",