Comments (3)
@cozmy How exactly do you use your myAngular2React
function? From my understanding and after countless hours trying to render a very simple component template, a call to the module's component function i.e ngModule.component(name, options);
should not be called in your myAngular2React
function. All your angular components need to be registered before you bootstrap angular just like @bcherny is doing here https://github.com/bcherny/angular2react-demos/blob/master/multi-file/src/index.jsx#L24 else the component won't render its template. Unless I'm missing something?
I made a simple angular helper module for registering angular components, converting them to react components, services, routes. I liked the idea that @Irev-Dev had with using useMemo to reduce the number of calls to angular2react
so that is what I went with.
import { angular2react } from 'angular2react';
import { module, auto, ILocationProvider } from 'angular';
import { useMemo } from 'react';
import { AngularComponent } from './components';
import { AngularService } from './services';
export const root = module('root', ['']);
let $injector: auto.IInjectorService;
export const useAngularComponent = <Props extends {}>(component: AngularComponent) => {
if (!$injector) {
throw new Error('Missing injector, you might have run this before angular was bootstrapped');
}
return useMemo(() => angular2react<Props>(component.selector, component, $injector), []);
};
export const registerAngularComponents = (components: AngularComponent[]) => {
for (const component of components) {
root.component(component.selector, component);
}
};
export const registerAngularServices = (services: AngularService[]) => {
for (const service of services) {
root.service(service.name, service.injectable);
}
};
export const registerAngularConstants = (constants: AngularService[]) => {
for (const constant of constants) {
root.constant(constant.name, constant.injectable);
}
};
export const registerAngularRoutes = (routes: Function[]) => {
root.config(($locationProvider: ILocationProvider) => {
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
for (const route of routes) {
root.config(route);
}
};
export const setInjector = (_$injector: auto.IInjectorService) => {
$injector = _$injector;
};
I have a single bootstrapping function.
import { bootstrap, auto } from 'angular';
import {
root,
setInjector,
registerAngularComponents,
registerAngularServices,
registerAngularConstants,
registerAngularRoutes,
} from './helpers';
import constants from './constants';
import routes from './routes';
import components from './components';
import services from './services';
const bootstrapAngular = (callback: () => void) => {
registerAngularConstants(constants);
registerAngularRoutes(routes);
registerAngularComponents(components);
registerAngularServices(services);
root.run([
'$injector',
(_$injector: auto.IInjectorService) => {
setInjector(_$injector);
callback();
},
]);
bootstrap(document.createElement('div'), [root.name]);
};
export default bootstrapAngular;
This is how my my main index.tsx looks.
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import App from './App';
import bootstrapAngular from './-angular';
import * as serviceWorker from './serviceWorker';
import { makeServer } from './tests/Mocks/Server';
if (process.env.NODE_ENV === 'development') {
console.log('calling makeServer');
makeServer();
}
const bootstrapReact = () => {
render(<App />, document.getElementById('app'));
};
bootstrapAngular(bootstrapReact);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
from angular2react.
@cozmy Thanks for this one! Have y'all hit anything with hot reloading? I've successfully used this with storybook, which is a big help for dealing with some of our older components.
from angular2react.
I'm using a similar approach, so we don't need to pass in the injector each time, though we've defined ours as a custom hook where it wraps angular2react
in a useMemo
so that it can be called at the start of functional components without making excessive calls to angular2react
it's not a big abstraction so I'm not 100% sure a PR is needed.
import { ComponentClass, useMemo } from 'react';
import { angular2react } from 'angular2react';
import * as angular from 'angular';
let $injector;
export function setInjector(_$injector) {
$injector = _$injector;
}
export function useAngularComponent(
angularComponentName: string,
angularComponentDefinition: angular.IComponentOptions
): ComponentClass {
if (!$injector) {
throw new Error('Missing injector, you might have run this before angular was bootstrapped');
}
return useMemo(() => angular2react(angularComponentName, angularComponentDefinition, $injector), []);
}
from angular2react.
Related Issues (19)
- Getting a reference to $injector HOT 9
- dependency issues HOT 4
- Seeing `[email protected] requires a peer of react@^>=15.0.0 but none is installed` warning HOT 1
- npm test fails on Windows HOT 2
- Disable Greenkeeper HOT 1
- Is there a way to pass a callback with `&`? HOT 3
- Minimum version AngularJS version HOT 1
- Context Api doesn't work HOT 2
- React 17 deprecated methods HOT 2
- How does it apply to complex applications
- Trigger $destroy on jqLite elements
- way to work in angular 1.4
- onClick not triggered on angular2react element HOT 2
- Will it be possible to use the Hooks and React 17?
- Does this library have to load Angular?
- Page refreshes when routing to an AngularJS component HOT 1
- Angular 1.6 requirement? HOT 2
- Does it work with Angular 1.6 Directives as well? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2react.