Custom Web Component and Angular

Question

I've created a custom web component located in the file: wc-notification.js and I want to use it in my Angular project built with Angular CLI. I've included the file in src/index.html,but I keep getting error:

The resource from “http://localhost:4200/wc-notification.js” was blocked 
due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

How to solve this issue?

put the .js in the assets folder, else angular can find it -or import in the main.app.ts- — Eliseo
– Eliseo, Commented Oct 14, 2019 at 8:50

sunpietro · Accepted Answer · 2019-10-14 09:03:40Z

2

I've managed to do it the following way:

In angular.json under projects/[my-project-name]/architect/build/options/scripts I put:

"scripts": [
   "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
   "src/sunpietro-notification.js"
]

In app.module.ts I've imported CUSTOM_ELEMENTS_SCHEMA: import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; and added that schema to module definition:

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Started using my custom web component in any component template.

answered Oct 14, 2019 at 9:03

sunpietro

2,0984 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom Web Component and Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related