I was playing with Angular2 beta tutorials, and discovered how magnificient are ES6 new way of importing modules & systemjs.
However, there's a thing I can't make it to work.
Everything works fine, UNTIL you have second level page, system.js is configured only for 1st level page
here is plnkr with the issue http://plnkr.co/edit/afsJY6tzrSeYMOtzUnXQ?p=preview
once run, as you can see, homepage works but the second level page is not working.
Must be something with systemjs configuration, I have my explanations and I fully understand why it does not work, and I have found a workaround, but I don't like it, can you please point me to the correct way?
this part:
System.import('app/boot').then(null, console.error.bind(console));
could be easily fixed by using
System.import('/app/boot.js').then(null, console.error.bind(console));
but then there in the boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
I don't know how to fix the './app.component' because if I do '../app/app.component.js' then the typescript compiler blames, so, how's the correct strategy?
I'm not sure what the recommended way would be, as I'm still a beginner as well, but one way is to add maps to the config:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
app: '../app' // <--
}
});
You could of course replace the relative ../app with something absolute like /app when you are running it locally.
Related
I have a ASP.NET Core application which renders tables on the serverside, some are quite complex.
I used to use sorttable: Make all your tables sortable for make the tables sortable; now as I have included vue.js (2.0, without npm / webpack), the jquery plugin obviously does no longer work properly.
Now, before i transition fully over to 100% clientside table rendering - which I want to avoid for now, if its possible, cause its complex - is there something similar to add sorting to a rendered html with vue or is that concept that old and no longer viable in vue.js and other modern frameworks?
So, questions are:
How to make sorttable work in vue.js are (without npm / webpack)
Or how to add something like that to a already server rendered html with vue?
Looking forward and regards, Peter
Okay, got it. That was a journey :-)
Sorttable script: https://www.kryogenix.org/code/browser/sorttable/
The script:
Vue.component('date-table', {
template: '<div><slot></slot></div>',
props: ['innerHtml'],
mounted: function () {
var self = this;
sorttable.makeSortable(this.$el.firstChild);
},
beforeDestroy: function () {
}
});
The markup:
<date-table v-once>
HERE IS MY ORDINARY HTML WHICH SHOULD BE SORTED BY
"sortable.makeSortable(...."
</data-table>
I'm trying to load a gltf model in react-three-fiber (R3F) and I am having a nightmare. I have tried looking for the answer and there have been people with a similar problem but I was not able to solve my issue.
I keep getting this in the console:
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:213)
at Object.onLoad (GLTFLoader.js:145)
at XMLHttpRequest.<anonymous> (three.module.js:35829)
As far as I am aware, there is nothing wrong with my code. I've tried writing it loading in the model in in many different ways. The creator of react-three-fiber loaded in a model to his codesandbox a few days ago like this: https://codesandbox.io/s/r3f-gltf-useloader-8nb5i - so I feel it can't be an issue with R3F. I noticed that he was using a glb rather than a gltf file so I went and found a glb model to check if that would make a difference. I realised I also have to have my model in the public folder, which I have also done. Unfortunately, this did not make a difference and I still continue to get the issue.
I have tried like this:
import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three";
import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";
import Controls from "./Components/Controls.Component";
import "./App.css";
const Chair = () => {
const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
return (
<mesh geometry={nodes.Cube.geometry}>
<meshStandardMaterial attach="material" color="lightblue" />
</mesh>
);
};
function App() {
return (
<Canvas
camera={{ position: [0, 0, 5] }}
onCreated={({ gl }) => {
gl.shadowMap.enabled = true;
gl.shadowMap.type = THREE.PCFSoftShadowMap;
}}
>
<fog attach="fog" args={["pink", 5, 15]} />
<Plane />
<Controls />
<Box />
<Suspense fallback={null}>
<Chair />
</Suspense>
</Canvas>
);
}
export default App;
Here is a person that had a similar issue: https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10 but I still don't really understand how to solve this problem.
Any help would be greatly appreciated, I was so looking forward to having a play with R3F but I seem to have fallen at the first hurdle. Someone please save me from this headache! haha.
Thank you!
Lots of ifs here but If you have saved the 'mindbreaker.glb' in your 'public' directory and you are using create-react-app then the path to the file should be 'useLoader(GLTFLoader, "mindbreaker.glb")
if it's codesandbox disable loop protection in the settings. csb cant load bigger gltf's and the error is impossible to track down.
otherwise it can be everything, if the gltf is draco compressed you need draco loader, it could be a wrong path, missing lights, model too big so it's not in the cams frustrum, etc. all this stuff is really awful in the beginning, but you'll get used to it. when i started threejs it nearly drove me nuts.
ps.
../public/ looks suspicious. it's either /... or /public/...
I had the same problem so I moved to a simple HTTP server so I could progress. In my case the models will ultimately be served so this isn't too much of an inconvenience.
http-server . -p 8000 --cors
and within react provide the url to useLoader.
You can find more info at
https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally
In case anyone else finds this thread when looking for the answer to this issue, i solved some loading problems by importing my glb file first. I'm not too well versed in react yet, but I think it is because react changes the relative path to the file, and so importing it as shown below (for example) might work.
import modelPath from "../public/mindbreaker.glb";
//----------//
// Use your loader with the imported model variable, instead of a hardcoded path
useLoader(GLTFLoader, modelPath)
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris
Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.
I am trying to use Zurb Foundation 6.2.3 with Aurelia, I started to use skeleton-esnext-webpack. The problem that I am running into is when i try to initialize $(document).foundation(). Below is snippet from my main.js
const rootElement = document.body;
rootElement.setAttribute('aurelia-app', '');
await aurelia.start().then(a => a.setRoot('app', rootElement)).then(a => {
$(document).foundation();
console.log('foundation loaded')
});
I am new to webpack and esnext, but based on my understanding I need to include foundation using require or import. Can someone point me in the right direction and guide me in resolving this problem?
Your help is greatly appreciated.
Regards,
TiKi
As it turns out what was happening was two part problem. one zurb foundation is not jQuery 3.0 compliant and second webpack was pulling in transitive dependencies. I ended up including jquery-migrate 1.3.0 as dependency and also updated the webpack.config.js with resolve alias as below to make sure that jQuery was only loaded once.
resolve: {
alias: {
'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery'))
}
}
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine