In file `app.module.ts`

    ...
    import { NgModule, LOCALE_ID } from &#39;@angular/core&#39;;
    import { registerLocaleData } from &#39;@angular/common&#39;;
    import localeFr from &#39;@angular/common/locales/fr&#39;;
    registerLocaleData(localeFr);
    
    
    @NgModule({
      imports: [...],
      declarations: [...],
      bootstrap: [...],
      providers: [
        { provide: LOCALE_ID, useValue: &#39;fr-FR&#39;},
      ]
    })
    export class AppModule {}

(source: https://next.angular.io/guide/i18n)

and in your template (`*.component.html`)

    DATE in FRENCH: {{ dateEvent | date: &#39;longDate&#39;}}

Result:

    DATE in FRENCH: 25 mars 2018
(source: https://angular.io/api/common/DatePipe)


Thanks @Alan, you just forgot this : `import { registerLocaleData } from &#39;@angular/common&#39;;`


Complete code :
````import { NgModule, ErrorHandler, LOCALE_ID } from &#39;@angular/core&#39;;
import { registerLocaleData } from &#39;@angular/common&#39;;
import localeFr from &#39;@angular/common/locales/fr&#39;;
registerLocaleData(localeFr);

@NgModule({
  imports: [...],
  declarations: [...],
  bootstrap: [...],
  providers: [
    { provide: LOCALE_ID, useValue: &#39;fr-FR&#39;},
  ]
})
export class AppModule {}

please take a look at 
[https://github.com/angular/angular-cli/issues/6683][1]

this might be your case 

  [1]: https://github.com/angular/angular-cli/issues/6683

I&#39;m going through the [neural transfer pytorch tutorial][1] and am confused about the use of `retain_variable`(deprecated, now referred to as `retain_graph`). The code example show:

    class ContentLoss(nn.Module):
    
        def __init__(self, target, weight):
            super(ContentLoss, self).__init__()
            self.target = target.detach() * weight
            self.weight = weight
            self.criterion = nn.MSELoss()
    
        def forward(self, input):
            self.loss = self.criterion(input * self.weight, self.target)
            self.output = input
            return self.output
    
        def backward(self, retain_variables=True):
            #Why is retain_variables True??
            self.loss.backward(retain_variables=retain_variables)
            return self.loss

From [the documentation][2]


&gt; retain_graph (bool, optional) – If False, the graph used to compute
&gt; the grad will be freed. Note that in nearly all cases setting this
&gt; option to True is not needed and often can be worked around in a much
&gt; more efficient way. Defaults to the value of create_graph.

So by setting `retain_graph= True`, we&#39;re not freeing the memory allocated for the graph on the backward pass. What is the advantage of keeping this memory around, why do we need it?

  [1]: http://pytorch.org/tutorials/advanced/neural_style_tutorial.html#packages
  [2]: http://pytorch.org/docs/master/autograd.html?highlight=backward#torch.autograd.backward

What does the parameter retain_graph mean in the Variable&#39;s backward() method?

My code was running fine before I did not change anything and I ran it again. Now it doesn&#39;t return anything not even an error. It is just stuck on &quot;In [*]&quot;.


![See problem visually here][2]


  [1]: https://i.stack.imgur.com/NVRoV.jpg
  [2]: https://i.stack.imgur.com/wtAMV.jpg

Jupyter notebook not running code. Stuck on In [*]

I currently define &quot;*LOCALE_ID*&quot; on &quot;*en-US*&quot; this way:

    @NgModule({
        providers: [{ provide: LOCALE_ID, useValue: &quot;en-US&quot; }, ...],
        imports: [...],
        bootstrap: [...]
    })

and it works pretty well. However, in order to test how dates look like in French, I replaced &quot;*en-US*&quot; by &quot;*fr-FR*&quot; and then I got the error:

&gt; Missing locale data for the locale &quot;fr-FR&quot;.

I did some researches and I didn&#39;t find anything related to that. Are the locale for french included in the default package? Is it a different package? Do I have to create them by myself?

Missing locale data for the locale &quot;XXX&quot; with angular

I currently define "LOCALE_ID" on "en-US" this way:
<pre><code class="hljs language-less">@NgModule({
 providers: [{ provide: LOCALE_ID, useValue: "en-US" }, ...],
 imports: [...],
 bootstrap: [...]
})
</code></pre>
and it works pretty well. However, in order to test how dates look like in French, I replaced "en-US" by "fr-FR" and then I got the error:
> Missing locale data for the locale "fr-FR".
I did some researches and I didn't find anything related to that. Are the locale for french included in the default package? Is it a different package? Do I have to create them by myself?

Here is my Angular component:

&lt;!-- language: lang-ts --&gt;

    @Component( {
        selector: &#39;input-extra-field&#39;,
        template: `
                &lt;div class=&quot;form-group&quot; [formGroup]=&quot;formGroup&quot; &gt;
                    &lt;switch [attr.title]=&quot;field.etiquette&quot; 
                        [attr.value]=&quot;field.valeur&quot; [(ngModel)]=&quot;field.valeur&quot;
                        [formControl]=&quot;fieldControl&quot; [attr.id]=&quot;name&quot; [attr.disabled]=&quot;disabled&quot;&gt;
                    &lt;/switch&gt;
                    &lt;error-messages [control]=&quot;name&quot;&gt;&lt;/error-messages&gt;
                &lt;/div&gt;
        `
    } )

Here is my Class:

&lt;!-- language: lang-ts --&gt;

    export class SwitchExtraField extends ExtraField {
        @Input() field: ExtraFormField;
        @Input() entity: { fields: Object };
        @Input() formGroup: FormGroup;

        constructor( formDir: NgForm ) {
            super( null, null, formDir );
        }

        get disabled(): string {
            if ( this.field &amp;&amp; !!this.field.saisissable &amp;&amp; !this.field.saisissable )     {
                return &#39;disabled&#39;;
            }
            return null;
        }
    }

This is the error I get when compiling:

&lt;!-- language: lang-none --&gt;

    ERROR Error: No value accessor for form control with unspecified name attribute
      at _throwError (forms.es5.js:1918)
      at setUpControl (forms.es5.js:1828)
      at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

When I change the element switch to input it works, knowing that I&#39;m using the same structure to other components and it works fine.

ERROR Error: No value accessor for form control with unspecified name attribute on switch

We have a medium sized Angular 4 application (+-150 components).

Many of these components require the injection of service classes and require the declaration of other components in the app.

An approach we have been experimenting with, and have found to be much more developer friendly, is to create a module per component. The module imports the child component modules and provides (or imports) all the services needed by the component. It also exports the component itself so that other components can reference it through the module.

It makes the composition of components a breeze and the setup of the test fixture of a component very simple (this is where there was previously a lot of repetition of dependencies and child component tree dependencies).  
This approach seems to match the component based architecture and allows for a form of encapsulation around what a components dependencies are.  
It feels just too good to be true ;)

My question is, what is the performance (or other) impact of having so many modules?

Should I create a module per component in Angular 4+ app?

No, this is not a duplicate question. You see, there is a ton of questions and issues in SO and Github that prescribe that I add this directive to a tag that has `[(ngModel)]` directive and is not contained in a form. If I don&#39;t add it I get an error:

    ERROR Error: No value accessor for form control with unspecified name attribute

Ok, the error goes away if I put this attribute there. BUT, wait! Nobody knows what it does! And Angular&#39;s doc doesn&#39;t mention it at all. Why do I need a  value accessor when I know that I don&#39;t need it? How is this attribute connected to value accessors? What does this directive do? What is a value accessor and how do I use it?

And why does everybody keep doing things that they don&#39;t understand at all? Just add this line of code and it works, thank you, this is not the way to write good programs.

And then. I read not one but *two* huge guides about forms in Angular *and* a section about `ngModel`:

 - https://angular.io/guide/forms
 - https://angular.io/guide/reactive-forms
 - https://angular.io/guide/template-syntax#ngModel

And you know what? Not a single mention of either value accessors or `ngDefaultControl`. Where is it?

What is ngDefaultControl in Angular?

I have a question regards Angular Material (with Angular 4+). Say in my component template I add a `&lt;mat-horizontal-stepper&gt;` component, and within each step `&lt;mat-step&gt;` I have stepper buttons to navigate the component. Like so...

    &lt;mat-horizontal-stepper&gt;
      &lt;mat-step&gt;
        Step 1
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
        Step 2
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
        Step 3
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
    &lt;/mat-horizontal-stepper&gt;

Now I am wondering if it is possible to remove the buttons out of each step and have them elsewhere in the `&lt;mat-horizontal-stepper&gt;` in a static position or even outside the `&lt;mat-horizontal-stepper&gt;` and I can navigate backwards and forwards using code within my component typescript file. To give an idea, I would like my HTML be something like this

    &lt;mat-horizontal-stepper&gt;
    	&lt;mat-step&gt;
    		Step 1
    	&lt;/mat-step&gt;
    	&lt;mat-step&gt;
    		Step 2
    	&lt;/mat-step&gt;
    	&lt;mat-step&gt;
    		Step 3
    	&lt;/mat-step&gt;
    	&lt;!-- one option --&gt;
    	&lt;div&gt;
    	   &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
    	   &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
    	&lt;/div&gt;
    &lt;/mat-horizontal-stepper&gt;
    
    &lt;!-- second option --&gt;
    &lt;div&gt;
       &lt;button (click)=&quot;goBack()&quot; type=&quot;button&quot;&gt;Back&lt;/button&gt;
       &lt;button (click)=&quot;goForward()&quot; type=&quot;button&quot;&gt;Next&lt;/button&gt;
    &lt;/div&gt;


Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

I do have a core module with an HttpInterceptor for authorization handling and I include this module in AppModule, in this way all the other modules that use HttpClient are using this interceptor.

    @NgModule({
      imports: [],
      declarations: [],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthInterceptor,
          multi: true,
        },
      ]
    })
    export class CoreModule { }

How to make a module bypass the default interceptor?

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: components,
      providers: [CustomService],
      exports: components,
    })
    export class ModuleWithoutInterceptorModule { }




Content Type	Original Author	Original Content on Stackoverflow
Question	ssougnez	View Question on Stackoverflow
Solution 1 - Angular	Alan	View Answer on Stackoverflow
Solution 2 - Angular	Adrien V	View Answer on Stackoverflow
Solution 3 - Angular	Fadi Abo Msalam	View Answer on Stackoverflow

Missing locale data for the locale "XXX" with angular

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

Solution 3 - Angular

Jupyter notebook not running code. Stuck on In [*]

What does the parameter retain_graph mean in the Variable's backward() method?

Attributions