Disabling ETag header from backend solved this issue temporarily.

I was getting this error in chrome browser because of expired SSL certificate. Replacing the SSL certificate with a valid one was the solution.

I have a div that I want to style based on a condition.

If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I&#39;ve got half of it working with the below code.
```html
    &lt;div id=&quot;myDiv&quot; [ngStyle]=&quot;styleOne &amp;&amp; {&#39;background-color&#39;: &#39;red&#39;}&quot;&gt;
```
Is it possible to add a condition to say:

- if styleOne is true, do this
- if styleTwo is true, do this?


**Edit**

I think i&#39;ve resolved it. It works. Not sure if it&#39;s the best way:
```html
&lt;div id=&quot;div&quot; [ngStyle]=&quot;styleOne &amp;&amp; {&#39;background-color&#39;: &#39;red&#39;} || styleTwo &amp;&amp; {&#39;background-color&#39;: &#39;blue&#39;}&quot;&gt;
```

Angular - How to apply [ngStyle] conditions

A super basic question: why is the following not rendering in Markdown - which happens to be in a `jupyter` notebook

**Raw code**

    ### Results
    
    | --- | --- | --- |
    | Stretch/Untouched | ProbDistribution | Accuracy |
    | --- | --- | --- |
    | Stretched | Gaussian | .843 |


**Code as it looks in `jupyter` in edit mode**

[![enter image description here][1]][1]

**Rendering in `jupyter`**

[![enter image description here][2]][2]

So the table did *not* render properly

**Update** I did some twiddling and now it renders.. but **still uncertain why the original code did not work**

[![enter image description here][3]][3]


  [1]: https://i.stack.imgur.com/ZezAR.png
  [2]: https://i.stack.imgur.com/MbXEq.png
  [3]: https://i.stack.imgur.com/tyXde.png

Tables in Markdown (in Jupyter)

I am using the `Angular-CLI 1.6.6` and `@angular/service-worker 5.2.5` in our `Angular 5.2.5` app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment: 

&gt; Failed to load resource: the server responded with a status of 504
&gt; (Gateway Timeout)

Looking into the `ngsw-worker.js` script I found the lines (2466 following) where the error message above is generated:

```typescript
    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: &#39;Gateway Timeout&#39;,
            });
        }
    } 
```
Console logging err in the catch puts out the following error:
```bash
    TypeError: Failed to execute &#39;fetch&#39; on &#39;ServiceWorkerGlobalScope&#39;: &#39;only-if-cached&#39; can be set only with &#39;same-origin&#39; mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at &lt;anonymous&gt;
```
An error that seems related to this question: https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if

The req that generates this error is any first access to the app:

    https://example.com/test/#/connect
    https://example.com/test/#/map?token=[accestoken]
    ...

On app reload the error is not repeated.

Can anybody help me out here? Is there a bug in `safeFetch()` of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

Angular Service Worker - Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

I am using the <code>Angular-CLI 1.6.6</code> and <code>@angular/service-worker 5.2.5</code> in our <code>Angular 5.2.5</code> app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment:
> Failed to load resource: the server responded with a status of 504
> (Gateway Timeout)
Looking into the <code>ngsw-worker.js</code> script I found the lines (2466 following) where the error message above is generated:
<pre><code class="hljs language-javascript"> async safeFetch(req) {
 try {
 return await this.scope.fetch(req);
 }
 catch (err) {
 this.debugger.log(err, `Driver.fetch(${req.url})`);
 return this.adapter.newResponse(null, {
 status: 504,
 statusText: 'Gateway Timeout',
 });
 }
 } 
</code></pre>
Console logging err in the catch puts out the following error:
<pre><code class="hljs language-sql"> TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
 at Driver.safeFetch (ngsw-worker.js:2464)
 at Driver.handleFetch (ngsw-worker.js:1954)
 at &#x3C;anonymous>
</code></pre>
An error that seems related to this question: <a href="https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if" target="_blank" rel="noopener noreferrer">https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if</a>
The req that generates this error is any first access to the app:
<pre><code class="hljs language-bash">https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...
</code></pre>
On app reload the error is not repeated.
Can anybody help me out here? Is there a bug in <code>safeFetch()</code> of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

