X Tutup
The Wayback Machine - https://web.archive.org/web/20220323080515/https://gitter.im/angular/angular

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Rafe
@kemmis_twitter
I have a service X that currently is scoped to my component C and gets shared between that component and its descendants. Now I need to inject that service into a Resolver for C's route, but that service X isn't available at the Resolver level. Is there a way scope services at the Route level so they can be unique per-route natigation?
Krishna
@krishyalla_twitter
Hi Angular devs, I want your expert opinion and suggestion on my question. I have two components ListComponent and DetailComponent. When app loads ListComponent loads by making an api call with the list of items and upon click on the item it navigate to Detail Component with different url this.router.navigate([url], queryparams) and I have a link on the detailcomponent says Go to List which will navigate back to this.router.navigate([url]) ListComponent. At this time I dont want to make an api call again to fetch the list of items. How I can solve this? Please respond with your valuable suggestions.
2 replies
Joseph Straub
@josephrstraub

Hello! I find myself running into the same problem in all of my Angular applications and I'm having the hardest time knowing what to Google for a solution. The problem: I feel like I write a lot of components and services that do VERY similar things but I can't quite figure out how to make them more generic. In my example app, I have candidates and employees components. Each has a corresponding service.

https://stackblitz.com/edit/angular-ivy-92xryd?file=src/app/app.component.html

I can't fight the feeling that I could write something similar to a HOF that could help me sort of "generate" these components and services on the fly. It just feels very redundant to be writing these components and services that are basically performing the same CRUD-type operations. And it seems like it inhibits scalability. I'm not sure exactly what it is I'm looking for but it seems like I'm missing something. Thanks for your help!

Manan mal
@mal_manan_twitter
Hi, I am new to angular animations and I am having a glitch when my accordion slides up. Can anyone provide any suggestion? Link: https://stackoverflow.com/questions/71399093/glitch-in-the-animation-while-the-accordion-slides-up
robert-brower-impaq
@robert-brower-impaq
@kemmis_twitter put the service in a shared module
Liveloper
@liveloper
Hello all :) what tool do you recommend me to use to test e2e in native applications? I have tried webdriverio with appium but the implementation was quite complicated and I am not convinced to use it. Thanks in advance !
Prasad Mokkapati
@prasadmokkapati_twitter
If I have the html/javascript files in the same directory where the server is running can I avoid CORS since the files are not in a different path ?
robert-brower-impaq
@robert-brower-impaq
@prasadmokkapati_twitter it has nothing to do with path. It has to do with domain. So if all yours files are on one domain then you need not worry about cors
Prasad Mokkapati
@prasadmokkapati_twitter
That's great. Just want to verify. When you mean all files in one domain - say the path is https://xxx.yyy.com and the server code and html/javascript are in the same path. No need to add cors - http://localhost:3000 or using node .. ?
Prasad Mokkapati
@prasadmokkapati_twitter
That's great. Just want to verify. When you mean all files in one domain - say the path is https://xxx.yyy.com and the server code and html/javascript are in the same path. No need to add cors - http://localhost:3000 or using node or npm ?
robert-brower-impaq
@robert-brower-impaq
@prasadmokkapati_twitter Like I said, it has nothing to do with the file path. It has to do with the domain. It is not possible to run angular and a backend process on the same port, so you need to deal with CORS in your backend process.
if you're using Express as your backend then you can do something like this:

```const app = express();
const jsonParser = bodyParser.json()
const urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(cors({
origin: HTTP_CORS_ORIGIN,
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}));

app.use(express.json({limit: '50mb'}));

app.listen(PORT, () => {
console.log(Listening on port ${PORT});
});```

@liveloper protractor
Liveloper
@liveloper
thanks @robert-brower-impaq I will take a look!
Junaid Ramzan
@ajuni880
Hi, does anybody knows how to avoid the caching of main.hash.js file in the browser? Sometimes we make minor changes in other modules but the hash for the main.js stays the same. And the users cannot see the new changes? Any ideas?
We already have set Cache-Control header for index.html but its the main.js file the problem
robert-brower-impaq
@robert-brower-impaq
@ajuni880 Have you tried changing the version number in package.json?
Junaid Ramzan
@ajuni880
yes, changing the package version does not affect the hashes. The hashes are based on the content of the files
Miloš Lapiš
@mlc-mlapis

@ajuni880 What does it mean the changes in other modules?

