I have an angular application with routing which is converted as web component. I have injected this to a react application which is getting rendered properly. The issue happens with the conflict of routing between the shell app (React) and the web-component (Angular).
The below scenario is happening.
These are the react routes
http://localhost:8000/react-route1
http://localhost:8000/react-route2
These are the angular routes
/angular-route1
/angular-route2
When the web-component is injected to the react app, the link inside the webcomponent takes the application to http://localhost:8000/angular-route1 which does not exists.
How can this issue be handled where the angular route and react route can be segregated.
Related
I have a component library made in React and i use Rollup to build the library.
I created a test application using 'create-single-spa' with Typescript.
When I import my component library into the application the following error happens:
Uncaught Error: application '#org/test' died in status
LOADING_SOURCE_CODE: Error loading http://localhost:8500/org-test.js
(SystemJS Error#3 https://git.io/JvFET#3) at
HTMLScriptElement. (system.js:640)
The import test done on the root file:
Testing using an application created with 'create-react-app' the library import normally works.
I need to add Facebook chat for my vuejs app. For that, I found a plugin vue-fb-customer-chat
In my Home.vue
I import and register component and then called inside template like this
<VueFbCustomerChat
page_id="908908908"
theme_color="#333333"
locale="en_US"
></VueFbCustomerChat>
When I run this I got an error
[Vue warn]: Failed to mount component: template or render function not defined
I figure out that this is because this pluggin need https to run.
So I build and deploy to the prod server. Now that error has gone. But nothing is display in the UI.
But in the demo of that libray it works https://dmnwebdesign.github.io/vue-fb-customer-chat/
How do I achive this with Vuejs?
Make sure you have added this content in your main.js
import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'
Vue.use(VueFbCustomerChat)
I have an existing Angular app using TypeScript and Angular-CLI version 1.7. Now I want to embed the entire angular application inside of a parent react application. Such as when a specific route is reached in the react app, it should render the angular app and that URL will become base-href for the angular app and routing inside angular app should work. Also, it should remain as a Single Page Application that it was.
I was looking out for a solution in which I could do
class AngularComponent extends Component {
componentDidMount() {
platformBrowserDynamic().bootstrapModule(AppModule);
}
render() {
return <app-root><app-root>;
}
}
I am not sure how I can import AppModule with all its functionalities in a React Component class.
I'm building an app that should run inside of an AngularJS (1.3.19) module.
The motivation is to reuse AngularJS' already built services and controllers by the scope() and injector() functions.
I cannot use ng-upgrade because this will require refactoring a lot of our legacy code.
Is there a way I can combine two routers for two different AngularJS modules?
We use the angular-ui-router for our AngularJS app.
When I try to change a route on the Angular router, AngularJS' router removes the route and replaces it with an empty string (and runs the otherwise() function as configured).
Any ideas?
Thanks!
I got this.
Configure your paths on both ends. AngularJS' route should point at the html of your Angular app.
Also, I created a node script that imports Angular's routes and transforms them to be AngularJS' routes.
I did this with ts-node and webpack-shell-plugin.
Thanks.
I have an Angular 1/Angular 2 hybrid app that was working with rc.3 and the deprecated router. From all sources that I can find, rc.5 is the big step to move towards with the new router. I am able to get my hybrid app bootstrapped, and render my root component, but routing does not work.
var upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
angular.module('ng1App', [])
.directive('myBaseComponent', <any>upgradeAdapter.downgradeNg2Component(MyBaseComponent));
#NgModule({
imports: [BrowserModule, routing],
providers: [appRoutingProviders, HTTP_PROVIDERS],
declarations: [MyBaseComponent,
MyNG2RoutableComponent]
})
class AppModule { }
upgradeAdapter.bootstrap(document.body, ['ng1App']).ready(function(){
console.log('bootstraped!');
});
My root NG2 component bootstraps, as I can throw stuff in the template it renders. But it seems when I add the <router-outlet></router-outlet> it will not render the child route. If I bootstrap just my NG2 app without the upgradeAdapter, everything works as expected.
I feel like I am missing just one connecting piece. Any ideas?
Angular RC.6 and Router RC.2 Update
I upgraded to rc.6 and the rc.2 version of the router this past week, same problem. The UpgradAdapter works great when routing isn't involved. Once I pull in the router-outlet, then nothing renders and there are no errors.
The Angular Router requires at least one component be bootstrapped in order to be instantiated. Since ngUpgrade bootstraps the Angular 1 side, there isn't an Angular 2 bootstrapped component. To workaround this, you have to override the ApplicationRef and provide your own component. Here is a working plunker demonstrating how to achieve this.
http://plnkr.co/edit/Gj8xq0?p=preview
For reference:
https://github.com/angular/angular/issues/9870