Cannot display image from Symfony to Angular

2021-01-25 13:32 pheromix imported from Stackoverflow

There is an image in the public folder of my Symfony project. I placed it in the root directory of the project inside a folder named images. Then in my Angular component I want to access it :

@Component({
  selector: 'app-tiers',
  templateUrl: './tiers.component.html',
  styleUrls: ['./tiers.component.scss']
})
export class TiersComponent implements OnInit {
  ...
  imagePath = 'http://localhost:4300/images/dflt.png';
  ...
}

In the Angular template :

...
<img [src]="imagePath" >
...

But at runtime the image is not displayed ; the dev console returned Not found.

Then I moved the image in the folder named public within the Symfony root. But still cannot display the image.

So what is the problem ?

See also questions close to this topic

How to deselect a selected option in mat-selection-list with one single selection

sorry if this question has been answered before.

I'm using angular-material 11 (I'm new)

I have a mat-selection-list with one single selection.

I'm unable to deselect the option that I selected in order to leave the list without any selections again, as it was at the beginning.

Basically I just need to be able to leave the list empty again.

Thanks!

An object literal cannot have multiple properties with the same name in strict mode. The property "path" says to be duplicated

import { CustomerComponenet } from "src/CustomerApp/CustomerApp.component";
import { LoginComponent } from "./LoginApp.component";

export const CustomerRoutes = [{
  path: '',
  component: LoginComponent,
  path: 'Customer',
  component: CustomerComponenet,
  path: 'Login',
  component: LoginComponent
}]

Why my ajax will skip the .done and proceed to next step?

I would like to push data into an array and count the length to get result but when I run it will count length first then only jump back to push, how can I do? Here is my code:

  $scope.member.submit = function() 
        {
            var errProfile = new Array();
            mobile.ow('show');
            var promise = new Promise(function(resolve, reject) {
                angular.forEach($scope.member.profileListObj, function(v, k) 
                {
                    if(v.statusCode === "E001")
                    {
                        $.ajax({
                            url: '/CashWallet/services/controller.php',
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                action: 'receive',
                                profileId : v.id,
                                access_token: _accessToken,
                                isTest: '1'
                            },
                        })
                        .done(function(e) {
                            if (e.retCode !== 1) {
                                errProfile.push(v.name+' : '+ e.msg);
                            }
                            console.log("push");                               
                            $scope.$apply();   
                        })
                        .fail(function() {
                        })
                        .always(function() {
                            
                        });
                    }
                });
            });
                console.log("err",errProfile);
                    if(errProfile.length > 0 ){
                        swal({
                            type: 'error',
                            title: 'fail',
                            text: errProfile.join("\n"),
                            confirmButtonText: 'confirm',
                        },
                        function(){
                            $scope.member.refreshBtn();
                        });
                    }
                    else{
                        swal({
                            type: 'success',
                            title: 'success',
                            confirmButtonText: 'confirm',
                        },
                        function(){
                            $scope.member.refreshBtn();
                        });
                    }
        }

This is my Console.log result: enter image description here

Symfony Doctrine one-to-many returns empty collection
I have three models: User (created with the make:user command), FooUser (representing a user of a third-party app), and Submission (representing the submissions of a FooUser). FooUser has a one-to-many relation with Submission, and a many-to-many relation to User.
```
class FooUser
{
    // ...

    /**
     * @ORM\OneToMany(targetEntity=Submission::class, mappedBy="user")
     * @ORM\OrderBy({"id" = "DESC"})
     */
    private $submissions;

    /**
     * @ORM\ManyToMany(targetEntity=User::class, mappedBy="foouser")
     */
    private $users;

    // ...
}

class Submission
{
    // ...

    /**
     * @ORM\ManyToOne(targetEntity=FooUser::class, inversedBy="submissions")
     * @ORM\JoinColumn(nullable=false)
     */
    private $user;

    // ...
}
```
In the submissions table the user column is called user_id.

