I have an Angularjs application. I have to migrate it to Angular. I am following the angular tutorial - https://angular.io/guide/upgrade.
My angular app.module looks like
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import module from './app.module.ajs';
#NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [module.name], {strictDi: true});
}
}
I am importing my angularjs app in this file and bootstrapping it manually.
I have added a main.ts file to bootstrap angular module app.module. My main .ts looks like
import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { setAngularLib } from '#angular/upgrade/static';
import * as angular from 'angular';
import { AppModule } from './app.module';
setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);
I have added main.ts as entry point in webpack.
In my index.html I have removed ng-app. My index.html looks like:
<script src="javascripts/main.js">
<script src="javascripts/vendor.js">
<body>
<main-app></main-pp>
</body>
is an angularJS component.
main.js and vendor.js are bundle files generated by bootstrap.
Package.json:
{
"scripts": {
"dev": "webpack-dev-server --env.env=dev",
"test": "karma start"
},
"dependencies": {
"angular": "1.6.6",
"angular-route": "1.6.6",
"jquery": "^2.2.4",
"moment": "~2.17.1",
"bootstrap": "3.3.7",
"lodash": "4.17.4",
"#angular/common": "^5.2.5",
"#angular/compiler": "^5.2.5",
"#angular/core": "^5.2.5",
"#angular/forms": "^5.2.5",
"#angular/platform-browser": "^5.2.5",
"#angular/platform-browser-dynamic": "^5.2.5",
"#angular/router": "^5.2.5",
"#angular/upgrade": "^5.2.5",
"angular": "1.6.6",
"angular-route": "1.6.6",
"bootstrap": "3.3.7",
"core-js": "^2.5.3",
"jquery": "^2.2.4",
"lodash": "4.17.4",
"moment": "~2.17.1",
"reflect-metadata": "^0.1.12",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20"
},
"devDependencies": {
"#types/angular": "^1.6.39",
"#types/node": "^8.0.53",
"angular-mocks": "^1.6.7",
"autoprefixer": "^7.1.6",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.6",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"phantomjs-prebuilt": "^2.1.16",
"postcss-loader": "^2.0.9",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"ts-loader": "^3.1.1",
"typescript": "2.4.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.9.5",
"webpack-merge": "^4.1.1"
}
}
app.module.ajs looks like(skipped the imports):
export default angular.module('app', [
mainApp.name,
customers.name,
orders.name
])
But this main-app is not getting rendered. It is not throwing any error. If I add some other static content, it is displaying that but not angular component.
Please help me find what I am doing wrong.
Did you directly copy/paste the index.html? If so, you have double quotes for script source files src=""javascripts... which should be single quotes
<script src="javascripts/main.js">
<script src="javascripts/vendor.js">
<body>
<main-app></main-pp>
</body>
Otherwise, seeing your .ajs module and package.json file might help diagnose
Related
I want to use Ant Design with Snowpack. I followed the And Design docs and installed antd but whenever I run my application the dependency can't be resolved.
I get the following error message:
[snowpack] Import "antd" could not be resolved.
If this is a new package, re-run Snowpack with the --reload flag to rebuild.
If Snowpack is having trouble detecting the import, add "install": ["antd"] to your Snowpack config file.
My App.tsx:
import React from 'react';
import './App.css';
import { Button } from 'antd';
function App(): JSX.Element {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default App;
My package.json dependencies:
"dependencies": {
"antd": "^4.6.2",
"axios": "^0.20.0",
"postcss": "^7.0.32",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.7.0",
"tailwindcss": "^1.7.6"
},
"devDependencies": {
"#snowpack/app-scripts-react": "^1.10.0",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/snowpack-env": "^2.3.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"eslint": "^7.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"jest": "^26.2.2",
"postcss-cli": "^7.1.2",
"prettier": "^2.0.5",
"snowpack": "^2.9.0",
"typescript": "^3.9.7"
}
Am I missing something?
Make sure antd is already installed. Try this in snowpack.config.js:
module.exports = {
mount: {
public: "/",
src: "/_dist_",
},
installOptions: {
namedExports: ["antd"],
},
};
I am trying to run some tests with Jest, and the project is throwing these errors:-
FAIL src/imports/components/Forms/__tests__/FilterForm.test.jsx
● Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In \node_modules\babel-preset-react\lib\index.js
at createDescriptor (../../../AppData/Roaming/nvm/v10.18.1/node_modules/jest-cli/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at Array.map (<anonymous>)
my package.json looks like this:-
"devDependencies": {
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.20.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.24.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "^2.26.12",
"chai": "4.1.2",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"copy-webpack-plugin": "4.2.0",
"coveralls": "2.11.15",
"css-loader": "0.26.1",
"enzyme": "3.3.0",
"enzyme-adapter-react-15.4": "1.0.5",
"eslint": "3.12.2",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-react": "6.8.0",
"eslint-watch": "2.1.14",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"jest": "23.4.2",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "^4.14.1",
"npm-run-all": "4.1.2",
"open": "0.0.5",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"redux-immutable-state-invariant": "1.2.4",
"replace": "0.3.0",
"rimraf": "2.5.4",
"sass-loader": "7.1.0",
"sinon": "4.1.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.13.2",
"webpack-md5-hash": "0.0.5"
},
and the babel config file looks like this:-
{
"presets": [
"react",
"es2015",
"stage-0",
"stage-1"
],
"env": {
"development": {
"presets": [
"latest",
"react-hmre"
],
"plugins": ["transform-runtime"]
},
"production": {
"presets": [
["latest", {
"es2015": {
"modules": false
}
}]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"latest"
]
}
}
}
This is the FilterForm.test.jsx imports:-
import React from 'react';
import moment from 'moment';
import sinon from 'sinon';
import { expect } from 'chai';
import { shallow, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15.4';
import { Form } from 'react-bootstrap';
import FilterForm from '../FilterForm';
import TextField from '../../Fields/Text';
From what I was researching, it seems that I have an old babel iteration? If it is, how can I upgrade to the newest? I tried removing babel and re-installing it but did not work.
Any help would be very much appreciated!
Thanks
Jest 24 dropped support for Babel 6. You can either upgrade to Babel 7 or stay on the the Jest 23.x series
I am trying to add the #DragDropContext decorator on my class but I am getting an error when I load it in my browser.
My component looks like:
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserShowView extends React.Component {
}
export default connect(mapStateToProps)(UserShowView);
This is what the error looks like in chrome console:
bundle.js:977 Uncaught Error: Expected the backend to be a function or
an ES6 module exporting a default function. Read more:
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html
My babelrc file:
{
"plugins": ["transform-decorators-legacy"],
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
packages.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node tools/srcServer.js",
"test": "NODE_ENV=test jest",
"lint": "eslint --max-warnings=0 src test",
"test:watch": "NODE_ENV=test jest --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"colors": "^1.1.2",
"compression": "^1.7.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"express": "^4.16.2",
"jest": "^22.0.6",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.10.1",
"webpack-hot-middleware": "^2.21.0"
},
"dependencies": {
"axios": "^0.17.1",
"history": "^4.7.2",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
}
What am I doing wrong or am I missing a babel preset?
Is my "transform-decorators-legacy" even working?
As the error messages shows, #DragDropContext(HTML5Backend) is expecting a module or function.
From the documentation you should be importing the HTML5Backend module with:
import HTML5Backend from 'react-dnd-html5-backend';
Since you are using
import { HTML5Backend } from 'react-dnd-html5-backend';
You are trying to import a specific export that doesn't exist thus DragDropContext showing the error.
Importing with curly brackets is for specific exports vs without curly brackets which is for default exports.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
for more information on different ways of importing modules and functions.
Just remove the curly braces around HTML5Backend
import HTML5Backend from 'react-dnd-html5-backend';
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html#usage
I am working on an angular project and have decided to use a boilerplate for it. Here is the link to the boilerplate: https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate
The problem i am facing is that i am unable to add any new moudle.
e.g i wanted to add ngCart via npm. I have installed it but it is not accessible in the code.
`import angular from 'angular';
// angular modules
import constants from './constants';
import onConfig from './on_config';
import onRun from './on_run';
import 'angular-ui-router';
import 'ngCart'; //this doesn't import it
import './templates';
import './filters';
import './controllers';
import './services';
import './directives';
// create and bootstrap application
const requires = [
'ui.router',
'ngCart',
'templates',
'app.filters',
'app.controllers',
'app.services',
'app.directives'
];
// mount on window for testing
window.app = angular.module('app', requires);
angular.module('app').constant('AppSettings', constants);
angular.module('app').config(onConfig);
angular.module('app').run(onRun);
angular.bootstrap(document, ['app'], {
strictDi: true
});
My package.json is
{
"name": "angularjs-gulp-browserify-boilerplate",
"version": "1.7.1",
"author": "Jake Marsh <jakemmarsh#gmail.com>",
"description": "Boilerplate using AngularJS, SASS, Gulp, and Browserify while also utilizing best practices.",
"repository": {
"type": "git",
"url": "https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate.git"
},
"license": "MIT",
"keywords": [
"express",
"gulp",
"browserify",
"angular",
"sass",
"karma",
"jasmine",
"protractor",
"boilerplate"
],
"private": false,
"engines": {
"node": "~4.2.x"
},
"scripts": {
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/gulp dev",
"build": "cross-env NODE_ENV=production ./node_modules/.bin/gulp prod",
"deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp deploy",
"test": "cross-env NODE_ENV=test ./node_modules/.bin/gulp test",
"protractor": "cross-env NODE_ENV=test ./node_modules/.bin/gulp protractor",
"unit": "cross-env NODE_ENV=test ./node_modules/.bin/gulp unit"
},
"dependencies": {
"cross-env": "^3.1.1",
"ngCart": "1.0.0"
},
"devDependencies": {
"angular": "^1.5.0",
"angular-mocks": "^1.3.15",
"angular-ui-router": "^0.3.1",
"babel-core": "^6.3.26",
"babel-eslint": "^7.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.5.2",
"babelify": "^7.2.0",
"brfs": "^1.2.0",
"browser-sync": "^2.7.6",
"browserify": "^13.0.0",
"browserify-istanbul": "^2.0.0",
"browserify-ngannotate": "^2.0.0",
"bulk-require": "^1.0.0",
"bulkify": "^1.1.1",
"debowerify": "^1.3.1",
"del": "^2.1.0",
"envify": "^3.4.0",
"ngCart": "^1.0.0",
"eslint": "3.7.1",
"express": "^4.13.3",
"gulp": "^3.9.0",
"gulp-angular-templatecache": "^2.0.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-changed": "^1.0.0",
"gulp-eslint": "^3.0.1",
"gulp-gzip": "^1.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^3.0.3",
"gulp-notify": "^2.0.0",
"gulp-protractor": "^3.0.0",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.0.4",
"gulp-sass-glob": "^1.0.6",
"gulp-sourcemaps": "^1.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.1",
"imagemin-pngcrush": "^5.0.0",
"isparta": "^4.0.0",
"karma": "^1.3.0",
"karma-browserify": "^5.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "douglasduteil/karma-coverage#next",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-sauce-launcher": "^1.0.0",
"merge-stream": "^1.0.0",
"pretty-hrtime": "^1.0.1",
"run-sequence": "^1.1.5",
"tiny-lr": "^0.2.1",
"uglifyify": "^3.0.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
}
}
ngCart does not have a main key in its package.json, nor an index.js at its root, so import can not know what to import. So you need to be a little more explicit in your import statement.
try to replace
import 'ngCart'; //this doesn't import it
by
import 'ngCart/dist/ngCart'; //this should do it ;)
As a proof of concept I'm trying to use PrimeUI as a basis to build React components. There is an article explaining how to do it by Michael Guterl. It works in JSFiddle
var Component = React.createClass({
componentDidMount: function() {
var themes = new Array('afterdark', 'afternoon');
$(ReactDOM.findDOMNode(this)).puidropdown({
data: themes,
editable: true
});
},
render: function() {
return <select / >
}
});
ReactDOM.render( < Component / > , document.getElementById('container'));
but I'm unable to make it work from the inside React application. The error I have 'piudropdown - is not a function' indicates that primeUI is not picked up or somehow not applied. Obviously, I have jquery, jquery-ui and primeui dependencies in package.json. I also can see some primeui related staff in my bundled js file, therefore it is included. So does anyone have any ideas what could be wrong or missing? Is there any suggestions how to debug that sort of issues?
The component JS
var React = require('react');
require('jquery');
require('jquery-ui');
require('primeui');
var ReactDOM = require('react-dom');
var MyComponent = React.createClass({
componentDidMount: function() {
$(ReactDOM.findDOMNode(this)).puidropdown();
},
render: function() {
return (
<select/>
)
}
});
module.exports = MyComponent;
package.json
{
"name": "xxx-react",
"version": "0.0.1",
"description": "React UI for XXX",
"private": true,
"scripts": {
"start": "node start.js",
"test": "karma start karma.conf.js"
},
"dependencies": {
"body-parser": "1.14.0",
"bower": "^1.4.1",
"browserify": "13.0.0",
"babelify": "7.2.0",
"del": "1.1.0",
"es5-shim": "4.0.5",
"eslint-plugin-react": "4.3.0",
"babel-eslint": "6.0.2",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"express": "4.10.6",
"extend": "3.0.0",
"gulp": "3.9.0",
"gulp-concat": "^2.4.2",
"gulp-connect": "2.3.1",
"gulp-cssmin": "^0.1.6",
"gulp-eslint": "^2.0.0",
"gulp-sass": "2.1.0",
"gulp-uglify": "^1.0.2",
"gulp-util": "^3.0.1",
"jasmine-core": "^2.3.4",
"jquery": "2.1.3",
"jquery-ui": "latest",
"karma": "0.13.22",
"karma-browserify": "5.0.3",
"karma-chrome-launcher": "0.2.3",
"karma-firefox-launcher": "0.1.7",
"karma-cli": "0.1.2",
"karma-jasmine": "0.3.6",
"karma-junit-reporter": "0.4.2",
"lodash": "4.11.0",
"moment": "2.9.0",
"react": "15.0.1",
"react-dom": "15.0.1",
"react-addons-test-utils": "15.0.1",
"react-bootstrap": "0.28.5",
"react-router-bootstrap": "0.22.0",
"react-bootstrap-daterangepicker": "0.2.3",
"react-router": "2.1.1",
"reflux": "0.4.1",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "3.7.0",
"primeui" : "latest"
},
"engines": {
"node": "0.10.x"
},
"devDependencies": {
"eslint": "2.7.0"
}
}
While many people struggle to make jquery and jquery-ui to work together when using browserify, in my case it wasn't actually the case. In our setup, we have two bundled js files vendor.js and app.js. The vendor.js includes jquery, slick and es5-shim while all the js sources of the application compiled into app.js file. The problem solved by including jquery-ui and primeui into vendor.js file, so they loaded together with jquery.