I have a normal Angular Material 2 DataTable with sort headers.
All sort are headers work fine. Except for the one with an object as value.
These doesn&#39;t sort at all. 

For example:

&lt;!-- language: lang-html --&gt;

     &lt;!-- Project Column - This should sort!--&gt;
        &lt;ng-container matColumnDef=&quot;project.name&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Project Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.project.name}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

note the `element.project.name`

Here&#39;s the displayColumn config:

     displayedColumns = [&#39;project.name&#39;, &#39;position&#39;, &#39;name&#39;, &#39;test&#39;, &#39;symbol&#39;];

Changing `&#39;project.name&#39;` to `&#39;project&#39;` doesn&#39;t work nor `&quot;project[&#39;name&#39;]&quot;`

What am I missing? Is this even possible?

Here&#39;s a Stackblitz:
[Angular Material2 DataTable sort objects][1]


**Edit:**
Thanks for all your answers.
I&#39;ve already got it working with dynamic data. So I don&#39;t have to add a switch statement for every new nested property.

Here&#39;s my solution: (Creating a new DataSource which extends MatTableDataSource is not necessary)

&lt;!-- language: typescript --&gt;

    export class NestedObjectsDataSource extends MatTableDataSource&lt;MyObjectType&gt; {
    
      sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) =&gt; string | number) =
        (data: WorkingHours, sortHeaderId: string): string | number =&gt; {
          let value = null;
          if (sortHeaderId.indexOf(&#39;.&#39;) !== -1) {
            const ids = sortHeaderId.split(&#39;.&#39;);
            value = data[ids[0]][ids[1]];
          } else {
            value = data[sortHeaderId];
          }
          return _isNumberValue(value) ? Number(value) : value;
        }
    
      constructor() {
        super();
      }
    }


  [1]: https://stackblitz.com/edit/angular-rtw2fx

Angular Material 2 DataTable Sorting with nested objects

Just want to learn how Angular builds and runs behind the scenes? 

Below is what I understood thus far. Want to know if I missed something.

**How Angular builds**

After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.

`ng build` command compiles the application into an output directory and the build artifacts will be stored in the `dist/` directory.


**Internal Process**

**1.** Angular CLI runs Webpack to build and bundle all JavaScript and CSS code.

**2.**  In turn Webpack calls the TypeScript loaders which fetches all `.ts` file in the Angular project and then transpiles them to JavaScript i.e to a `.js` file, which browsers can understand.


[This](https://stackoverflow.com/a/46671117/2218697) post says Angular has two compilers:

 - View Compiler
       
 - Module Compiler

**Questions on builds**

What is the sequence of calling the build process?

Angular CLI first calls Angular built-in compiler written in TypeScript =&gt; then calls the TypeScript Transpiler  =&gt;  then calls the Webpack to bundle and store in the `dist/` directory.


**How Angular runs**


When build is completed, all our app&#39;s components, services, modules etc are transpiled to `JavaScript .js` files which is used to run the Angular application in the browser. 


Statements in [Angular Docs](https://Angular.io/guide/displaying-data)


1. When you bootstrap with the `AppComponent` class (in main.ts), Angular looks for a `&lt;app-root&gt;` in the `index.html`, finds it, instantiates an instance of AppComponent, and renders it inside the `&lt;app-root&gt;` tag.


2. Angular creates, updates, and destroys components as the user moves through the application.

**Questions on runs**

Although `main.ts` is used in the statement above for explaining the bootstrap process, Isn&#39;t Angular app is bootstrapped or started using JavaScript `.js` files? 

Isn&#39;t all the above statements are done runtime using JavaScript `.js` files?


Does anyone know how all parts fit together in depth?

How Angular builds and runs

I have a little web app with Angular 5 and out of a sudden I am getting this strange error message in my browser console:

    ncaught Error: Template parse errors:
    No provider for ControlContainer (&quot;
    &lt;/p&gt;
    &lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
      [ERROR -&gt;]&lt;app-form-group-component 
    [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
          &lt;button &quot;): ng:///AppModule/KickoffComponent.html@4:2

That did not happen before and I am not aware of any made changes. And I have no idea what that message tries to tell me.

This is the component template of form-group which seems to be invalid somehow:

    &lt;div *ngFor=&#39;let e of formGroup&#39; class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;{{e.key}}&quot;&gt;{{e.label}}&lt;/label&gt;
    &lt;input type=&quot;{{e.type}}&quot; name=&quot;{{e.key}}&quot; 
    [(ngModel)]=&quot;e.value&quot; class=&quot;form-control&quot; 
    [ngClass]=&#39;{&quot;is-valid&quot;: e.valid === true &amp;&amp; e.required === true}&#39;
            /&gt;
        &lt;/div&gt;

And this is the template where I consume form-group:

    &lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
     &lt;app-form-group-component [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    &lt;app-notification [notification]=&quot;notification&quot;&gt;&lt;/app-notification&gt;

I stared at it for hours, but I can&#39;t find any mistake.

I should mention that I don&#39;t use Angular&#39;s FormGroup but my own solution (because I thought theirs to be overengineered and it didn&#39;t fit my specific needs). Could there be some kind of name collision? Of course, in the app.module I have imported the FormsModule for two-way binding to work and to intercept the form&#39;s submit.
The notification-component at least works without complaints.

I would be very grateful for any help.

**Edit:**
I was asked to share my TS code.

Failing component:  

    import { Component, Input } from &#39;@angular/core&#39;;
    import { FormGroup } from &#39;../../models/form-group&#39;;
    
    @Component({
      selector: &#39;app-form-group-component&#39;,
      templateUrl: &#39;./form-group.component.html&#39;,
    })
    export class FormGroupComponent {
      @Input() formGroup?: FormGroup
    }
The type _FormGroup_ is just an Array and the component is just meant to be a visual wrapper.
There are no additional services involved or DI and without that component Angular compiles just fine.
(_formGroup_ is marked as optional because TS would keep complaining about it not being initialized, although at runtime it will always be initialized)

Component which hands over property:

    import { Component, OnInit } from &quot;@angular/core&quot;;
    import { additionalInformation } from &quot;./additional-information&quot;;
    import { basicInformation } from &quot;./basic-information&quot;;
    ...
    
    @Component({
      selector: &quot;app-kickoff&quot;,
      templateUrl: &quot;./kickoff.component.html&quot;,
    })
    export class KickoffComponent implements OnInit {
      basicInformation: FormGroup = basicInformation;
      additionalInformation: FormGroup = additionalInformation;
      methods...
    }

**Edit:** To answer @Andrei&#39;s question: I have no service or provider called ControlContainer. I just have three small services, none of them causes any trouble. As far as I can tell, ControlContainer has something to do with DI, but Angular&#39;s documentation on that topic is rather mystifying. 

Angular 5: &quot;No provider for ControlContainer&quot;

As Angular 6 is here, I want to upgrade or move my angular 5 client application to angular 6, but I&#39;m not getting any tutorial or anything which can guide me through. 

According to me I just need to run a new Angular CLI and then have to move my older source to new project. I read the Angular 6 is using a new renderer called Ivy. Will I have to change my project according to Ivy?

Want to upgrade project from Angular v5 to Angular v6

In my angular 4 app, I have a string like

    comment: string;
    comment = &quot;&lt;p&gt;&lt;em&gt;&lt;strong&gt;abc&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;&quot;;

When I serve this text in my html, like

    {{comment}}

Then it displays: 

    &lt;p&gt;&lt;em&gt;&lt;strong&gt;abc&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

But I need to display the text &quot;abc&quot; in bold and italic form, like
***abc***

How can I do this?
 

How to render string with html tags in Angular 4+?

When I try to build my project running the following command:

&lt;!-- language-all: lang-none --&gt;
     
    ng build --environment=prod --aot=false  --output-path=&quot;...&quot; --base-href=&quot;...&quot;
You seem to not be depending on `@angular/core`.

This is an error, however, I don&#39;t understand why because before it worked well.

I tried to do this: 

&lt;!-- language-all: lang-none --&gt;

    npm install @angular/core 

But I get this error : 
    
&gt;`error     at Error (native)
error  { Error: EACCES: permission denied, chown &#39;&#39;
error     at Error (native)
error   errno: -13,
error   code: &#39;EACCES&#39;,
error   syscall: &#39;chown&#39;,
error Please try running this command again as root/Administrator.
verbose exit [ -13, true ]`

I also tried to get rid of `node_modules`, then make an install npm: but I get the same error.

And when I run the following command:

&lt;!-- language-all: lang-none --&gt;

    ng serve

I have another error:
                                                                                                            
&gt;`The &quot;@angular/compiler-cli&quot; package was not properly installed. Error: Error: Cannot find module &#39;@angular/compiler-cli&#39;`

This is my `package.json` :

&lt;!-- language-all: lang-json --&gt;

    &quot;ng&quot;: &quot;ng&quot;,
    &quot;start&quot;: &quot;ng serve&quot;,
    &quot;build&quot;: &quot;ng build&quot;,
    &quot;test&quot;: &quot;ng test&quot;,
    &quot;lint&quot;: &quot;ng lint&quot;,
    &quot;e2e&quot;: &quot;ng e2e&quot;
 
    &quot;@angular/animations&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/common&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/compiler&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/core&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/forms&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/http&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/platform-browser&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/router&quot;: &quot;^4.0.0&quot;,
    &quot;@types/jquery&quot;: &quot;^3.2.17&quot;,
    &quot;cli-color&quot;: &quot;^1.2.0&quot;,
    &quot;core-js&quot;: &quot;^2.4.1&quot;,
    &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
    &quot;jquery&quot;: &quot;^3.2.1&quot;,
    &quot;matrix-js-sdk&quot;: &quot;^0.8.5&quot;,
    &quot;moment&quot;: &quot;^2.18.1&quot;,
    &quot;olm&quot;: &quot;https://matrix.org/packages/npm/olm/olm-2.2.2.tgz&quot;,
    &quot;readline&quot;: &quot;^1.3.0&quot;,
    &quot;rxjs&quot;: &quot;^5.4.1&quot;,
    &quot;socket.io-client&quot;: &quot;^2.0.3&quot;,
    &quot;zone.js&quot;: &quot;^0.8.14&quot;
  
    &quot;@angular/cli&quot;: &quot;1.2.6&quot;,
    &quot;@angular/compiler-cli&quot;: &quot;^4.0.0&quot;,
    &quot;@angular/language-service&quot;: &quot;^4.0.0&quot;,
    &quot;@types/jasmine&quot;: &quot;~2.5.53&quot;,
    &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
    &quot;@types/jquery&quot;: &quot;^3.2.17&quot;,
    &quot;@types/node&quot;: &quot;~6.0.60&quot;,
    &quot;codelyzer&quot;: &quot;~3.0.1&quot;,
    &quot;jasmine-core&quot;: &quot;~2.6.2&quot;,
    &quot;jasmine-spec-reporter&quot;: &quot;~4.1.0&quot;,
    &quot;karma&quot;: &quot;~1.7.0&quot;,
    &quot;karma-chrome-launcher&quot;: &quot;~2.1.1&quot;,
    &quot;karma-cli&quot;: &quot;~1.0.1&quot;,
    &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
    &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
    &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
    &quot;protractor&quot;: &quot;~5.1.2&quot;,
    &quot;ts-node&quot;: &quot;~3.0.4&quot;,
    &quot;tslint&quot;: &quot;~5.3.2&quot;,
    &quot;typescript&quot;: &quot;~2.3.3&quot;



&quot;You seem to not be depending on &quot;@angular/core&quot;.&quot;

I have `travis-ci` integrated with my GitHub account (https://github.com/pradeep0601/Angular5-Router-App).

When I updated `@angular/cli` version from 1.7.4 to 6.0.0-rc.3, the build started failing with an error:

    Local workspace file (&#39;angular.json&#39;) could not be found.
    Error: Local workspace file (&#39;angular.json&#39;) could not be found.
        at WorkspaceLoader._getProjectWorkspaceFilePath (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/workspace-loader.js:37:19)
        at WorkspaceLoader.loadWorkspace (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/workspace-loader.js:24:21)
        at TestCommand._loadWorkspaceAndArchitect (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/architect-command.js:177:32)
        at TestCommand.&lt;anonymous&gt; (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/architect-command.js:45:25)
        at Generator.next (&lt;anonymous&gt;)
        at /home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/architect-command.js:7:71
        at new Promise (&lt;anonymous&gt;)
        at __awaiter (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/architect-command.js:3:12)
        at TestCommand.initialize (/home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/architect-command.js:44:16)
        at /home/travis/build/pradeep0601/Angular5-Router-App/node_modules/@angular/cli/models/command-runner.js:100:23

package.json snippet to better understand the running environment:

        &quot;@angular/cli&quot;: &quot;6.0.0-rc.3&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^5.2.0&quot;,
        &quot;@angular/language-service&quot;: &quot;^5.2.0&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.3&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,



Error: Local workspace file (&#39;angular.json&#39;) could not be found

Currently I&#39;m working on a project which is being hosted on a clients server. For new &#39;modules&#39; there is **no intention to recompile** the entire application. That said, the client wants to **update the router/lazy loaded modules in runtime**. I&#39;ve tried several things out but I can&#39;t get it to work. I was wondering if any of you knows what I could still try or what I missed.

One thing I noticed, most of the resources I tried, using angular cli, are being bundled into seperate chunks by webpack by default when building the application. Which seems logical as it makes use of the webpack code splitting. but what if the module is not known yet at compile time (but a compiled module is stored somewhere on a server)? The bundling does not work because it can&#39;t find the module to import. And Using SystemJS will load up UMD modules whenever found on the system, but are also bundled in a seperate chunk by webpack.

Some resources I already tried;

 - [dynamic-remote-component-loader][1]
 - [module-loading][2]
 - [https://stackoverflow.com/questions/42953858/loading-modules-from-different-server-at-runtime][3]
 - [https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application][4]
 - [https://stackoverflow.com/questions/41438198/implementing-a-plugin-architecture-plugin-system-pluggable-framework-in-angu][5]
 - [https://stackoverflow.com/questions/48590455/angular-5-load-modules-that-are-not-known-at-compile-time-dynamically-at-run][6]
 - [https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e][7]
 - Some several other relating this topic.


Some code I already tried and implement, but not working at this time;

Extending router with normal module.ts file

      this.router.config.push({
        path: &quot;external&quot;,
        loadChildren: () =&gt;
          System.import(&quot;./module/external.module&quot;).then(
            module =&gt; module[&quot;ExternalModule&quot;],
            () =&gt; {
              throw { loadChunkError: true };
            }
          )
      });

Normal SystemJS Import of UMD bundle

    System.import(&quot;./external/bundles/external.umd.js&quot;).then(modules =&gt; {
      console.log(modules);
      this.compiler.compileModuleAndAllComponentsAsync(modules[&#39;External&#39;])
        .then(compiled =&gt; {
          const m = compiled.ngModuleFactory.create(this.injector);
          const factory = compiled.componentFactories[0];
          const cmp = factory.create(this.injector, [], null, m);
        });
    });

Import external module, not working with webpack (afaik)

    const url = &#39;https://gist.githubusercontent.com/dianadujing/a7bbbf191349182e1d459286dba0282f/raw/c23281f8c5fabb10ab9d144489316919e4233d11/app.module.ts&#39;;
    const importer = (url:any) =&gt; Observable.fromPromise(System.import(url));
    console.log(&#39;importer:&#39;, importer);
    importer(url)
      .subscribe((modules) =&gt; {
        console.log(&#39;modules:&#39;, modules, modules[&#39;AppModule&#39;]);
        this.cfr = this.compiler
          .compileModuleAndAllComponentsSync(modules[&#39;AppModule&#39;]);
        console.log(this.cfr,&#39;,&#39;, this.cfr.componentFactories[0]);
        this.external.createComponent(this.cfr.componentFactories[0], 0);
    });

Use SystemJsNgModuleLoader

    this.loader.load(&#39;app/lazy/lazy.module#LazyModule&#39;)
      .then((moduleFactory: NgModuleFactory&lt;any&gt;) =&gt; {
        console.log(moduleFactory);
        const entryComponent = (&lt;any&gt;moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);

        const compFactory = moduleRef.componentFactoryResolver
          .resolveComponentFactory(entryComponent);
      });

Tried loading a module made with rollup

    this.http.get(`./myplugin/${metadataFileName}`)
      .map(res =&gt; res.json())
      .map((metadata: PluginMetadata) =&gt; {

        // create the element to load in the module and factories
        const script = document.createElement(&#39;script&#39;);
        script.src = `./myplugin/${factoryFileName}`;

        script.onload = () =&gt; {
          //rollup builds the bundle so it&#39;s attached to the window 
          //object when loaded in
          const moduleFactory: NgModuleFactory&lt;any&gt; = 
            window[metadata.name][metadata.moduleName + factorySuffix];
          const moduleRef = moduleFactory.create(this.injector);

          //use the entry point token to grab the component type that 
          //we should be rendering
          const compType = moduleRef.injector.get(pluginEntryPointToken);
          const compFactory = moduleRef.componentFactoryResolver
            .resolveComponentFactory(compType); 
    // Works perfectly in debug, but when building for production it
    // returns an error &#39;cannot find name Component of undefined&#39; 
    // Not getting it to work with the router module.
        }

        document.head.appendChild(script);

      }).subscribe();

Example with SystemJsNgModuleLoader only works when the Module is already provided as &#39;lazy&#39; route in the RouterModule of the app (which turns it into a chunk when built with webpack)

I found a lot of discussion about this topic on StackOverflow here and there and provided solutions seem really good of loading modules/components dynamically if known up front. but none is fitting for our use case of the project. Please let me know what I can still try or dive into.

Thanks!

EDIT: I&#39;ve found; https://github.com/kirjs/angular-dynamic-module-loading and will give this a try.

UPDATE: I&#39;ve created a repository with an example of loading modules dynamically using SystemJS (and using Angular 6); https://github.com/lmeijdam/angular-umd-dynamic-example



  [1]: https://github.com/dianadujing/dynamic-remote-component-loader
  [2]: https://github.com/Toxicable/module-loading
  [3]: https://stackoverflow.com/questions/42953858/loading-modules-from-different-server-at-runtime
  [4]: https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application
  [5]: https://stackoverflow.com/questions/41438198/implementing-a-plugin-architecture-plugin-system-pluggable-framework-in-angu
  [6]: https://stackoverflow.com/questions/48590455/angular-5-load-modules-that-are-not-known-at-compile-time-dynamically-at-run
  [7]: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

Load new modules dynamically in run-time with Angular CLI &amp; Angular 5

I just created a new Angular project using the new Angular CLI 6.0, but I need to add Sass compilation to my project. I&#39;m aware you can set a flag when you create a project, but my project is already created and work has been done.

The new configuration file that gets generated with the new Angular CLI is now called `angular.json` rather than `angular-cli.json`. The scheme for the file is also different, with new properties.

In the old `angular-cli.json` there is a section where you can set the `stylExt` like so,
 
    &quot;defaults&quot;: {
        &quot;styleExt&quot;: &quot;scss&quot;
    }

but I&#39;m not sure where exactly to put this, as after the `&quot;test&quot;` and `&quot;lint&quot;` properties, gives a lint error of: 

`Matches multiple schemas when only one must validate.` 

and building produces: 

`Schema validation failed with the following errors:
  Data path &quot;[&#39;defaults&#39;]&quot; should NOT have additional properties(styleExt).`

Looking at [CLI&#39;s docs][1] I&#39;m not seeing anything that would indicate where to put `&quot;styleExt&quot;`.

I&#39;ve seen other answers advising: `ng set defaults.styleExt scss` which throws`get/set have been deprecated in favor of the config command.`. 

I tried `ng config set defaults.styleExt scss` and `npm config set defaults.styleExt scss` with the former throwing an error and the latter apparently having no effect on the file, but without error.




  [1]: https://github.com/angular/angular-cli/wiki/angular-workspace

How do I add Sass compilation in Angular CLI 6: angular.json?

I have 2 radio buttons, I&#39;m using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can only select 1 radio button -- can never unselect and select the other one. Only allows me to select the same one.

    this.genderControl = new FormControl(&quot;&quot;, Validators.required);
and then added to my Form Group

    genderControl: this.genderControl,

My HTML:

    &lt;div class=&quot;radio-inline&quot;&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt; Male&lt;/label&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt;Female&lt;/label&gt;
    &lt;/div&gt;


Form Group

        this.personalInfo = new FormGroup({
      searchControl: this.searchControl,
      titleControl: this.titleControl,
      firstNameControl: this.firstNameControl,
      middleNameControl: this.middleNameControl,
      lastNameControl: this.lastNameControl,
      birthdayControl: this.birthdayControl,
      genderControl: this.genderControl,
      phoneControl: this.phoneControl,
      taxCanadaControl: this.taxCanadaControl,
      provinceControl: this.provinceControl,
      countryControl: this.countryControl,
      taxCountryControl: this.taxCountryControl,

      creditControl: this.creditControl
    });



Angular 5 Reactive Forms - Radio Button Group

I am trying to implement an icon that when clicked will save a variable to the user&#39;s clipboard. I have currently tried several libraries and none of them have been able to do so. 

How do I properly copy a variable to the user&#39;s clipboard in Angular 5?



Angular 5 - Copy to clipboard

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused.

I have tried a few ways found on StackOverflow with directive or so, but can&#39;t succeed.

Here is the sample code:

    @Component({
       selector: &#39;my-app&#39;,
       template: `
        &lt;div&gt;
        &lt;h2&gt;Hello&lt;/h2&gt;
        &lt;/div&gt;
        &lt;button (click) =&quot;showSearch()&quot;&gt;Show Search&lt;/button&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;form&gt;
          &lt;div &gt;
            &lt;input *ngIf=&quot;show&quot; #search type=&quot;text&quot;  /&gt;            
          &lt;/div&gt;
        &lt;/form&gt;
        `,
      })
      export class App implements AfterViewInit {
      @ViewChild(&#39;search&#39;) searchElement: ElementRef;
  
      show: false;
      name:string;
      constructor() {    
      }
  
      showSearch(){
        this.show = !this.show;    
        this.searchElement.nativeElement.focus();
        alert(&quot;focus&quot;);
      }
  
      ngAfterViewInit() {
        this.firstNameElement.nativeElement.focus();
      }

The search box is not set to focus.

How can I do that?

Set focus on &lt;input&gt; element

I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the &#39;Submit&#39; button.

I know it&#39;s normally as easy as adding `type=submit` to my button element but it does not seem to be working at all.

I don&#39;t really want to call an `onclick` function just to get it working. Can anyone suggest anything that I may be missing.

&lt;!-- language: lang-html --&gt;

    &lt;form (submit)=&quot;search(ref, id, forename, surname, postcode)&quot; action=&quot;#&quot;&gt;
      &lt;mat-card&gt;
        &lt;mat-card-title class=&quot;firstCard&quot;&gt;Investor/Adviser search&lt;/mat-card-title&gt;
        &lt;mat-card-content&gt;
          &lt;p *ngIf=&quot;this.noCriteria&quot; class=&quot;errorMessage&quot;&gt;Please enter search criteria.&lt;/p&gt;
          &lt;p *ngIf=&quot;this.notFound&quot; class=&quot;errorMessage&quot;&gt;No investor&#39;s or adviser&#39;s found.&lt;/p&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invReference&quot; placeholder=&quot;Investor/Adviser reference (e.g. SCC/AJBS)&quot; #ref&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invId&quot; placeholder=&quot;Investor/Adviser ID&quot; type=&quot;number&quot; #id&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invForname&quot; placeholder=&quot;Forename&quot; #forename&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invSurname&quot; placeholder=&quot;Surname&quot; #surname&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invPostcode&quot; placeholder=&quot;Postcode&quot; #postcode&gt;
            &lt;/mat-form-field&gt;
        &lt;/mat-card-content&gt;
        &lt;mat-card-footer&gt;
          &lt;button mat-raised-button type=&quot;submit&quot; class=&quot;successButton&quot; id=&quot;invSearch&quot; title=&quot;Click to perform search.&quot;&gt;Search&lt;/button&gt;
        &lt;/mat-card-footer&gt;
      &lt;/mat-card&gt;
    &lt;/form&gt;

Angular 5 Button Submit On Enter Key Press

When creating a react app, service worker is invoked by default. Why service worker is used? What is the reason for default invoking?

What is service worker in react js

I&#39;m using [create-react-app][1] with an [express][2] server.

`create-react-app` has a pre-configured ServiceWorker that caches local assets (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app). 

The problem I encountered when I tried to publish on my server is that the `service-worker.js` file was available, but I was getting errors in my browser console when it tried to register it.

On Firefox, I got this error:

&gt; Error during service worker registration:
&gt; &gt; TypeError: ServiceWorker script at https://my-domain.com/service-worker.js for scope https://my-domain.com/ encountered an error during installation.

On Chrome, I get the more descriptive error:

&gt; Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type (&#39;text/html&#39;).

Sure enough, if I look in the Network tab of my developer tools and search for the `service-worker.js` file, I can see that it has the wrong MIME type in the HTTP headers.

I could not understand, though, why it has the wrong MIME type?

  [1]: https://github.com/facebook/create-react-app
  [2]: https://github.com/expressjs/express

Service Worker registration error: Unsupported MIME type (&#39;text/html&#39;)

As far as I know, once you click &quot;add to homescreen&quot; on a PWA&#39;s website, the browser generates an .apk using the provided manifest file and sources and installs it like a normal app.

I noticed that when I update the website, the app also displays the updated content which suggests that the app is just a wrapper for accessing the website. I also noticed that the update to a website is not displayed instantly, I assume this is due to internal caching.

My question is, are my assumptions correct? Or more generally, when and how are PWAs updatated and is there a way to force an update on a client machine?

When and how does a PWA update itself?

I know I can use Chrome on a desktop or Android device to “Add to Home screen”. I know I can use “Add to homes screen” in Safari iOS.

But, can I use “Add to home screen” feature in Chrome for iOS?

Can I use Add to home screen in Chrome on an iOS device?

I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to &#39;Install&#39; the app on their home screen.

I have been looking around for a way to trigger that prompt from within the app, but have not been able to find anything.

Is there a line of JavaScript that can be used to call the install prompt banner at any time?? Something that I could add to a install button tucked away in a help screen for instance? 

It might be difficult for some users to find the &quot;Add to Home Screen&quot; option if they missed the install banner prompt. I&#39;d like to give them a button they can click to be prompted again. 

### **2020 EDIT**: Yes, this is possible in Chrome - see [answer below](https://stackoverflow.com/a/64727286/8620945)

See this great article: [How to provide your own in-app install experience](https://web.dev/customize-install/) and [my working demo](https://pwa-install-demo.netlify.app/) of the article&#39;s process [applied in a React app](https://github.com/adueck/pwa-install-demo).

Or for a slightly different approach, see [how snapdrop.net did it](https://github.com/RobinLinus/snapdrop).

Content Type	Original Author	Original Content on Stackoverflow
Question	tobik	View Question on Stackoverflow
Solution 1 - Angular	Tibin Thomas	View Answer on Stackoverflow
Solution 2 - Angular	Ghasem	View Answer on Stackoverflow

Angular Service Worker - Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

Tables in Markdown (in Jupyter)

Angular - How to apply [ngStyle] conditions

Attributions