I have a fairly sizeable angularjs application that I will eventually migrate to Angular 2.
I want to to take whatever steps I can now to make future migration easier.
I am converting my controllers and services to typescript and organising my files in a component-oriented folder structure.
What I would really like to be able to do is use es6 style module loading.
I understand that system.js can provide the loading functionality now and I can use es6 import syntax in typescript 1.5.
My question is, how should I use the two together? Should I output es6 modules from typescript and use system.js module loading with the generated code? Or is some other step required?
Should I output es6 modules from typescript and use system.js module loading with the generated code
I would output commonjs modules and then use System.js at the moment. Note that System.js module output is going to arrive in TypeScript 1.6. See roadmap : https://github.com/Microsoft/TypeScript/wiki/Roadmap#16
I would suggest using commonjs since there are lot of node modules already written using that. The problem with using es6 modules is a large number of browsers are not going to support es6 modules for a long time.
Related
I am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.
In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package.
This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.
I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.
Any idea on how I can avoid such error?
I am using Webpack + REACTJS.NET version 3.2.0.
So, after trying a lot of things, this is the best solution I came across.
Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.
Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.
In Webpack I am creating a plugin:
And in code, when I want to import the Simplebar react component, I do the following in the constructor:
And then, whenever I want to use my imported component, I do the following:
This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.
Does anyone know a better solution? Or do you have concerns?
I was reading the docs on React.lazy() and it wasn't clear to me whether using that API requires me to use a module bundler that supports that syntax.
What if I am not using any bundler and just using <script type="module" src="example.mjs"></script> to provide modules, will React.lazy() still work and does it even make sense to do so?
Without bundler React.lazy will not work because it depends on dynamic imports.
Dynamic imports it is not a feature that browsers support for now(it is ecmascript proposal), but bundlers do.
So answer is yes. Read more about dynamic imports in webpack.
I built a small React application that ultimately will be in a section on a page with other small apps. The way the system is architected requires that each app be a require module that exports an init function that when called will render the app into a div by id. I have already tweaked my React build so that I have a single js file. Now I'm trying to figure out if I can make this final build be somehow loadable with requirejs. I have found a lot of information about using requirejs as part of the build but I would rather be able to stay with the create-react-app way and maybe somehow add in the ability to do the output in an AMD way. I know this must seem silly but I can't otherwise get around the AMD architecture of this platform.
You can achieve this by tweaking the configuration of webpack.config.js file, you need to check out webpack's output.library options (library, libraryExport, and libraryTarget):
https://webpack.js.org/configuration/output#module-definition-systems
module.exports = {
//...
output: {
library: 'MyReactAppLibrary',
libraryTarget: 'amd'
}
}
Unlike other components of React Native, ProgressBarAndroid isn't exported from react-native module, rather you need to include it as a separate module like this
var ProgressBar = require('ProgressBarAndroid');
It is very much clear from the source code that the files are loaded from here
https://github.com/facebook/react-native/tree/v0.25.1/Libraries/Components/ProgressBarAndroid
It works well when imported in the project but the same require() statement fails to find the module inside another third party library which I am writing.
Where could be the resolution definition for this file? Is it something to do with Babel's React Native preset? The same require() statement doesn't find the module with Node CLI tool.
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!