I'm developing a vue3 project with vite.
The HMR doesn't working fine in my dev enviroment.
When a vue file edited, vite handle the change and send a message thru websocket correctly
{"type":"update",
"updates":[{"type":"js-update","timestamp":1669740364450,"path":"/src/views/user/LoginView.vue","explicitImportRequired":false,"acceptedPath":"/src/views/user/LoginView.vue"}]}
but in the browser (I tried different ones) nothing happened.
Any solution?
my package.json
{
"name": "frontendq",
"private": true,
"version": "0.9.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#quasar/extras": "^1.15.5",
"axios": "^1.1.3",
"moment": "^2.29.4",
"quasar": "^2.10.2",
"vue": "^3.2.45",
"vue-i18n": "9",
"vue-recaptcha": "^2.0.3",
"vue-router": "^4.1.6",
"vue3-cookies": "^1.0.6",
"vuex": "^4.1.0"
},
"devDependencies": {
"#quasar/vite-plugin": "^1.2.3",
"#vitejs/plugin-vue": "^3.2.0",
"sass": "1.32.12",
"vite": "^3.2.4"
},
"packageManager": "yarn#3.2.4"
}
I've been dealing with this issue in a project with Vue 3, TypeScript and Vite 4. I added the next to my vite.config.ts to fix the hot reload:
server: {
watch: {
usePolling: true,
}
},
My entire vite.config.ts:
import {defineConfig} from "vite";
import vue from "#vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
watch: {
usePolling: true,
}
},
});
I'm trying to create a popover using bootstrap
The library is installed for me below are the versions
And why does he not show me the design?
Anyone know what could be the problem?
package.json*
"private": true,
"dependencies": {
"#angular/animations": "~11.0.1",
"#angular/cdk": "^11.0.2",
"#angular/common": "~11.0.1",
"#angular/compiler": "~11.0.1",
"#angular/core": "~11.0.1",
"#angular/fire": "^6.1.4",
"#angular/forms": "~11.0.1",
"#angular/platform-browser": "~11.0.1",
"#angular/platform-browser-dynamic": "~11.0.1",
"#angular/router": "~11.0.1",
"#ng-bootstrap/ng-bootstrap": "^8.0.2",
"#types/jquery": "^3.5.5",
"bootstrap": "^4.5.3",
"bootstrap-icons": "^1.1.0",
"firebase": "^8.1.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
ANGULAR.JSON FILE:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
my code:
APP.COMPONENT.TS FILE:
import { Component } from '#angular/core';
declare var $:any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ngOnInit() {
$('[data-toggle="popover"]').popover();
}
}
**APP.COMPONENT.HTML FILE:**
Toggle popover
It looks like this Should look like this
I would recommend initializing your popovers in the AfterContentInit portion of the component lifecycle. This gives the component a chance to render the DOM, which jQuery depends on to select the popover elements.
Import AfterContentInit in place of OnInit and implement:
ngAfterContentInit(): void {
$('[data-toggle="popover"]').popover();
}
More on the lifecycle of Angular components: https://angular.io/guide/lifecycle-hooks
Try adding this in the styles.scss file
#import "~bootstrap/dist/css/bootstrap.css"
I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.
Example: I am using a v-text-field which is rendered fine except that the input element gets borders set by user agent stylesheet.
I saw this post, and followed its advise to explicitly import VTextField in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (npm run serve). When I build my app for production (npm run build), the styles are not linked.
Any advise?
main.ts (with explicitly loading components like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify, {
iconfont: "md",
components: {
VBtn,
VCol,
VContainer,
VList,
VRow,
VTextField
}
});
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
App.vue:
<v-app>
<TopNavigationbar />
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";
export default Vue.extend({
name: "App",
components: {
TopNavigationbar
},
data: () => ({
//
})
});
</script>
<style lang="scss">
#import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
font: 100% $font-stack;
}
</style>
And package.json:
{
"name": "rpgbattle-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "./node_modules/.bin/vue-cli-service serve",
"build": "./node_modules/.bin/vue-cli-service build",
"test:unit": "./node_modules/.bin/vue-cli-service test:unit",
"lint": "./node_modules/.bin/vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"material-design-icons-iconfont": "^5.0.1",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vuetify": "^2.2.26",
"vuex": "^3.3.0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^2.30.0",
"#typescript-eslint/parser": "^2.30.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typeface-roboto": "0.0.75",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"engines": {
"node": "^10.14.1",
"npm": "^6.4.1"
}
}
I solved the problem by cleaning up my code, not sure which change exactly made the difference:
I had a duplicate call of Vue.use(Vuetify), one in my main.ts (as posted), a second one in the imported file plugins/vuetify.ts.
In the same file (plugins/vuetify.ts), I had a line import Vuertify from "vuetify" which I changed to import Vuertify from "vuetify/lib", according to this documentation.
Webpack.config.vendor.js
const treeShakableModules = [
'#angular/animations',
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/forms',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'#angular/material',
'#angular/material/prebuilt-themes/indigo-pink.css',
'#angular/cdk',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];
Package.json
{
"name": "VotingWebsite",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "^5.2.2",
"#angular/cli": "^1.6.6",
"#angular/common": "5.2.2",
"#angular/compiler": "5.2.2",
"#angular/compiler-cli": "5.2.2",
"#angular/core": "5.2.2",
"#angular/forms": "5.2.2",
"#angular/http": "5.2.2",
"#angular/platform-browser": "5.2.2",
"#angular/platform-browser-dynamic": "5.2.2",
"#angular/platform-server": "5.2.2",
"#angular/router": "5.2.2",
"#ngtools/webpack": "1.9.6",
"#types/chai": "4.1.2",
"#types/jasmine": "2.8.5",
"#types/webpack-env": "1.13.3",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.4.1",
"bootstrap": "3.3.7",
"chai": "4.1.2",
"css": "2.2.1",
"css-loader": "0.28.9",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.12",
"expose-loader": "0.7.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.9.1",
"jquery": "3.3.1",
"json-loader": "0.5.7",
"karma": "2.0.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.1",
"karma-webpack": "2.0.9",
"preboot": "6.0.0-beta.1",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.12",
"rxjs": "5.5.6",
"style-loader": "0.19.1",
"to-string-loader": "1.1.5",
"typescript": "2.6.2",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-hot-middleware": "2.21.0",
"webpack-merge": "4.1.1",
"zone.js": "0.8.20"
},
"dependencies": {
"#angular/cdk": "^5.2.0",
"#angular/material": "^5.2.0",
"angular-polyfills": "^1.0.1",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"web-animations-js": "^2.3.1"
}
}
Vendor.css
#import '~https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'
Component.html
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
</div>
app.share.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule } from '#angular/router';
import 'hammerjs';
import 'angular-polyfills';
import 'web-animations-js';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
} from '#angular/material';
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
HomeComponent, NavMenuComponent,
LoginComponent,
MobileComponent,
SocialComponent
],
imports: [
CommonModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'mobile', component: MobileComponent },
{ path: 'dashboard', component: DashBoardComponent },
{ path: 'signup', component: RegisterComponent },
{ path: '**', redirectTo: 'home' }
]),
BrowserModule,
BrowserAnimationsModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
],
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
]
})
export class AppModuleShared {
}
Followed the instruction form https://getmdl.io/started/index.html
https://material.angular.io/
Tried the solution from this link Angular material Could not find Angular Material core theme
Could not find Angular Material core theme
http://www.mithunvp.com/angular-material-2-angular-cli-webpack/
https://www.codeproject.com/Tips/1189201/Adding-Angular-Material-in-ASP-NET-Core-Angular-SP
But still not able to resolve the issue. The input box and other design are not working.
Keep getting the error as Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Trying to solve this issue from past 1 day but no luck. Can anyone please let me know where I, am doing wrong.
The problem is that webpack was not referesh. So use the node.js command or cmd to run the below command.
webpack --config webpack.config.vendor.js
Visual studio doesn't refresh the command on running the project on development environment. However it runs on the production environment.
If the webpack is not install use the command below to install globally and you can run the above command.
npm install -g webpack
This solve my issue.
Using latest version of Angular Material in ASP.net Core 2.0 is more difficult and time consuming for resolving package dependencies.
Use below version of angular material in package.json
"#angular/cdk": "^2.0.0-beta.12"
"#angular/material": "^2.0.0-beta.12"
followed by run below command to install it.
npm install --save
It looks like the angular cdk and material are installed correctly. Otherwise you will get an error about that instead.
However, make sure that the material css is also loaded by editing angular.json and adding node_modules/#angular/material/prebuilt-themes/indigo-pink.css to the section projects->[project name]->architect->build->styles below src/styles.css
I've tested this with ASP.Net Core 3 and Angular 8.2.
I'm trying to do push notifications with an ionic2 app so that I need to import classes from "#ionic/cloud-angular".
However, I got lots of typescript errors in "ionic serve" when doing this, for example:
TypeScript error:
/.../ionic2/ionic2-angularfire-sample-master/node_modules/#ionic/db/node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts(30,76):
Error TS1005: ')' expected.
TypeScript error:
/.../ionic2/ionic2-angularfire-sample-master/node_modules/#ionic/db/node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts(31,1):
Error TS1128: Declaration or statement expected.
These are my information about ionic configuration :
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
OS: OS X Yosemite
Node Version: v6.10.0
And here is my package.json :
{
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "2.0.0-rc.2",
"#ionic/cloud-angular": "^0.11.0",
"angularfire2": "2.0.0-beta.2",
"es6-shim": "0.35.0",
"firebase": "3.3.0",
"ionic-angular": "2.0.0-beta.11",
"ionic-native": "^2.5.1",
"ionicons": "3.0.0",
"moment": "2.13.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"del": "2.2.0",
"gulp": "3.9.1",
"gulp-tslint": "^5.0.0",
"gulp-watch": "4.3.5",
"ionic-gulp-browserify-typescript": "^1.1.0",
"ionic-gulp-fonts-copy": "^1.0.0",
"ionic-gulp-html-copy": "^1.0.0",
"ionic-gulp-sass-build": "^1.0.0",
"ionic-gulp-scripts-copy": "^2.0.0",
"ionic-gulp-tslint": "^1.0.0",
"run-sequence": "1.1.5",
"tslint": "^3.10.1",
"tslint-ionic-rules": "^0.0.3"
},
"cordovaPlugins": [],
"cordovaPlatforms": [],
"name": "fbtest",
"description": "fbtest: An Ionic project"
}
I hope someone could help that I can do to use import "#ionic/cloud-angular". Thank you.
I also encountered trouble the first time I used Ionic Cloud and solved it by reinstalling the Client from scratch. Have you tried to redo the installation step by step? (http://docs.ionic.io/setup.html)
Make sure that you have the latest version as suggested: sudo npm install -g ionic
Create your app ID on your online account with ionic io init (this will also modify your ionic.config.json)
Modify your app.module.ts like this:
Import the modules: import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
Define a CloudSettings (don't forget to replace the APP_ID by your own):
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
Inside the imports of your #NgModule, add: CloudModule.forRoot(cloudSettings)
PS: sorry, this maybe go to comment, but I haven't enough reputation points to comment yet.