Ember application into AWS S3 bucket

I am having issues with my dependencies when uploading an ember frontend app into S3 AWS hosted on my website. Here are 2 methods I have tried:

• Uploading to S3 from git via CircleCi into S3
• Uploading directly from terminal into S3

These are the steps I used to push the app into S3:

1)ember install ember-cli-deploy-build 2)ember build 3)ember install ember-cli-deploy-s3 4)ember deploy production --verbose --active=true

Using these commands it is rebuilding the application before uploading, I was just wondering if there's a way I can upload all my local files exactly as is into S3 and avoid the rebuild process (As the app works perfectly locally before deploy)?

Any help would be greatly appreciated, thank you

ember test throw error - Cannot read property 'tagName' of undefined

i have migrated ember 3.16 to 3.24
I struck on ember test error. But the app works fine

Chrome 88.0 - [17 ms] - Unit | Service | preferences: it exists
    ---
        actual: >
            null
        stack: >
            TypeError: Cannot read property 'tagName' of undefined
                at Class.setup (https://localhost:4221/assets/vendor.js:41026:134)
                at Class.setupEventDispatcher (https://localhost:4221/assets/vendor.js:42523:18)
                at Class._bootSync (https://localhost:4221/assets/vendor.js:42447:14)
                at https://localhost:4221/assets/vendor.js:45731:77
                at initializePromise (https://localhost:4221/assets/vendor.js:74537:7)
                at new Promise (https://localhost:4221/assets/vendor.js:75038:35)
                at Class.boot (https://localhost:4221/assets/vendor.js:45731:27)
                at https://localhost:4221/assets/test-support.js:3656:65
                at invokeCallback (https://localhost:4221/assets/vendor.js:74510:17)
                at https://localhost:4221/assets/vendor.js:74575:26
        message: >
            Promise rejected before "it exists": Cannot read property 'tagName' of undefined
        negative: >
            false
        browser log: 

emberjs add bootstrap template javascript

I have a bootstrap template with custom css and js that I want to use with ember.js. I am stuck with integrating the js. I have to say that I usually don't work on the frontend side, so if this is an obvious mistake I made, excuse me. I want to stick with the js I have from the template and don't want to include ember-bootstrap for example.

node version: v14.15.5, ember-cli: 3.25.0

npm packages to include: bootstrap@5.0.0-beta2, flickity, flickity-imagesloaded, flickity-as-nav-for, flickity-fade, jarallax

I have identified two tasks here. First, I need to integrate the existing npm packages. Then I need to add the custom scripts.

Current status

1. Packages

I added the npm packages to ember-cli-build.js over app.import()

// ember-cli-build.js file
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {});
  
  app.import("node_modules/bootstrap/dist/js/bootstrap.min.js");
  app.import("node_modules/jarallax/dist/jarallax.min.js", {
    using: [{ transformation: 'cjs', as: 'jarallax' }]
  });
  app.import("node_modules/flickity/dist/flickity.pkgd.min.js");
  app.import("node_modules/flickity-as-nav-for/as-nav-for.js");
  app.import("node_modules/flickity-fade/flickity-fade.js");
  app.import("node_modules/flickity-imagesloaded/flickity-imagesloaded.js");

  return app.toTree();
};

When I go to the debug tab in my browser I see the packages are getting loaded under assets/node_modules/.. but js does not have any effect.

I tried to load the package in index.html over a script tag:

<script type="text/javascript" src="assets/node_modules/flickity/dist/flickity.pkgd.min.js"></script>

I get the error in the browser console window:

Refused to execute http://localhost:4200/assets/node_modules/flickity/dist/flickity.pkgd.min.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.

2. Custom js scripts

The custom scripts have a moin theme.js script that imports everything else.

// js/theme.js
// Theme
import './aos';
import './bigpicture';
// ...

The imported Javascript scripts from theme.js also have imports like

// js/aos.js (imported from theme.js)
import AOS from 'aos';

const options = {
  duration: 700,
  easing: 'ease-out-quad',
  once: true,
  startEvent: 'load'
};

AOS.init(options);

The original theme.js also had import for Bootstrap and the other libraries.

// js/theme.js
// Vendor
import 'bootstrap';
import 'flickity';
// ...
import 'jarallax';

// Theme
import './aos';
import './bigpicture';
// ...

I had the js directory under vendor, public and app the import via the script tag did not work either. Importing from app.js has no effect.

Include Ember Addon dependencies in parent app

I have an Ember addon that gets consumed by my main application.

In the addon I added the https://www.npmjs.com/package/ion-rangeslider to my addon's package.json file.

"dependencies": { 
   "ion-rangeslider": "^2.3.1"
}

I added some imports to my addon's ember-cli-build.js file:

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    }
  });

  app.import('node_modules/ion-rangeslider/js/ion.rangeSlider.js');
  app.import('node_modules/ion-rangeslider/css/ion.rangeSlider.css');
  return app.toTree();
};

Then I use it one of my addons components

import Component from '@glimmer/component';
import $ from 'jquery';

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);

    $('.my-input-element').ionRangeSlider({
      skin: 'round',
      type: 'double',
      min: 0,
      max: 100,
      from: 10,
      to: 30
    });
  }
}