The problem: When I call $fooUser->getSubmissions() it returns an empty collection. Similarly, $fooUser->getSubmissions()->count() it returns 0. This despite the fact that there are submissions for this FooUser in the database. Is there anything obviously wrong with the way the relations are set up?

Codeception: How to stub return of a function in a Symfony module

I need to write APItests for a project(on Symfony) using Codeception. My API test is functional and using Symfony+REST modules. The Api method I'm testing uses an external service call. I just stub the response of the class method, but the stub does not work and the real class method is called. What do I need to fix in my test code or maybe I need to use another way?

Config codeception.yml

namespace: App\Tests
paths:
    tests: tests
    output: tests/_output
    data: tests/_data
    support: tests/_support
    envs: tests/_envs
actor_suffix: Tester
bootstrap: codeception_bootstrap.php
extensions:
    enabled:
        - Codeception\Extension\RunFailed
params:
    - .env.test

Config api.suite.yml

actor: ApiTester
modules:
    enabled:
        - Symfony:
            app_path: 'src'
            environment: 'test'
        - Doctrine2:
            depends: Symfony
            cleanup: true
        - REST:
            url: /api/v1/
            depends: Symfony
        - \App\Tests\Helper\Api

Test code /tests/api/TestCest.php

    namespace App\Tests\Api;
    use App\Tests\ApiTester;

    class TestApiCest extends BaseApiCest
    {
      public function addMetrics(ApiTester $I)
        {
            $this->mockB2bService($I);
            $I->sendPost('/request', $body);
            $I->seeResponseCodeIs(201);
        }
    }

Code for stubing

/tests/_support/Helper/ApiHelper.php

namespace App\Tests\Helper;
use Codeception\Module;
use Symfony\Component\DependencyInjection\ContainerInterface;

class ApiHelper extends Module
{
    public function getContainer(): ContainerInterface
    {
        /** @var Module\Symfony $symfony */
        $symfony = $this->getModule('Symfony');
        return $symfony->kernel->getContainer();
    }
}

/api/BaseApiCest.php

namespace App\Tests\Api;
use App\Module\Service\B2BService\B2bResponse;
use App\Tests\ApiTester;
use App\Tests\Helper\ApiHelper;
use Codeception\Stub;

abstract class BaseApiCest
{
    protected ApiHelper $apiHelper;
    protected function _inject(ApiHelper $apiUser)
    {
        $this->apiHelper = $apiUser;
    }

protected function mockB2bService(ApiTester $I): void
    {
        $container = $this->apiHelper->getContainer();
        $serviceId = '\App\Module\Service\B2BService\B2bService';

        $auth = Stub::make(
            \App\Module\Service\B2BService\B2bService::class, [
            'createSomeActive' => new B2bResponse(['success' => true, 'message' => '', 'code' => 200])
        ]);
        $container->set($serviceId, $auth);
        $I->persistPermanentService($serviceId);

    }

Class I try to stub

/src/Module/Service/B2bService.php

class B2bService implements B2bServiceInterface
{
public function createSomeActive(SomeParams $params): B2bResponse
    {
        $response = $this->httpClient->post('/somerequest', $requestBody);
        $decodedResponse = $this->jsonDecodeResponse($response);
        return $decodedResponse;
       //if sucsess then return ['success' => true, 'message' => '', 'code' => 200]
    }
}

symfony PHPUnit problem installation Xdebug for --coverage-html

i want to do --coverage-html command with PHPUnit for a project but i think i need to install Xdebug but I can't. I run php 7.3 and I'm on Mac. Suddenly when I run php bin/phpunit --coverage-html web/test-coverage, he tells me error: No code coverage driver is available so I try to install Xdebug, I run pecl install xdebug but, he tells me Cannot install, php_dir for channel "pecl.php.net" is not writeable by the current user.

I try to do this pecl config-set php_dir /path/to/new/dir and it does not work or I put a wrong path.

I try also with sudo but don't work

and I think my php.ini file is good.

if you have any info i'm a taker!

thank you in advance
Invalid data "client" (integer), expected "Entity" JsonDeserializationVisitor.php line 162

Recently upgraded a Symfony app from 3.4 to 4.4 and along with that upgraded jms/serializer-bundle from 2.1.0 to 3.8.0 and with that came this error message

[2021-03-04 16:55:46] request.CRITICAL: Uncaught PHP Exception JMS\Serializer\Exception\RuntimeException: "Invalid data "client" (integer), expected "App\Entity\Report\Report"." at /var/www/vendor/jms/serializer/src/JsonDeserializationVisitor.php line 162 {"exception":"[object] (JMS\Serializer\Exception\RuntimeException(code: 0): Invalid data "client" (integer), expected "App\Entity\Report\Report". at /var/www/vendor/jms/serializer/src/JsonDeserializationVisitor.php:162)"} []

Now I'm near the end of the upgrade but this one issue is stopping me from making any progress and it's something to do with the way our app works with JMS.

The repo I'm working on is public UK Government application located here https://github.com/ministryofjustice/opg-digideps/pull/593/files

Symfony4.4: CSV output is not possible

I updated the app from Symfony 3.4 to 4.4 and verified the operation.
The function to output csv does not work, and when I press the button, the page redirects.
It is implemented by the method of the link below, but the official document is only up to 4.2.
Is there an alternative to 4.2 or later?

https://symfony.com/doc/4.1/templating/formats.html

Controller

