I'm trying to make a Angular2 app (bootstrapped with angular-cli) work with Rails's ActionCable by integrating this lib on the frontend https://github.com/mwalsher/actioncable-js
I npm installed the lib,
added this to angular-cli-build.js
'actioncable-js/index.js',
and this in system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'moment': 'vendor/moment/moment.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'lodash': 'vendor/lodash',
'actioncable-js': 'vendor/actioncable-js'
};
/** User packages configuration. */
const packages: any = {
'ng2-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ng2-bootstrap.js'
},
'actioncable-js':{
main: 'index.js'
},
'moment':{
format: 'cjs'
},
'lodash':{
main: "lodash.js"
}
};
added this to my component:
import { ActionCable } from 'actioncable-js';
but the build errors with this message:
Cannot find module 'actioncable-js'.
anyone has any idea why?
My guess is typings are missing, but I'm not sure how to fix this.
Rails has since released an official actioncable package here:
https://www.npmjs.com/package/actioncable
No there is no problem with typings. What you are missing is how to use Javascript library in angular 2 typescript application. If you want to use JavaScript library in your TypeScript application, then you need to import the library import 'actioncable-js' and then you have to declare the variable. declare let ActionCable:any This tells typescript we have a global variable ActionCable present in our application. Now you can access it in your angular 2 component implementations and do whatever you want to do. You can read the discussion here.
angular-cli.build.js
vendorNpmFiles: ['actioncable-js/**/*.js']
systemjs.config.js
map:{ 'actioncable-js':'vendor/actioncable-js/dist/action_cable.js'}
package:{'actioncable-js': defaultExtension: 'js'} }
`
app.component.ts
import 'actioncable-js';
declare let ActionCable:any;
#Component({
....
})
export class AppComponent implements OnInit{
constructor(){}
ngOnInIt(){
//can access *ActionCable* object here
}
}
Related
I've manage to include bootstrap 5 without any issues, but when I try to include fullcalendar I get this error on browser console:
Failed to load module script: Expected a JavaScript module script but
the server responded with a MIME type of "text/css". Strict MIME type
checking is enforced for module scripts per HTML spec. (main.css:1)
So it looks like the library is imported correctly but the css isn't
my stimulus controller:
import { Controller } from "#hotwired/stimulus"
import moment from "moment"
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listPlugin from '#fullcalendar/list';
export default class extends Controller {
static targets = [ "calendar" ]
connect() {
console.log(this.calendarTarget)
let calendar = new Calendar(this.calendarTarget, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listWeek'
}
});
}
}
Any ideias what I'm doing it wrong?
EDIT: looks like is related to:
https://github.com/rails/rails/issues/44239
I have been fiddling with this problem for a while today. I too couldn't get past the issue with the JS trying to pull in the CSS and raising MIME type errors.
However, I have managed to get FullCalendar running with importmaps by vendoring the main.js file provided by the CDN (referenced here), and then manually editing the vendored file to export the FullCalendar function as the default.
main.js -> https://cdn.jsdelivr.net/npm/fullcalendar#5.11.0/main.min.js
Copy this into vendor/javascript/fullcalendar.js
Pin the file in importmap.rb:
pin "fullcalendar" # #5.11.0
At this point I have the following error:
Failed to register controller ... SyntaxError: The requested module 'fullcalendar' does not provide an export named 'default'
Edit your new vendor/javascript/fullcalendar.js file and append to the bottom:
export default FullCalendar;
And then in the stimulus controller:
import { Controller } from "#hotwired/stimulus"
import FullCalendar from 'fullcalendar';
export default class extends Controller {
connect() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
}
}
Css is just brought in via application.scss as normal.
We are currently migrating our frontend from jQuery to Reactjs.NET. We are using React 16.8 which allows us to use React Hooks instead of classes.
We setup our project successfully and tried it first with classes and server side rendering which worked well, but my team rather use React Hooks. I tried using Webpack + Babel to transpile .jsx files since it didn't work anymore using only razor helper #Html.React(), but I still get the same error from my component.
We are using Asp.NET 4.x and NET framework 4.7.
This is my view children.cshtml
#Html.React("ChildrenForm", new {
familyTiesId = Model.FamilyTiesId
},
serverOnly:true
)
This is my ReactConfig.cs:
namespace Nop.Web
{
public static class ReactConfig
{
public static void Configure()
{
// If you want to use server-side rendering of React components,
// add all the necessary JavaScript files here. This includes
// your components as well as all of their dependencies.
// See http://reactjs.net/ for more information. Example:
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/Components/Customer/ChildrenForm.jsx");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
}
My component:
import React, { useState, useEffect } from 'react';
const ChildrenForm = (props) => {
const [ familyTiesId, setFamilyTiesId ] = useState(props.familyTiesId);
...
}
It should work, but instead I get:
SyntaxError: Unexpected identifier
Line 20: #Html.React("ChildrenForm", new {
Line 21: ddtl = Model.DDTL,
Line 22: listFamilies = Model.ListFamilies,
...
[JsCompilationException: SyntaxError: Unexpected identifier
at ChildrenForm.jsx:6:8 -> import React, { useState, useEffect } from 'react';]
JavaScriptEngineSwitcher.V8.V8JsEngine.InnerExecute(String code, String documentName) +258
React.ReactEnvironment.EnsureUserScriptsLoaded() +548
It seems like we cannot import files when using razor helper #Html.React and server side rendering.
How can I do an import and use React Hooks while server side rendering?
Instead of having to import it, you can just use:
const [ familyTiesId, setFamilyTiesId ] = React.useState(props.familyTiesId);
Just call useState directly instead of importing.
I currently have one application.js file in my Rails app in which I've put all my Vue.js code, as follows:
import Vue from 'vue/dist/vue.esm';
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('dashboard-topbar')) {
const dashboard = new Vue({
... do stuff
})
}
if(document.getElementById('map')) {
const map = new Vue({
... do stuff
})
}
if(document.getElementById('something-else')) {
const something-else = new Vue({
... do stuff
})
}
}
but I would like to separate these into their own .vue files.
What's the recommended way & directory structure for doing this?
Thanks!
You have to make use webpack and you need to configure specific loader for vue file and another supporting loader. By googling itself you can find articles to build vue app from scratch(https://www.google.co.in/search?q=vuejs+webpack+starting).
For directory structure you may follow the vue-cli (https://github.com/vuejs-templates/webpack)
I am trying to use Razor to generate the html used in an Angular template. I am using Angular v 2.0.0. I have a Contract.cshtml that looks like:
<script>
System.import('contract.js').catch(function(err){ console.error(err); });
</script>
<my-contract>
<h1>Hello {{name}} this is a quick starter for angular 2 app</h1>
</my-contract>
A Contract.ts that looks like
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { ContractModule } from './app/Contract/contract.module';
platformBrowserDynamic().bootstrapModule(ContractModule);
A contract.component.ts that looks like:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { ContractComponent } from './contract.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [ ContractComponent ],
bootstrap: [ ContractComponent ]
})
export class ContractModule { }
And a contract.component.ts that looks like:
import { Component } from '#angular/core';
#Component({
selector: 'my-contract'
})
export class ContractComponent {
public name = 'Nigel Findlater';
consturctor() {}
}
When I run this I get
Error: Error: No template specified for component ContractComponent
at DirectiveNormalizer.normalizeDirective (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:13476:21) at RuntimeCompiler._createCompiledTemplate (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16869:210)
at eval (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16807:43)
at Array.forEach (native)
at eval (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16805:50)
at Array.forEach (native)
at RuntimeCompiler._compileComponents (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16804:45)
at RuntimeCompiler._compileModuleAndComponents (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16741:39)
at RuntimeCompiler.compileModuleAsync (http://localhost:2600/lib/#angular/compiler/bundles/compiler.umd.js:16732:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:2600/lib/#angular/core/bundles/core.umd.js:6954:29)
Evaluating http://localhost:2600/contract.js
Error loading http://localhost:2600/contract.js
I think the error is in contract.component.ts, but I don't know how not to specify a template here
Angular2 is not designed to be used with Razor generated templates. It is best to allow Angular2 to handle all the routing and not use MVC because this adds an unnecessary dependency which makes the project harder to test.
I use Angular to offload a lot of work from the server to the client and host complex websites using much less resources. Those websites are not SPAs.
In that context it can be really useful to use ASP.NET router and razor generated templates (sometimes precompiled).
The only problem I faced in using razor generated templates in Angular was the way webpack was configured.
After removing the angular2-template-loader everything worked smoothly.
we are using sprockets-es6 to transpile our angular es6 code in our rails-angular app. There seems to be some issues w/ using the es6 modules, I think maybe because sprockets-es6 transpiles to commonJS which causes modules to not work in the browser? Code looks like:
class DirtyAwareModel {
... some code
}
export { DirtyAwareModel };
and imported in a separate file/class like:
import { DirtyAwareModel } from './DirtyAwareModel';
class SnippetModel extends DirtyAwareModel {
... some code
}
SnippetModel.$inject = ['SnippetResource', 'PristineTracker', '$q'];
angular.module('selfalyticsServices.snippetModel', []).service('SnippetModel', SnippetModel);
I get an error in dirty_aware_model.js.self.js:
Uncaught ReferenceError: exports is not defined
the error being thrown here in the transpiled code:
Object.defineProperty(exports, "__esModule", {
value: true
});