In the context of my addo (dummy app, integration tests, etc...) the slider is initialized and rendered fine:

But when I use the component in my main app I get the following error:

Uncaught TypeError: (0 , _jquery.default)(...).ionRangeSlider is not a function

How can I include/insert the ion-rangeSlider CSS and JS file to my main app via the addon?

PS: if I add the npm package and ember-cli-build.js entries to my main app, it works fine! Bur I'd like to avoid doing this if possible.

Ember-Cordova cannot add android with the version of 8.0.0 or higher

NodeJs version: 10.19.0
NPM version: 7.5.4
When i started to add ember-cordova platform android, it always installed android@6.3.2 version. I cannot install with android@8.0.0 and it always show "EmberCordovaError: Your android platform does not have Api.js". Is there any solution to install ember-cordova platform android as 8.0.0?

How to keep ember bootstrap accordion expanded by default?

what attribute should I pass to keep bootstrap accordion open.

<BsAccordion as |acc|>
  <acc.item @value=1 @title="First item">
    <p>Lorem ipsum...</p>
    <button >
      Next
    </button>
  </acc.item>
  <acc.item @value=2 @title="Second item">
    <p>Lorem ipsum...</p>
  </acc.item>
  <acc.item @value=3 @title="Third item">
    <p>Lorem ipsum...</p>
  </acc.item>
</BsAccordion>

Ember.js: how to catch all JS errors thrown by a component

using ember v3.5, is there a way to catch all JS errors thrown by a component (ex errors thrown in computed fields without having to use try-catch in all computed fields)? Thank you!

Chosing Javascript framework for scalability/availability [closed]

In terms of selecting the right Javascript framework for scalability/high availability, should I have any specific preference there ? Between frameworks like say Angular, React, EmberJS, what are the factors that one should consider to make the framework selection decision ?

Dynamic template arguments for an Ember component

I've run into a situation with a glimmer component that renders a LinkTo component within. The issue is that LinkTo treats the case where @model= and the case of omitting the @model argument as 2 different cases. This is because the default value for it is a special value of UNDEFINED. When this happens the component uses JS to make the transition i.e. the href is # and so you can't use browser commands like Open in new tab to open the resulting link. So I tried using inline ifs

    <LinkTo @route=
    ")}}
    ")}}
    >
    
    </LinkTo>

however, much as I expected this does not work. I've had to resort to having multiple if blocks like so:

    
      <LinkTo @route= @model= @query= @replace=>
        
      </LinkTo>
    
      <LinkTo @route= @models= @query= @replace=>
        
      </LinkTo>
    
      <LinkTo @route= @query= @replace=>
        
      </LinkTo>
    

This works, but is rather verbose and requires a lot of duplication. Is there a way to dynamically pass @model only when it is specified to the parent component?

How to include model relationships in my ruby on rails query response

I am attempting to fetch a backend model (person) from an Ember application. I would like to access a nested model (location) directly in the response from my person model. Therefore, the response needs to include a nested model (location), which has a belongs to relationship on the person model. I have added an allowable_includes method in the person controller, see below. Although my rails query parameters show the location model is included, the location value is null when I attempt to access a value (city) on the location model (location.city) in the frontend. My network response shows included failed for the location model. I know location is not null, because I can view it in my rails console. Is there something I am missing here?

Query Params:
http://localhost:3000/person?include=location

Network Response:
location: {meta: {included: false}}

person_controller.rb:
def allowable_includes
{
  'location' => {}
}

EmberJs: How to resolve Promise Many Array?

i'm really new on Ember and still figuring things out. So i'm sorry for the beginner question.

Hi have a one-to-many relation in my models like:

import Model, { attr, hasMany } from '@ember-data/model';

export default class EventModel extends Model {
  @attr field_1;
  @attr field_2;
  @attr field_n;

  @hasMany('comment') comments;
}

and

import Model, { attr, belongsTo } from '@ember-data/model';

export default class CommentModel extends Model {
  @attr field_1;
  @attr field_2;
  @attr field_n;

  @belongsTo('event') event;
}

The classic "An article has many comments thing"...

Everything goes well on my template when I'm getting Event data, but when I try to get its related comments, Ember gives me a Promise: <DS.PromiseManyArray:ember219>

