I have app.ts
import moment from 'moment/moment';
import $ from "jquery";
import 'fullcalendar/fullcalendar';
$('#calendar').fullCalendar();
But having the error that $(...).fullCalendar is not a function.
Hope some one can guide me to solve this.
thanks!
I had difficulty, not via angular/node, but client-side.
Ended up getting it to work via
System.config({
map: {
fullcalendar: "/js/app/fullcalendar-3.3.1/fullcalendar.min.js"
},
meta: {
fullcalendar: {
deps: [
// not sure why, but moment.js needs placed under "globals"
],
format: "global",
globals: {
moment: "/js/app/fullcalendar-3.3.1/lib/moment.min.js"
}
}
}
});
System.import("fullcalendar").then(function(){
// tada fullcalendar is loaded
$("#calendar").fullCalendar({});
});
Related
In Nuxt 2 I could use server-side rendered Stencil components by leveraging the renderToString() method provided in the Stencil package in combination with a Nuxt hook, like this:
import { renderToString } from '[my-components]/dist-hydrate'
export default function () {
this.nuxt.hook('generate:page', async (page) => {
const render = await renderToString(page.html, {
prettyHtml: false
})
page.html = render.html
})
}
Since the recent release of Stencil 2.16.0 I'm able to use native web components in Nuxt 3 that is powered by Vite. However I haven't found a way to hook into the template hydration process. Unfortunately there is no documentation for the composable useHydration() yet.
Does anybody know how I could get this to work in Nuxt 3?
I had the same problem. I solved it via a module.
Make a new custom nuxt module. documentation for creating a module
In the setup method hook into the generate:page hook:
nuxt.hook('generate:page', async (page) => {
const render = await renderToString(page.html, {
prettyHtml: true,
});
page.html = render.html;
});
documentation for nuxt hooks
documentation for stencil hydration (renderToString)
Register the css classes you need via nuxt.options.css.push(PATH_TO_CSS)
Register the module in the nuxt config.
Note: Make sure in the nuxt.config.ts the defineNuxtConfig gets exported as default.
Tap the vue compiler options in the nuxt config:
vue: {
compilerOptions: {
isCustomElement: (tag) => TEST_TAG_HERE,
},
},
This depends on how you wan't to use the custom elements. In my case I defined the elements over the stencil loader in my app.vue file:
import { defineCustomElements } from '<package>/<path_to_loader>';
defineCustomElements();
You could also import the elements you need in your component and then define them right there, for example in a example.vue component:
import { CustomElement } from '<package>/custom-elements';
customElements.define('custom-element', CustomElement);
Here is an example from my module and config:
./modules/sdx.ts
import { defineNuxtModule } from '#nuxt/kit';
import { renderToString } from '#swisscom/sdx/hydrate';
export default defineNuxtModule({
meta: {
name: '#nuxt/sdx',
configKey: 'sdx',
},
setup(options, nuxt) {
nuxt.hook('generate:page', async (page) => {
const render = await renderToString(page.html, {
prettyHtml: true,
});
page.html = render.html;
});
nuxt.options.css.push('#swisscom/sdx/dist/css/webcomponents.css');
nuxt.options.css.push('#swisscom/sdx/dist/css/sdx.css');
},
});
Important: This only works if the stenciljs package supports hydration or in other words has a hydrate output. Read more here
./nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
//v3.nuxtjs.org/api/configuration/nuxt.config export default
export default defineNuxtConfig({
typescript: { shim: false },
vue: {
compilerOptions: {
isCustomElement: (tag) => /sdx-.+/.test(tag),
},
},
modules: ['./modules/sdx'],
});
./app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<script setup lang="ts">
import { defineCustomElements } from '#swisscom/sdx/dist/js/webcomponents/loader';
defineCustomElements();
// https://v3.nuxtjs.org/guide/features/head-management/
useHead({
title: 'demo',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
charset: 'utf-8',
meta: [{ name: 'description', content: 'demo for using a stencil package in a nuxt ssr app' }],
bodyAttrs: {
class: 'sdx',
},
});
</script>
Update
I tested my setup with multiple components and it looks like you cannot define your components in the module. I updated the answer to my working solution.
I've found defining a plugin using the 'render:response' hook to work for me:
server/plugins/ssr-components.plugin.ts
import { renderToString } from '#my-lib/components/hydrate';
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:response', async (response) => {
response.body = (await renderToString(response.body)).html;
});
});
Perhaps it will work for you :)
Try this in defineNuxtPlugin
nuxtApp.hook('app:rendered', () => {
const response = nuxtApp.ssrContext?.res
if (!response)
return
const end = response.end
response.end = function(chunk) {
chunk = 'hijacked'
end(chunk)
}
})
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { LmfinComponent } from '../app/lmfin/lmfin.component';
import { MfinComponent } from './mfin/mfin.component';
import { GenFunctionProvider } from './gen-function.module';
import {DetailpembayaranComponent } from './detailpembayaran/detailpembayaran.component';
const appRoutes:Routes = [ //removed export
{ //removed square bracket
path: '',
redirectTo: '/mfin',
pathMatch: 'full'
},{
path: 'list',
component: LmfinComponent
},{
path: 'mfin/:id',
component: MfinComponent
},{
path: 'detailpembayaran',
component: DetailpembayaranComponent
}
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(appRoutes, {useHash:true})
],
declarations: []
})
export class AppRoutingModule { }
i'm still new at routing, when i try to makes routing, i got this error
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
anyone can help me please?
You default path to redirect /mfin
You no path with /mfin you have URL /mfin/:id. This is not match with /mfin
So need to add route URL of /mfin.
Try this, As far as I understood you are missing some codes in index.html. Check whether you have below code in your index.html head section. If not add it and see.
<base href="/">
Also ensure your server has configured for HTML5 pushState like explained in Angular 2.0 router not working on reloading the browser
I hope this will resolve your problem. If you have any doubts or suggestion let me know.
I am using rollup to bundle my project.
At the start, everything was working fine, but I do not know what I changed in my config, I started getting this error on running rollup -c.
[!] Error: "version" is a required argument.
Error: "version" is a required argument.
at Object.getArg (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:14625:11)
at SourceMapConsumer$1.BasicSourceMapConsumer (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:15763:22)
at new SourceMapConsumer$1 (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:15491:7)
at Module.getOriginalLocation (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:16925:16)
at Module.error (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:16942:26)
at CallExpression.bindNode (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:12326:17)
at CallExpression.bind (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11415:8)
at eachChild.child (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11433:34)
at keys.forEach.key (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11450:5)
at Array.forEach (native)
Here is my rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import filesize from 'rollup-plugin-filesize'
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import postcss from 'rollup-plugin-postcss-modules'
import autoprefixer from 'autoprefixer'
import sass from "node-sass"
const preprocessor = (content, id) => new Promise((resolve, reject) => {
sass.render({
file: id,
sourceMap: "string",
sourceComments: true,
sourceMapContents: true,
outputStyle: "compressed"
},(err, result) => {
if (err) {
return reject(err);
}
resolve({code: result.css.toString()});
});
});
export default {
input: 'src/index.ts',
output: {
file: 'lib/index.js',
format: 'umd',
globals: {
...
},
sourcemap: true,
},
external: [
...
],
plugins: [
resolve(),
postcss({
preprocessor,
plugins: [
autoprefixer(),
],
extensions: ['.scss'],
writeDefinitions: true,
postcssModulesOptions: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: true,
moduleResolution: "node"
}
},
rollupCommonJSResolveHack: true,
abortOnError: false,
typescript: require('typescript'),
}),
commonjs(),
babel({
exclude: 'node_modules/**'
}),
filesize()
],
watch: {
include: 'src/**'
}
};
I am not able to figure out where the version argument should go in my setup
or
what's wrong with my setup. Can anyone help me out here?
Anyways I fixed the issue.
Here the explanation for the issue
The reported error is an error that occurs when trying to use a source
map when reporting another error. The actual error that occurs is
probably CANNOT_CALL_NAMESPACE, which from my understanding means that
you're trying to call a variable to which you bound * in an import.
and Here's the GitHub Issue you can refer to.
For anyone who encounters this, there is now a PR open with a fix:
https://github.com/rollup/rollup/pull/2012
Also, for many people once this is fixed, it will reveal the real issue: Cannot call a namespace.
I found a fix for that in its own Rollup issue (happens with TypeScript):
import * as something_ from 'something';
const something: typeof something_ = something;
// Now you can use `soemthing` as usual
This only happens when using TypeScript through Rollup, not when running tsc directly.
Wondering if anyone on here has gotten pnotify to work; I am getting the following error (on the server, when building) when trying to use the npm package:
import pnotify from 'pnotify';
Error: jQuery requires a window with a document
at module.exports (...\node_modules\jquery\dist\jquery.js:31:12)
at s (...\node_modules\pnotify\dist\pnotify.js:6:386)
I'm guessing it has to do with the jquery dependency?
-- pnotify#3.2.0
-- jquery#3.2.1
I am using BlazeLayout if it makes a difference...
I have also tried using the atmosphere package, to no avail
import { PNotify } from 'meteor/s2corp:pnotify'
Any ideas?
For minimal notifications:
Add pnotify:
meteor npm install --save pnotify
Import all necessary files and PNotify itself:
import PNotify from 'pnotify'
import 'pnotify/dist/pnotify.css';
Show notifiction:
new PNotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});
All together in default meteor bare app:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import PNotify from 'pnotify'
import 'pnotify/dist/pnotify.css';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
new PNotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});
instance.counter.set(instance.counter.get() + 1);
},
});
I'm following this instructional video, Building web apps powered by Angular 2.x using Visual Studio 2017, and around 51:00 is the part I'm at and I'm hitting a problem in this source file:
https://github.com/CRANK211/vs17-ng2-dnc/blob/master/3%20-%20with-data/components/shared/account.service.ts#L18
With this function:
getAccountSummaries() {
return this.http.get('api/Bank/GetAccountSummaries')
.map(response => response.json() as AccountSummary[])
.toPromise();
}
I'm getting red text in Visual Studio on .json() which says
Symbol 'json' cannot be properly resolved, probably because it is located in inaccessible module
and when I try to run the application I get the exception message:
System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!
Following the tutorial I used the same template as the instructor did but I think something must have changed since then since he has a single app.module.ts while my template came with four: app.module.client.ts, app.module.server.ts, and app.module.shared.ts and unfortunately as someone new to ASP.NET Core and Angular2 I have no idea why they're different or what the significance might be.
I've had success up to now by just making any changes he makes to his app.module.ts to my app.module.shared.ts which you can see here:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { AccountListComponent } from './components/account/account-list/account-list.component';
import { AccountSummaryComponent } from './components/account/account-summary/account-summary.component';
import { AccountDetailComponent } from './components/account/account-detail/account-detail.component';
import { FormatAccountNumberPipe } from './components/shared/format-account-number.pipe';
import { AccountActivityComponent } from './components/account/acccount-activity/account-activity.component';
import { AccountService } from './components/shared/account.service';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
HeaderComponent,
AccountListComponent,
AccountDetailComponent,
AccountSummaryComponent,
AccountActivityComponent,
FormatAccountNumberPipe
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'account', pathMatch: 'full' },
{ path: 'account', component: AccountListComponent },
{ path: 'detail/:id', component: AccountDetailComponent },
{ path: '**', redirectTo: 'account' }
])
],
providers: [ AccountService ]
};
Everything compiled fine and worked just like his until this .json() line unfortunately.
How do I fix it?
The red text you get from Visual Studio is probably because it VS cannot resolve the response object. The error should be gone when you prepend the following to your file
import { Response } from '#angular/http';
and change add the type Response to your map functions like so:
getAccountSummaries() {
return this.http.get('/api/Bank/GetAccountSummaries')
.map((response: Response) => response.json() as AccountSummary[])
.toPromise();
}
The other issue you have with the missing provider, is probably because the AccountService is used in a component, and this component is part of a module, and this module does not have the AccountService defined as a Provider. So make sure that every module you have has
providers:[ AccountService ]
defined in it's configuration.
hope that helps