I'm new to Quasar but am none-the-less trying to use the QForm component. When I modify resources/quasar/quasar.conf.js to include QForm, however, I get the following error:
Error: Unknown import from Quasar: QForm
Here's how the framework / components bit looks after I added QForm:
framework: {
components: [
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QIcon',
'QList',
'QListHeader',
'QItem',
'QItemMain',
'QItemSide',
'QField',
'QInput',
'QSpinnerMat',
'QCard',
'QTooltip',
'QForm'
],
Here's my quasar dev output:
Dev mode.......... spa
Quasar theme...... mat
Quasar CLI........ v0.17.25
Quasar Framework.. v0.17.20
Debugging......... enabled
Any ideas?
So apparently QForm was added in Version 1.0. I need to upgrade to use it:
https://quasar.dev/start/upgrade-guide#Upgrading-from-older-v1-to-latest-v1
Related
I am trying to use rollup to build a mini react component library of sorts, as soon as I add a react-konva component the errors appears, when I add the konva to the example I using to test the library it works fine leading me to assume its something with the way rollup handles konva. The only thing that I have seen on the github for react-konva that may link to this is: https://github.com/konvajs/react-konva/issues/504
My Rollup Config
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "#rollup/plugin-image";
const packageJson = require("./package.json");
export default {
input: "src/BuildScreen.tsx",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
image()
]
}
The Error
If anything else is needed lmk, thanks in advance to anyone that helps
Well I look stupid, I randomly decided to change from duckduckgo to google to look up the issue and got a few github links for it one being https://github.com/konvajs/react-konva/issues/189 which made me think to remove my react konva and konva and reinstall it to the latest version and it worked my react-konva was on 16.13 or something and when I upgraded ended up on 17.0.0 which worked
I am going to develop a very large application using Angular 7 Framework.
I have created a blank angular workspace using
ng new angular-app --create-application=false
And in this workspace I have two angular applications created using the following commands:
ng generate application app-one
ng generate application app-two
Inside each of the two applications, I am going to have multiple components each working independently of each other.
I am looking for a way to create a separate javascript build file for each of the component so as to reduce the build size.
And use each of the separately build js files to use each component as a web component.
Please read what I have already tried to get a better idea.
I have tried the following steps:
Create a repository with prefix custom for custom angular elements:
ng new app-name --prefix custom
Add the angular elements package:
ng add #angular/elements
Create custom element component with encapsulation as native/emulated/none as required:
ng g component my-component --inline-style --inline-template -v Native
Define the custom element in app.modulte.ts
import { Injector} from '#angular/core';
import { createCustomElement } from '#angular/elements';
...
export class AppModule {
constructor(private injector : Injector){
const el = createCustomElement(MyComponent, {injector : this.injector});
customElements.define('my-component',el);
}
ngDoBootstrap(){ }
}
Install ngx-build-plus package for building a single bundle (e. g. for Angular Elements):
npm i ngx-build-plus
Update application's builder section within the angular.json file so that it points to ngx-build-plus:
"builder": "ngx-build-plus:build",
Add script in package.json to run builder:
"build:ngx": "ng build --prod --output-hashing none --single-bundle true"
If required, Combine scripts.js and main.js in the created dist folder by creating a js file "concat_ngx.js":
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<your_project>/scripts.js',
'./dist/<your_project>/main.js',
]
await fs.ensureDir('elements_ngx')
await concat(files, 'elements_ngx/combined-script.js');
})()
Run file to get single js file:
node concat_ngx.js
Use js file in any Angular/Other project to use the custom component created.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
In Angular 7, Add Default or Automatic bootstrapping :-
It is the default way an angular application bootstraps and main.ts holds the starting point of an application.
platformBrowserDynamic().bootstrapModule(AppModule);
For more information see here: -https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604
ng serve -o app-one
or
ng serve -o app-two
For more information see here https://medium.com/#klauskpm/change-the-default-angular-project-27da8fca8721
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.
But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.
import { Routes, RouterModule } from '#angular/router';
import { Contest } from '../pages/contest/contest';
export const appRoute: Routes = [
{ path: '', redirectTo: 'Contest', pathMatch: 'full' },
{ path: 'Contest', component: Contest}
]
export const appRouting = [
RouterModule.forRoot(appRoute)
];
I imported this statement into app.component.ts and injected it into the constructor.
import { Router } from '#angular/router';
constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();
In the app.module.ts I imported the following statements and also set them in the imports inside #ngModule
import { RouterModule, Routes } from '#angular/router';
import {appRouting} from './app.routing';
imports: [appRouting,
IonicModule.forRoot(MyApp)
]
I put the <router-outlet></router-outlet>
in my app.html file.On doing all this when I try to run I get the following errors.
Runtime Error:
WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'NgProbeToken
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'Version'.
I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions
I'm using:
Ionic2 : v2.2.1
npm: 3.10.10
cordova : 6.5.0
Angular2: Final Release rc5
Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?
Make sure you're dependencies are set according to what's specified in ionic change log:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.
Running into an weird issue when I use Angular 2.0 Dart. Basically I'm trying to use Router and using pub serve to transform it to JS using the angular transformer. However I get the following error
Cannot find reflection information on RouteRegistry
at dart.wrapException (http://localhost:8080/main.dart.js:2834:17)
at NoReflectionCapabilities.dart.NoReflectionCapabilities.factory$1 (http://localhost:8080/main.dart.js:31991:17)
at Reflector.dart.Reflector.factory$1 (http://localhost:8080/main.dart.js:15565:46)
at Binding.dart.Binding.resolve$0 (http://localhost:8080/main.dart.js:13499:41)
at dart.resolveBindings (http://localhost:8080/main.dart.js:13766:90)
at dart.Injector.static.Injector_resolve (http://localhost:8080/main.dart.js:13898:63)
at bootstrap_closure.dart.bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:9374:37)
at dart._rootRun (http://localhost:8080/main.dart.js:20637:16)
at _ZoneDelegate.dart._ZoneDelegate.run$2 (http://localhost:8080/main.dart.js:22730:41)
at NgZone.dart.NgZone._run$4 (http://localhost:8080/main.dart.js:5098:24)
But removing the transformer
- angular2:
entry_points: web/main.dart
I can see my app and navigate through the routes properly, however the downside is that my Dart2JS file is now 2.8megs
Currently as of Alpha 28, this is not supported. Alpha 30 will have this fixed.
https://github.com/angular/angular/issues/1950
You could add "mirror_mode: verbose" to the angular2 transformer.
Does RouteRegistry come from a different package? If so make sure the angular transformer has also been added to that package (it doesn't have to specify any entry points). The new angular transformer works a lot differently than the old one and it is required on all packages, not just the application package.