Wanted to use web component (created in reactJS) in angular 7 application2019 Community Moderator ElectionUncaught Error: Unexpected value 'AngularFireDatabase' imported by the module 'AppModule'. Please add a @NgModule annotationAngular Pipe not working on child routesNullInjectorError: No provider for String! in angular 6Inject service in provider Angular 5?AdminModule and AppModule! Please consider moving SignUpComponent to a higher module that imports AdminModule and AppModuleUncaught (in promise): Error: Template parse errors: IN Angular 6Jasmine/karma test failing due to Virtual Scroll on Angular7Injecting a service inside a service uncaught errorAngular 7 “expected 'styles' to be an array of strings”Core module component and Shared module implementation in angular
Origin of the word “pushka”
Movie: boy escapes the real world and goes to a fantasy world with big furry trolls
Do black holes violate the conservation of mass?
Can't make sense of a paragraph from Lovecraft
What is this tube in a jet engine's air intake?
Cycles on the torus
Is divide-by-zero a security vulnerability?
What passages of Adi Shankaracharya’s Brahmasutra Bhashya does Sudarshana Suri cite?
Was it really inappropriate to write a pull request for the company I interviewed with?
Leveling the sagging side of the home
Converting from "matrix" data into "coordinate" data
I can't die. Who am I?
What is better: yes / no radio, or simple checkbox?
How do spaceships determine each other's mass in space?
Can one live in the U.S. and not use a credit card?
ESPP--any reason not to go all in?
How can I portion out frozen cookie dough?
What does the Digital Threat scope actually do?
Did Amazon pay $0 in taxes last year?
Does an unused member variable take up memory?
Short scifi story where reproductive organs are converted to produce "materials", pregnant protagonist is "found fit" to be a mother
If nine coins are tossed, what is the probability that the number of heads is even?
Is it a Cyclops number? "Nobody" knows!
How do we create new idioms and use them in a novel?
Wanted to use web component (created in reactJS) in angular 7 application
2019 Community Moderator ElectionUncaught Error: Unexpected value 'AngularFireDatabase' imported by the module 'AppModule'. Please add a @NgModule annotationAngular Pipe not working on child routesNullInjectorError: No provider for String! in angular 6Inject service in provider Angular 5?AdminModule and AppModule! Please consider moving SignUpComponent to a higher module that imports AdminModule and AppModuleUncaught (in promise): Error: Template parse errors: IN Angular 6Jasmine/karma test failing due to Virtual Scroll on Angular7Injecting a service inside a service uncaught errorAngular 7 “expected 'styles' to be an array of strings”Core module component and Shared module implementation in angular
I have used a simple custom element that in React
[https://www.npmjs.com/package/my-dummy-component]
and i have install in my Angular(Version 7.2) app
app.component.html file is below
<my-componet></my-componet> /* This is my Web component */
and my app.module.ts is below
import BrowserModule from '@angular/platform-browser';
import NgModule,CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
import AppComponent from './app.component';
import MyComponent from 'my-dummy-component'
@NgModule(
declarations: [AppComponent],
imports: [
MyComponent,
BrowserModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
but it shows some error in console the html is not rendering the view side.
Is there anything i do in configuration side?
The console error is below :
Uncaught Error: Unexpected value 'undefined' imported by the module
'AppModule'
at syntaxError (compiler.js:2426)
at compiler.js:18646
at Array.forEach ()
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata
(compiler.js:18615)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules
(compiler.js:26021)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
(compiler.js:26002)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync
(compiler.js:25962)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync
(platform-browser-dynamic.js:143)
at compileNgModuleFactory__PRE_R3__ (core.js:17609)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
(core.js:17792)
my-compononet code is below :
'use strict';
Object.defineProperty(exports, "__esModule",
value: true );
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./styles.css');
function _interopRequireDefault(obj) return obj && obj.__esModule ?
obj : default: obj ;
/* src/index.js */ var MyComponent = function MyComponent()
return _react2.default.createElement(
'h1',
null,
'Hello from My Component'
); ; exports.default = MyComponent;
angular reactjs angular7 web-component asked Mar 6 at 13:52
VaibhavVaibhav
599
add a comment |
I have used a simple custom element that in React
[https://www.npmjs.com/package/my-dummy-component]
and i have install in my Angular(Version 7.2) app
app.component.html file is below
<my-componet></my-componet> /* This is my Web component */
and my app.module.ts is below
import BrowserModule from '@angular/platform-browser';
import NgModule,CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
import AppComponent from './app.component';
import MyComponent from 'my-dummy-component'
@NgModule(
declarations: [AppComponent],
imports: [
MyComponent,
BrowserModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
but it shows some error in console the html is not rendering the view side.
Is there anything i do in configuration side?
The console error is below :
Uncaught Error: Unexpected value 'undefined' imported by the module
'AppModule'
at syntaxError (compiler.js:2426)
at compiler.js:18646
at Array.forEach ()
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata
(compiler.js:18615)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules
(compiler.js:26021)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
(compiler.js:26002)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync
(compiler.js:25962)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync
(platform-browser-dynamic.js:143)
at compileNgModuleFactory__PRE_R3__ (core.js:17609)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
(core.js:17792)
my-compononet code is below :
'use strict';
Object.defineProperty(exports, "__esModule",
value: true );
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./styles.css');
function _interopRequireDefault(obj) return obj && obj.__esModule ?
obj : default: obj ;
/* src/index.js */ var MyComponent = function MyComponent()
return _react2.default.createElement(
'h1',
null,
'Hello from My Component'
); ; exports.default = MyComponent;
angular reactjs angular7 web-component asked Mar 6 at 13:52
VaibhavVaibhav
599
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
I have updated with this
– Vaibhav
Mar 6 at 16:14
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49
add a comment |
I have used a simple custom element that in React
[https://www.npmjs.com/package/my-dummy-component]
and i have install in my Angular(Version 7.2) app
app.component.html file is below
<my-componet></my-componet> /* This is my Web component */
and my app.module.ts is below
import BrowserModule from '@angular/platform-browser';
import NgModule,CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
import AppComponent from './app.component';
import MyComponent from 'my-dummy-component'
@NgModule(
declarations: [AppComponent],
imports: [
MyComponent,
BrowserModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
but it shows some error in console the html is not rendering the view side.
Is there anything i do in configuration side?
The console error is below :
Uncaught Error: Unexpected value 'undefined' imported by the module
'AppModule'
at syntaxError (compiler.js:2426)
at compiler.js:18646
at Array.forEach ()
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata
(compiler.js:18615)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules
(compiler.js:26021)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
(compiler.js:26002)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync
(compiler.js:25962)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync
(platform-browser-dynamic.js:143)
at compileNgModuleFactory__PRE_R3__ (core.js:17609)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
(core.js:17792)
my-compononet code is below :
'use strict';
Object.defineProperty(exports, "__esModule",
value: true );
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./styles.css');
function _interopRequireDefault(obj) return obj && obj.__esModule ?
obj : default: obj ;
/* src/index.js */ var MyComponent = function MyComponent()
return _react2.default.createElement(
'h1',
null,
'Hello from My Component'
); ; exports.default = MyComponent;
angular reactjs angular7 web-component asked Mar 6 at 13:52
VaibhavVaibhav
599
I have used a simple custom element that in React
[https://www.npmjs.com/package/my-dummy-component]
and i have install in my Angular(Version 7.2) app
app.component.html file is below
<my-componet></my-componet> /* This is my Web component */
and my app.module.ts is below
import BrowserModule from '@angular/platform-browser';
import NgModule,CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
import AppComponent from './app.component';
import MyComponent from 'my-dummy-component'
@NgModule(
declarations: [AppComponent],
imports: [
MyComponent,
BrowserModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
but it shows some error in console the html is not rendering the view side.
Is there anything i do in configuration side?
The console error is below :
Uncaught Error: Unexpected value 'undefined' imported by the module
'AppModule'
at syntaxError (compiler.js:2426)
at compiler.js:18646
at Array.forEach ()
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata
(compiler.js:18615)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules
(compiler.js:26021)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
(compiler.js:26002)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync
(compiler.js:25962)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync
(platform-browser-dynamic.js:143)
at compileNgModuleFactory__PRE_R3__ (core.js:17609)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
(core.js:17792)
my-compononet code is below :
'use strict';
Object.defineProperty(exports, "__esModule",
value: true );
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./styles.css');
function _interopRequireDefault(obj) return obj && obj.__esModule ?
obj : default: obj ;
/* src/index.js */ var MyComponent = function MyComponent()
return _react2.default.createElement(
'h1',
null,
'Hello from My Component'
); ; exports.default = MyComponent;
angular reactjs angular7 web-component angular reactjs angular7 web-component asked Mar 6 at 13:52
VaibhavVaibhav
599
asked Mar 6 at 13:52
VaibhavVaibhav
599
edited Mar 6 at 16:16
Vaibhav
asked Mar 6 at 13:52
VaibhavVaibhav
599
asked Mar 6 at 13:52
VaibhavVaibhav
599
asked Mar 6 at 13:52
VaibhavVaibhav
599
599
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
I have updated with this
– Vaibhav
Mar 6 at 16:14
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49
add a comment |
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
I have updated with this
– Vaibhav
Mar 6 at 16:14
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
I have updated with this
– Vaibhav
Mar 6 at 16:14
I have updated with this
– Vaibhav
Mar 6 at 16:14
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55024744%2fwanted-to-use-web-component-created-in-reactjs-in-angular-7-application%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55024744%2fwanted-to-use-web-component-created-in-reactjs-in-angular-7-application%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
man, your link is broken, can you post your my-component code plix ?
– Edison Junior
Mar 6 at 14:13
I have updated with this
– Vaibhav
Mar 6 at 16:14
you need seletor with @Component( selector: my-component ), try to share the link again, maybe help us. I`m trying understand what you want to do, try to explain what you mean
– Edison Junior
Mar 6 at 16:37
actually i want add an web component that created in react is used to my angular app. Here is my link npmjs.com/package/my-dummy-component
– Vaibhav
Mar 6 at 16:49