    /**
     * @Route("/", defaults={"_format"="html"}, requirements={"_format"="html|csv"})
     * @Method("GET")
     *
     * @Template("@AppBundle/Hq/Post/index.html.twig")
     */
    public function indexAction(Request $request)
    {
        if ($request->getRequestFormat() == 'html') {
            // At the time of html output
        } elseif ($request->getRequestFormat() == 'csv') {
            // At the time of csv output
            // Set file name, no pagination
            $request->attributes->set('filename', 'post_article.csv');
        }

index.html.twig

    <button type="submit" class="btn" name="_format" value="csv">
        <i class="icon-download"></i> CSV output
    </button>

CsvListener

class CsvResponseListener
{
    /**
     * kernel.response Set the response at the time of CSV output in the event
     */
    public function onKernelResponse(FilterResponseEvent $event)
    {
        $request = $event->getRequest();
        $response = $event->getResponse();

        // Set the response at the time of CSV output in the event
        if ($request->getRequestFormat() === 'csv' && $response->getStatusCode() == 200) {
            // Convert response body to CRLF, SJIS-WIN
            $content = str_replace("\n", "\r\n", $response->getContent());
            $content = mb_convert_encoding($content, 'SJIS-WIN', 'UTF-8');
            $response->setContent($content);

            // Get the file name
            $filename = $request->attributes->get('filename', 'download.csv');

            // Set header for file download
            $response->headers->set('Content-Type', 'application/octet-stream');
            $response->headers->set('Content-Transfer-Encoding', 'binary');
            $response->headers->set('Content-Disposition', 'attachment; filename="'.$filename.'"');
            $response->headers->set('Content-Length', strlen(bin2hex($content)) / 2);
        }
    }
}

services.yaml

    app.listener.csvResponseListener:
        class: AppBundle\Listener\CsvResponseListener
        tags:
            - { name: kernel.event_listener, event: kernel.response, method: onKernelResponse }

Doctrine - multiple conditions
I would like to write doctrine query which will return true if it finds selected id with three different statuses like:
```
    $query =  $this->createQueryBuilder('e');

    $query ->select($query->expr()->countDistinct('e.id'))
        ->where('e.workspaceId =:workspaceId')
        ->andWhere("e.status IN(:statuses)")
        ->setParameter('workspaceId', $workspaceId)
        ->setParameter('statuses', array_values($statuses))
        ->groupBy('e.id')
        ->getQuery()
        ->getSingleScalarResult();

if ($query === 3) {
  return true;
} else {
  return false;
}
```
If one of the combinations is not found like, for example, given id and second status, than it will be returned false..

This is my try as I can not find right approach to do that. Example with be do to id with findBy() in separate methods but I would like to find solution that can be inputed in one method with query builder.

Migration from Angular 9 to Angular 10 is giving error

Below is the Error screenshot, Error is coming when we run the ng update @angular/core@10 @angular/cli@10 command (During the update step)

Package.json

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc",
    "sonar": "sonar-scanner"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.4",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/localize": "^10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "amazon-cognito-identity-js": "^3.3.3",
    "core-js": "^2.6.12",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "ng-pick-datetime": "^7.0.0",
    "ngx-pagination": "^5.0.0",
    "npm": "^7.5.6",
    "rxjs": "^6.5.5",
    "tslib": "^1.14.1",
    "uuid": "^8.3.2",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.901.15",
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular-devkit/core": "~10.2.3",
    "@angular-devkit/schematics": "~10.2.3",
    "@angular/cli": "~10.2.3",
    "@angular/compiler-cli": "~10.2.4",
    "@angular/language-service": "~10.2.4",
    "@ionic/angular-toolkit": "~2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^5.4.4",
    "sonar-scanner": "^3.1.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.7"
  }

}

