CODEWITHSUNDEEP
angularangular-cliweb-component
sunpietro
sunpietro

Reputation: 2099

Custom Web Component and Angular

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?

Upvotes: 1

Views: 623

Answers (1)

sunpietro
sunpietro

Reputation: 2099

I've managed to do it the following way:

  1. 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"
]
  1. 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]
})
  1. Started using my custom web component in any component template.

Upvotes: 2

Related Questions