All my attemps on resolve the promise failed. How can I resolve that?

PATCH request not working in Ember even though POST is working

hi my POST request code works but when I try doing the exact same thing with PATCH (headers are same), I get a 400 bad request error. I checked and the request payload for this PATCH request works when I hit the request on Postman. Here is the async function I am trying to use:

@action async formSave(input) {
      const url = this.store.adapterFor('home').urlForUpdateRecord(input.id);

      return this.fetch.request(url, {
          method: 'patch',
          headers: {
            'Content-Type': 'application/json'
          },
          data: input
        });
    }

Anyone know why its not working with patch?

Ember JS - transitionTo route and then display Feedback message

Since i am a bit newbie and just starting doing some frontend, i am having an issue with EmberJS transitionTo(). The problem is that when i click "delete" inside details of the product, it displays the feedback message there, and then it transits to the home page. I want to transit first to home page if i am at details, and then display the feedback message.

the code i have:

delete: function(system,) {
  const self = this;
  this.get('data').del(systemId)
    .then(function() {
      self.transitionTo('home');
      self.setFeedbackSuccess(self.currentModel, self.get('intl').t('delete.success'));
    }).then(() => self.refresh())
    .then(() => {
      self.transitionTo('home');
      self.setFeedbackSuccess(self.currentModel, self.get('intl').t('delete.success'));
    })
    .catch((errorObject) => {..})
    .catch((errorObject) => self.errorHandler(errorObject, self.currentModel));
},

The first call to the function is where the feedback is displayed at the detail page, if i remove it from there, after .then(() => self.refresh()) it will show nothing from feedback, unless i am at the home page, and delete from there.

Ember.js Test: Integration testing one inside another

I have a situation where I have written test cases for two components, and both components test cases passed successfully.

Now, I want to run actually as then run on production.

lets say: comp2 renders inside comp1 on a button click

1. How can I render one test component inside another
2. Can the child-test-component send information to @parent-test-component on successful completion of its test case

Ember dynamically add a component to another route when form is submitted

I'm very new to Ember and I'm trying to make this small app. I have a form where the user uploads a picture from his computer and inputs a name. Upon clicking the submit button, the user should get redirected to another route where a list of his uploaded pictures with their name will be displayed as cards, sort of. I created the "card" component, but I don't know how to make it so that the component will be rendered only when the user submits the form. The "card" should be generated upon submitting the form and possibly stay on the route, and if the form is submitted again, it will generate another card next to the first one. Is there a way how to do it, either directly with Ember or with JavaScript etc.? Thank you.

Do we have any JS libraries which use Fetch API instead of XHR for upload?

I am using the Ember framework and Dropzone as file uploader. Dropzone is working fine but recently in our application, all the XHR calls stopped working and we were unable to find the root cause for it. The calls to backend happened and in-network tab we see 200 OK but still, XHR calls are not resolved and the page was not getting loading.

So for a temporary workaround, we updated all the XHR called to Fetch which is working fine except Dropzone file uploading. I see Dropzone heavily using XHR which makes it impossible to use Fetch API. I was looking into other file uploading libraries like plupload, filepond, filedrop but all are using XHR for file uploading.

Is there any library that uses Fetch API for file uploading? or we can able to hook any JS library to make use of fetch?

Any help should be really appreciated.

'currentURL()' not working as expected in ember's tests after upgrade

Tests using the 'currentURL()' started to randomly fail when the URL changes more than 2 times (in the same test case).

This started after the application was updated (ember-cli) from the version 1.X to the ~2.16.2.

I've tried (With no positive results):

1. Updating the ember-cli-qunit.

2. Using import { currentURL } from '@ember/test-helpers';.

Dropzone js success and error options are not working

I am using Dropzone.js in my ember application. I have implemented file upload functionality. Whenever I upload a file, The file was getting upload in the backend and in the network tab I see 200 OK but the success option is never getting called even though I have mentioned Dropzone.autoDiscover = false;.