Sometimes we make minor changes in other modules but the hash for the main.js stays the same.

GaryGlitter
@GaryGlitter
Hi, does anyone know how to upload and view Heic file in angular. I have tried lot of options available in net, but nothing works.
Junaid Ramzan
@ajuni880
@mlc-mlapis when you change feature modules
azan-n
@azan-n
Hey there, what are some of the project style guides that you follow? Something that would define functional folder structures, layout definitions, and other factors based on experience. I know about the official style guide by John Papa, but I was wondering if any of you follow something different.
1 reply
I will be using this for a project with Angular 13 and Angular Material.
ER-GAIBI
@ER-GAIBI
Hello everyone, can we create a dynamic variable in Typescript ? example : var maillons(index): Array<Maillon>; where index is an incremented value
Artur
@6matko
Hi. I am trying to upgrade my Angular from 9 to 13 but I am using SSR and Web-Workers. Everything was fine until import.meta is required for web-worker initialization, e.g.: new Worker(new URL('./my-worker.worker', import.meta.url), { type: 'module' });. Due this I am getting "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'." error. Any ideas how can I workaround this issue ?
David Martin Rehle
@daveyx

Hello,
angular is adding a trailing slash to my prerendered i18n root page
https://stackoverflow.com/questions/71478409/angular-i18n-avoid-trailing-slash-in-url-on-prerendered-root-page

repo for reproduce: https://github.com/daveyx/angular-prerender-i18n

How can i prevent angular from adding a trailing slash to my localized url?

Miloš Lapiš
@mlc-mlapis

@ajuni880 How do you change the feature modules separately and how do you compile them separately?

when you change feature modules

Junaid Ramzan
@ajuni880
I am not compiling them separately. All is done by angular cli. I mean if you dont change the code thats get bundled in the main.js file the hash does not change. Anyway, I have implemented a cache in nginx to not to cache js files
Patrick Collins
@patrick99e99
David Martin Rehle
@daveyx
@patrick99e99 the link does not work
Miloš Lapiš
@mlc-mlapis
@ajuni880 But if anything has been changed that CLI generates new bundle file names with new unique random names, so browsers will download them again because they couldn't be cached. The only thing that shouldn't be cached is the index.html file that references those bundles. Not caching all JS files creates a performance problem with downloading them repeatedly.
Miloš Lapiš
@mlc-mlapis
@ajuni880 Set the following not to cache the index.html file for the Nginx server:
location = /index.html {
  add_header Cache-Control "private, no-cache, no-store, must-revalidate";
  expires 0;
}
Jan Molak
@jan-molak

Hey folks, I've just published protractor-cucumber-framework version 8.4.0 powered by Serenity/JS 2.33.3

If you'd like your E2E test suite to produce Serenity reports like this one, check out this example project

Any questions? Let me know on the Serenity/JS Community Chat

tjmcdevitt
@tjmcdevitt
Hi, does anyone use Enumerable.From(this.EditComponents).ForEach(control => control.Value.markAsTouched()
robert-brower-impaq
@robert-brower-impaq
@tjmcdevitt What is the real question here?
tjmcdevitt
@tjmcdevitt
I have this input control in the template that I am replacing with the CKEDITOR and I wanted to see why this is not working
```<input type="text"
                                       id="indicationElementId"
                                       placeholder="Indication text"
                                       [(ngModel)]="item.ValueName"
                                       class="form-control"
                                       formControlName="valueName"
                                       [class.has-error]="controls.controls.valueName.errors && controls.controls.valueName.touched">    ```
tjmcdevitt
@tjmcdevitt
It works fine as a normal input control but when I do replace it with a CKEDITOR I don't get the correct Flag
robert-brower-impaq
@robert-brower-impaq
@tjmcdevitt I don't know what a CKEDITOR is.
is it a ControlValueAccessor?
tjmcdevitt
@tjmcdevitt
Good question how can I know?
tjmcdevitt
@tjmcdevitt
Can I do something like this this.controls.valid
robert-brower-impaq
@robert-brower-impaq
i see no reference to it in the template
i see an input
Raiane Caroline Souza Teixeira Ferreira
@Raiannecaroline
Hi Guys, my name's Raiane
I need your help
I'm developing a project if Form Driven and Form Reactive
The problem is the Form Driven.
I'll send here
WhatsApp Image 2022-03-22 at 20.00.40.jpeg
WhatsApp Image 2022-03-22 at 20.01.03.jpeg
X Tutup