I have tried to apply the normal button of angular material but the ripple affect will not work at all.
Iv'e got:
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'hammerjs';
import 'web-animations-js';
import { MatCheckboxModule } from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule} from '#angular/material/button';
imports: [
MatButtonModule,
MatCheckboxModule,
BrowserAnimationsModule
],
providers: [WeatherService],
bootstrap: [AppComponent, WeatherComponentComponent]
})
In the global styles.css file i have: #import
'~#angular/material/prebuilt-themes/deeppurple-amber.css';
dependancies:
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.10",
"#angular/compiler": "^5.2.10",
"#angular/core": "^5.2.10",
"#angular/forms": "^5.2.10",
"#angular/http": "^5.2.10",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.10",
"#angular/platform-browser-dynamic": "^5.2.10",
"#angular/router": "^5.2.10",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
"devDependencies": {
"#angular/cli": "^1.7.4",
"#angular/compiler-cli": "^5.2.10",
"#types/jasmine": "^2.8.6",
"#types/node": "^9.6.6",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "^5.3.1",
"ts-node": "^6.0.0",
"tslint": "^5.9.1",
"typescript": "^2.7.0"
}
HTML:
<button mat-raised-button color="primary">Button</button>
I have also tried to link the stylesheet in the global HTML - but doesn't work still.
I got the same problem and I solved the issue at the end.
I looked at several SO posts but none of them works in my case.
I'll show how I did below, so it might help anyone who came across the issue.
Context
I was working on the Tutorial: Tour of Heroes in Angular's site, so my app was fairly small and simple. To use the material components, I follow the "Getting Started" page on the Angular Material official website. I use Angular CLI, so I imported the prebuilt theme css in styles.css, imported MatButtonModule and tried <button mat-button>basic</button>, but the button ripple effect just didn't work.
Solution
In index.html add a class mat-app-background to body like this
<body class="mat-app-background">
...
</body>
And the ripple effect in button is now working!
Explanation Please
This solution is based on Angular Material Theming Guide. They have a few words about additional settings before the theming actually works:
Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.
This isn't mentioned in Angular Material's Getting Started page. So if you follow that page and test the mat-button right away, it might not work.
Does that work for everyone?
Definitely not. The solution above is more likely to work if your situation is similar to mine. But I will show you what step I did before, which leads to my situation.
I use Angular CLI to create my Angular app, and I followed the Getting Started tutorial as below:
I installed these packages: #angular/material #angular/cdk #angular/animations
I Imported MatButtonModule in app.module.ts.
In app.module.ts I have
...
import {MatButtonModule} from '#angular/material';
#NgModule({
...
imports: [
BrowserModule,
...
MatButtonModule, // import the Angular Material modules after Angular's BrowserModule, as described in the tutorial.
],
...
})
Import prebuilt theming CSS
In styles.css
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
...
Now add the button in HTML
In app.component.html
...
<button mat-button>Basic</button>
...
And I clicked on the button and ripple effect did not work. So I got stuck here. But, a strange thing is, if I switch to the prebuilt theme deeppurple-amber.css, the ripple then works, without applying the Solution above.
If I switch to other prebuilt themes like purple-green.css or pink-bluegrey.css, ripple effect is again not working. I'm not sure what the cause is, but probably the theming is still not configured properly so things become unpredictable. Sometimes it works, sometimes it doesn't, which is not a good sign, so let's proceed to the next step.
If your ripple effect did not work so far like me, follow the information in Solution and the instructions in Theming Guide. According to the theming guide, you either need the element mat-sidenav-container or the class mat-app-background to make material theming configured properly. Then finally, the ripple effect should work now.
Not a solution for OP, but this is what's been causing it for me:
Make sure the BrowserAnimationsModule is imported:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
...
imports: [
BrowserAnimationsModule
],
...
})
The project I'm working on had the NoopAnimationsModule included, remove this first; you can't add them both.
For me it was an easy mistake to make if you skim the documentation. This was my problem...
This:
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
Was here:
The Component or Module .scss files...
But needed to be here:
The styles.scss file found in the /app directory.
I had the same problem. When, I created buttons using material, the ripple effect was not happening. Later, I found that I did not include any style-theme in the project. So, it's a very basic but most essential thing to check when you are going to start a project in Angular-Material to include at least its pre-built theme style sheet. Then, you are not going to miss the ripple effect. This was my solution to my problem.
Make sure you have MatRippleModule imported into the module of that component
Okay I think I may have found some bug in angular as I was able to track the cause. It was due to usage of variable inside here: {{forecasts.list[0].dt}} Temperature (celsius): {{ weathers.main.temp }} . - So basically using {{ weathers.main.temp }} within that broke the animations in the entire page. –
Related
I try to migrate a large existing codebase from Vue2 to Vue3 using Webpack. So I upgraded the necessary packages in package.json to looks like this (no problems here):
"vue": "^3.2.45",
"#vue/compat": "^3.2.45",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-typescript": "^5.0.8",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/compiler-sfc": "^3.2.0",
"vue-class-component": "^8.0.0-rc.1",
"vue-loader": "^17.0.1",
...
Now the Webpack build always fails with the error: "At least one template or script is required in a single file component.", no matter which single file component it tries to compile.
So I debugged the source of the error, which is the #vue\compiler-sfc\dist\compiler-sfc.cjs.js), and found out, that the the function parsing the component file gets called twice. First time with the actual code of my component, which works perfectly fine. Then a second time with an already compiled version which looks like this:
import { render } from "./deploymentInfos.vue?vue&type=template&id=1ced640a&ts=true"
import script from "./deploymentInfos.vue?vue&type=script&lang=ts"
export * from "./deploymentInfos.vue?vue&type=script&lang=ts"
import exportComponent from "\\node_modules\\vue-loader\\dist\\exportHelper.js"
const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"/deploymentInfos/deploymentInfos.vue"]])
/* hot reload */
if (module.hot) {
__exports__.__hmrId = "1ced640a"
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('1ced640a', __exports__)) {
api.reload('1ced640a', __exports__)
}
...
Of course it fails to parse <script> and <template> from this and throws the error.
I assume I have some kind of misconfiguration but am not able to find it. Does anyone have clue where to look?
Solved ✓
The problem was that another webpack plugin also used the vue-loader. That was where the second call to parse the file came from.
So if you encounter the same error message, try checking your webpack config if there are multiple usages of vue-loader.
Like the question says, I was following a tutorial and it was working fine so I wanted to implement it into my own side project app.
After adding it exactly the same as the doc says the component in the <Stack.Screen/> won't load.
I have tried multiple things but nothing seems to work. No errors either so I'm stuck on how to debug.
As I don't know which part of my code is causing the problem I will post my github repo link here.
https://github.com/totablue/ToyBoxOfWords
Answering my own question.
The thing that was causing my app to get stuck on the splashscreen was the SplashScreen.preventAutoHideAsync()
that was called while the app was loading the font.
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
this part of the code was not running so the splash screen never went away.
Used this video to load custom fonts in a different way and it fixed everything.
https://youtu.be/viIkcDYSBrI
I have tried to run your code, and it worked well. The problem is that you have not added some dependencies!
This is the package.json file that I use with your code.
{
"dependencies": {
"expo-font": "~10.2.0",
"expo-constants": "~13.2.4",
"expo-status-bar": "~1.4.0",
"#expo/vector-icons": "^13.0.0",
"expo-splash-screen": "~0.16.2",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.15.0",
"#react-navigation/native": "*",
"#react-navigation/native-stack": "*",
"react-native-safe-area-context": "4.3.1"
}
}
Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.
you can try Temporarily disable Volar plugin, it won't show waining tip
I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm
Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md
I like to use snack.expo.io because I'm new to programming and it makes it quick and easy to manage and access what I'm working on. However, I just tried to use React Navigation and can't get it to work. I keep getting "Unable to resolve module 'react-navigation.js'. I pulled up the React Navigation snacks at https://expo.io/snacks/#react-navigation and most of those have the same error. Am I missing something?
Perhaps my initial question should have asked if there is some initialization step I'm missing. I know I have to import it with something like
import { DrawerNavigator } from 'react-navigation';
But is there a dependency I have to manually add? I thought Expo took care of that sort of thing for you, but again, I'm not super experienced with all of this.
I don't know if this is the correct way, but I managed to get past the "unable to resolve" problem. I welcome a better solution from someone more knowledgeable than myself.
It did come down to a dependency issue. Again, in the past I'm pretty sure writing the import line resulted in Snack automatically handling the appropriate dependencies, but for some reason it did not here. So in order to get the React Navigation bottom tab navigator to show up I added
"#react-navigation/bottom-tabs": "latest",
to my package.json. My import line had to adjust to
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
This came from me poking around the Tab navigation page on reactnavigation.org (https://reactnavigation.org/docs/tab-based-navigation/) Interestingly enough, that did result in Snack pulling in a couple of other dependencies on app reload. I have no clue what the # in front of react-navigation does; it's the first time I've run into it.
Just set their dependencies in package.json and it should work fine:
{
"dependencies": {
"#expo/vector-icons": "^10.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.8.0",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/material-bottom-tabs": "^5.2.16",
"#react-navigation/material-top-tabs": "^5.2.16",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-gesture-handler": "~1.7.0",
"react-native-screens": "~2.10.1",
"react-native-tab-view": "^2.15.1"
}
}
I am using VuePress (^1.0.3) for a side project, with a fairly straightforward setup. I'm not sure when this started occurring, currently the <router-link> elements don't get rendered as <a> tags, but show up as <div> (without linking functionality/interactivity). You can see what's going wrong here, for instance in the bottom menu bar items (or the space 'tiles' that should be clickable): https://new.coworkberlin.com/
My package.json looks like:
{
"scripts": {
"dev": "vuepress dev .",
"build": "vuepress build ."
},
"devDependencies": {
"esm": "^3.2.25"
},
"dependencies": {
"#vuepress/plugin-google-analytics": "^1.0.3",
"#vuepress/plugin-pwa": "^1.0.3",
"axios": "^0.18.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue2-google-maps": "^0.10.6",
"vuepress": "^1.0.3",
"vuepress-plugin-sitemap": "^2.1.2"
}
}
The repository for this project is github.com/ldanielswakman/cowork-berlin
Does anybody have any idea of how I might fix this?
I extract the relevant code, in case I can't solve your problem and you need to make your repo private again.
I couldn't run your repo successfully and got lots of errors, so I'm not sure if this will work.
The origin code:
<router-link :to="'/'">
<i v-if="!isHomePage"></i>
<h1>
<img :src="$withBase('/logo.svg')"/>
</h1>
</router-link>
You can try to change it into:
<router-link to="/">
<i v-if="!isHomePage"></i>
<h1>
<img src="$withBase('/logo.svg')"/>
</h1>
</router-link>
"" or '' would be enough, you do not need both of them.
You do not need : either since / is not a variable, and apparently won't change.
BTW, I also suggest you:
Update Vuepress to the latest version, which is 1.2.0
Take a look at your dependencies, cause I get errors while running yarn install
The solution turned out to not only do minor version updates via yarn upgrade but also 'manually' update VuePress to the latest version (1.2.0) — that solved the issue.