in dart file I have
directives: [coreDirectives, formDirectives, MaterialIconComponent, MaterialRadioComponent, MaterialRadioGroupComponent, ],
providers: [materialProviders,],
html has
<material-radio-group [(ngModel)]="selected">
<material-radio
[disabled]="false"
[value]="'f1'"> First
</material-radio>
<material-radio
[disabled]="false"
[value]="'f2'"> Second
</material-radio>
</material-radio-group>
When I run it I see:
radio_button_unchecked First
radio_button_unchecked Second
What css am I missing ?
Related
I'm facing a problem with my Nuxt 3 component library.
It contains several Vue components which are then added to the exported components
export const useComponents = (nuxt: Nuxt) => {
const __dirname = dirname(fileURLToPath(import.meta.url));
let componentsDirectory = join(__dirname, "../", '/components');
nuxt.hooks.hook("components:dirs", (dirs) => {
dirs.push({
path: join(componentsDirectory, "../", 'atoms'),
prefix: 'base',
});
dirs.push({
path: join(componentsDirectory, "../", 'layout'),
prefix: 'base',
});
dirs.push({
path: join(componentsDirectory, "../", 'molecules'),
prefix: 'base',
});
})
}
However, some of those components are using mixins, which are located next to the components and relatively imported.
When using that component library in my application, it does not find the mixins and I'm getting this exception:
when using import loginButtonsMixing from "~/src/molecules/loginButtonsMixing.js";
[vite:load-fallback] Could not load
/home/user/workspace/my-project/apps/my-app/molecules/loginButtonsMixing.js
(imported by
../../../libs/general/base/src/molecules/LoginButtons.vue): ENOENT: no
such file or directory, open
'/home/user/workspace/my-project/apps/my-app/molecules/loginButtonsMixing.js'
It looks inside the app directory, instead of the library directory.
And when I'm using import loginButtonsMixing from "./loginButtonsMixing.js";
Could not resolve './loginButtonsMixing.js' from
../../../libs/base/src/molecules/LoginButtons.vue at error
(/home/user/workspace/my-project/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at ModuleLoader.handleResolveId
(/home/user/workspace/my-project/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
at
/home/user/workspace/my-project/node_modules/rollup/dist/es/shared/rollup.js:22119:26
The path looks more or less correct, but rollup seems to fail.
How do I tell the Nuxt module to expose them as well?
Currently working on a react app and I'm getting this error after installing metaplex.
My react-scripts version is 4.0.3
./node_modules/#metaplex-foundation/js-next/dist/esm/programs/token/gpaBuilders/TokenGpaBuilder.mjs
Can't import the named export 'ACCOUNT_SIZE' from non EcmaScript module (only default export is available)
I found out the solution in the git of metaplex here. I will leave you here the whole answer anyway.
Getting Started with Metaplex and CRA 5
This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.
This example has been generated using the following steps:
Create a new project using the "Create React App" command.
npx create-react-app getting-started-react-cra5
cd getting-started-react-cra5
Install the Metaplex and the Solana SDKs.
npm install #metaplex-foundation/js #solana/web3.js
Install some polyfills.
npm install assert util crypto-browserify stream-browserify
Install and use react-app-rewired.
# Installs react-app-rewired.
npm install react-app-rewired
# Replaces "react-scripts" with "react-app-rewired" in package.json scripts.
sed -i '' 's/react-scripts /react-app-rewired /g' package.json
Override Webpack 5 configurations.
Create a new file to override Webpack 5 configurations.
touch config-overrides.js
Copy the following code inside the new config-overrides.js file.
const webpack = require("webpack");
module.exports = function override(webpackConfig) {
// Disable resolving ESM paths as fully specified.
// See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
webpackConfig.module.rules.push({
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
});
// Ignore source map warnings from node_modules.
// See: https://github.com/facebook/create-react-app/pull/11752
webpackConfig.ignoreWarnings = [/Failed to parse source map/];
// Polyfill Buffer.
webpackConfig.plugins.push(
new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
);
// Polyfill other modules.
webpackConfig.resolve.fallback = {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
assert: require.resolve("assert"),
fs: false,
process: false,
path: false,
zlib: false,
};
return webpackConfig;
};
Update your browser requirements.
Update the browserslist object of your package.json to include the following production requirements.
"browserslist": {
"production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
+ "chrome >= 67",
+ "edge >= 79",
+ "firefox >= 68",
+ "opera >= 54",
+ "safari >= 14"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
That's it!
You should not use #metaplex-foundation/js-next SDK, the actual repo is #metaplex-foundation/js, the name was changed and the updated repo is this, so try using #metaplex-foundation/js instead
I have a component library that will be shipping with a few small assets (images). Those assets are imported into various components in the library.
The build script uses babel (without webpack) to transpile the js(x) to a build directory, and is currently dumping the images into build/assets/images.
This works when testing the build, but when using the component in another project (using webpack) the component tries to refer the node_modules folder:
Example component:
import myImage from './assets/images/myImage.png';
const MyComponent = () => (
<img src={myImage} />
);
export MyComponent;
Usage:
import MyComponent from 'myLibrary/MyComponent';
export default () => (
<MyComponent />
);
The error message:
myImage.png:1 GET http://localhost:9001/node_modules/myLibrary/assets/images/myImage.png 404 (Not Found)
As I understand the 'best' way to include assets is to use the url-loader so they're converted to data uri's. However, trying to use the url-loader without Webpack isn't working:
babel.config.js
...
plugins: [
[
"url-loader",
{
"extensions": ["png", "jpg", "jpeg", "gif", "svg", "pdf"],
"limit": 0
}
]
]
...
Error: Cannot find module 'babel-plugin-url-loader'
I found this and it works for PNG and SVG files - worked perfectly for what I needed!
https://www.npmjs.com/package/babel-plugin-inline-import-data-uri
My karma.conf.js includes:
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'../../mypath/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
moduleName: 'templates'
},
(I've tried without specifying any plugins, too.)
My devDependencies include:
"karma-ng-html2js-preprocessor": "^0.2.0"`
My tests include:
beforeEach(module('templates'));
These give the error:
Module 'templates' is not available!
Running karma with --log-level debug, I do not see any [preprocessor.html2js] entries. (I do get Loading plugin karma-ng-html2js-preprocessor.)
What am I doing wrong?
The issues were that the templates must be listed under files as well, and that the glob pattern in preprocessors must match. This is implied by the documentation.
files: [
'../../Scripts/angular-app/directives/*.html',
// .js files
],
preprocessors: {
'../../Scripts/angular-app/**/*.html': ['ng-html2js']
},
Note that **/*.html does not match parent directories of the basePath.
karma start --log-level debug will display DEBUG [preprocessor.html2js] entries when everything is correct.
I was also able to remove the plugins section.
To get the correct cache ID, I used:
ngHtml2JsPreprocessor: {
// Load this module in your tests of directives that have a templateUrl.
moduleName: 'templates',
cacheIdFromPath: function (filepath) {
return filepath.substring(filepath.indexOf('/Scripts/angular-app/'));
}
},
If a template references a custom filter, the filter must be loaded in files and the filter's module must be loaded in your directive tests.
Is it possiable to use ionic with ui-router.stateHelper
I want to use this for help me working with nested views:
the property children is what I'm looking for.
If its not possible, how can i do something similar, without defining each child state with name: parent.child?
after installing and import im getting the next error:
TypeError: Cannot read property '#' of undefined at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:62199:69)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:62194:9
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21830:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21330:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20721:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20725:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20725:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20596:30)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14815:27
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29026:28) <ion-nav-view class="view-container" nav-view-transition="ios">
Ok This is working.. I had problem with the indjection.
this is the right way: (im using browserify)
npm install angular-ui-router.statehelper
then in the package.json
under browser:
"angular-ui-router-helper": "./node_modules/angular-ui-router.statehelper/statehelper.min.js"
and under browserify-shim
"browserify-shim": {
"angular": "angular",
"ionic": "ionic",
"angular-ui-router-helper": {
"exports": "angular.module('ui.router.stateHelper')"
}
},
and then in the index.js:
var rootModule = angular.module('AppName', ['ionic',require('angular-ui-router-helper').name]);
Then u can inject the stateHelperProvider to the config method :)