Angular 9.1 to 10 Migration is throwing error

Error:

Found: @angular-devkit/build-angular@0.901.15
node_modules/@angular-devkit/build-angular
dev @angular-devkit/build-angular@"^0.1002.3" from the root project
peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.1.2
node_modules/@ionic/angular-toolkit
dev @ionic/angular-toolkit@"~2.1.1" from the root project

Package.json

{
  "name": "device-management-ui",
  "version": "2.5",
  "author": "LTTS",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc",
    "sonar": "sonar-scanner"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.4",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/localize": "^10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "amazon-cognito-identity-js": "^3.3.3",
    "core-js": "^2.6.12",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "ng-pick-datetime": "^7.0.0",
    "ngx-pagination": "^5.0.0",
    "npm": "^7.5.6",
    "rxjs": "^6.5.5",
    "tslib": "^1.14.1",
    "uuid": "^8.3.2",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.901.15",
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular-devkit/core": "~10.2.3",
    "@angular-devkit/schematics": "~10.2.3",
    "@angular/cli": "~10.2.3",
    "@angular/compiler-cli": "~10.2.4",
    "@angular/language-service": "~10.2.4",
    "@ionic/angular-toolkit": "~2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^5.4.4",
    "sonar-scanner": "^3.1.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.7"
  },
  "description": "UBIQManage"
}

How can I solve the below error in Angular v6 -> v11

How can I resolve the following error in Angular after upgrading from v6 to v11?

An unhandled exception occurred: Failed to compile entry-point ngx-editor (es2015 as esm2015) due to compilation errors:node_modules/ngx-editor/fesm2015/ngx-editor.js:1147:26 - error NG1010: Value at position 3 in the NgModule.imports of NgxEditorModule is not a reference Value could not be determined statically.

1147 imports: [CommonModule, FormsModule, ReactiveFormsModule, PopoverModule.forRoot()], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/ngx-editor/fesm2015/ngx-editor.js:1147:75 1147 imports: [CommonModule, FormsModule, ReactiveFormsModule, PopoverModule.forRoot()], ~~~~~~~~~~~~~~~~~~~~~ Unable to evaluate this expression statically. node_modules/ngx-editor/fesm2015/ngx-editor.js:1147:75 1147 imports: [CommonModule, FormsModule, ReactiveFormsModule, PopoverModule.forRoot()], ~~~~~~~~~~~~~ Unknown reference.

See "C:\Users\cis\AppData\Local\Temp\ng-S48jMx\angular-errors.log" for further details.

Related questions

Cannot display image from Symfony to Angular

See also questions close to this topic