Please find the below code for your reference,

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Component.extend({
  images: [],
  targetClass: 'file-upload-drop',
  templateClass: 'file-upload-template',
  url: config.uploadUrl,
  dropzone: undefined,

  onFileUploaded(file) {},
  onRemovedFile(file) {},
  onFileError(file, error) {},

  _createFileModel(file, data) {
    return Ember.Object.extend({
      file: file
    }, data).create();
  },

  didInsertElement() {
    const url = this.get('url'),
      target = this.$(`.${this.get('targetClass')}`).get(0),
      self = this,
      get = Ember.get;

    this.set('register-as', this);

    var dz = new Dropzone(target, {
      url: url,
      addRemoveLinks: true,

      init() {
        var icons = self.get('images') || [];

        icons.forEach((icon) => {
          var file = {
            id: get(icon, 'id'),
            name: get(icon, 'id'),
            size: get(icon, 'size'),
            status: Dropzone.ADDED,
            type: get(icon, 'mimeType')
          };
          this.options.addedfile.call(this, file);
          this.createThumbnailFromUrl(file, `/api/v1/images/view/${file.name}`);
          this.emit("success". file);
          this.emit("complete", file);
          this.files.push(file);
        });

      }
    });

    dz.on('success', (file, response) => {
      console.log('success');
      file.id = response.id;
      this.get('onFileUploaded')(this._createFileModel(file, response));
    });

    dz.on('error', (file, errorMessage, xhr) => {
    errorMessage = errorMessage || {};

      if (errorMessage.message) {
        //Ember.$('.dz-error-message span', file.previewElement).text(errorMessage.message);

        dz.removeFile(file);

        this.get('onFileError')(file, errorMessage.message);
      }
    });

    dz.on('removedfile', (file) => {
    console.log('removedFile');
      //TODO handle when user removes a file from the list
      this.get('onRemovedFile')(file);
    });

    this.set('dropzone', dz);
  }
});

Please find the above image for your reference. The progress bar is always shown and the success method is not getting called. Is there an issue with Jquery compatibility? I am using jQuery:3.4.1. Any help would be really appreciable.

Why is 'application' not working in a subroute in Ember?

I'm developing an Ember frontend which has to handle an 'application' resource. My router looks like this:

this.route('applications', function() {
   this.route('application', { path: ':application_id'}
   );
);

I get the following error:

Assertion Failed: 'application' cannot be used as a route name.

This seems to conflict with 'application' route of the Ember application.

Changing the route name from 'applications/application' to 'applications/app' works, but this is not very elegant.

Does anybody know if/why a subroute can never be '.../application/...'?

Thank you!

How to create an input in Ember that allows a user to report a problem

In Ember Octane, I am creating a form in which a user can report an issue with the data that has been inputted. This is the refactored code that has been pared down from having a redundant input with an if/else statement.

  

.report {
    width: 10px;
    background-color: $primary;
    border: 1px solid;
    border-radius: 0.5rem;
  }

  .ps-report { width: 10px; color: $primary; }

  .issue { display: none; background-color: $light; border: 1px solid #cccccc; }

  .report:hover + .issue, .ps-report:hover + .issue, .issue:hover { display: inline-block; }

 


 <div class="col">
  <label for="clientFirstName" class="form-label">First Name</label>
  <div class="">
   
     <span class="report"></span>
     <Ui::Button class="issue"  
      >              
     <FaIcon @icon="info-circle" class="text-danger" /></Ui::Button>
    
    <Input @value= @type="text" id="clientFirstName" class="form-control" 
      placeholder="Jane" required="true" autofocus="true" data-test-first-name />
   </div>
  </div>

The input has a blue bar on the side which, when hovered over, shows a button with an icon that places text into a textarea at the top of the page. The report class selector is the blue bar, the issue class selector is the button with the icon.

Is there a better way to go about this? The conditional seems clumsy and verbose, especially having to put it on the div above the actual conditional. This form is used in many places so the conditional has to be there for my specific use case.

Any help would be great, thanks!

Ember js app load from the beginning instead of using willtransition hook

Hello everyone I'm using ember 3.1. The problem I get is when I move to view my profile page from the dashboard instead of just transitioning it loads the whole page which in result slows down my app. My router.js is like this:

Router.map(function () {
  this.route('login', { path: 'login' });
  this.route('main', { path: '/' }, function () {
    this.route('dashboard', { path: '' }, function () {});
    this.route("review", { path: "/review/:docId" }, function() { 
      this.route("edit", { path: "/edit/:bitId" });
      this.route('window_edit');
    });
    this.route("view", { path: "/view/:docId" });
    this.route('pending_view',{ path: "/pending_view/:docId" });
    this.route('profile');
    this.route('loading');
  });

When I go to for example route main.view it goes directly without loading the whole page. It pass through willTransition() hook I added in my app/route.js file but the profile page goes through model() . Will appreciate any help on this

EmberJS Nested routes pictures doesn't load

I have ember.js application.

root /app /components /templates /gallery application.hbs gallery.hbs index.hbs app.js index.html router.js /public /assets --folders with pictures inside which contains pictures

I have 4200/gallery

Which load up pictures without ANY problems.

But in 4200/gallery/nested

It gives me:

GET http://localhost:4200/assets/bb/1.jpg 404 (Not Found)

Where is the problem please ? What do I do wrong it's frustrating that it does load without a problem on gallery page but it doesn't laod up on nested route.

It keeps me away from finishing this project.

Thank you for any answers.