I am developing an Angular app with Nodejs and gulp. I have wrote my TypeScript file in client folder and my gulp task complete those file and place them in public folder.
Here is my components.ts file:
import {Component, View} from 'angular2/angular2';
import {FormBuilder, formDirectives } from 'angular2/forms';
#Component({
selector: 'login',
injectables: [FormBuilder]
})
#View({
templateUrl: '/scripts/src/components/login/login.html',
directives: [formDirectives]
})
export class login {
}
here is my bootstrap file:
import {bootstrap} from 'angular2/angular2';
import {login} from './components/login/login';
bootstrap(login);
Here is my index.html:
<!doctype HTML>
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime#0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.27/router.dev.js"></script>
</head>
<body>
<div class="container">
<login></login>
</div>
<script>
System.import('scripts/src/bootstrap');
</script>
</body>
</html>
Here is my server.js file setting which lies in app folder
app.use(express.static(path.join(__dirname, '../public')));
But when I load my app in browser, I am unable to load the template.
Here is my file structure:
Few Errors that i have found in your coding is listed below:
First of all your imports is incorrect you may refer to this question for all Updated Imports for angular2 Beta.
https://stackoverflow.com/a/34354666/5043867
Formdirectives has been changed to FORM_DIRECTIVES.
your Path is not proper i think for the login.html file from the bootstraped file.
and most importantly ANgular2 is in beta now you are still using alpha26(which is too old now).
Use template and not templateUrl. Some thing like template: require( './login.html )
As others have mentioned, you should be using Beta 1, as people will be more inclined to answer questions.
HTH
Related
I have a simple setup with an index.html, some js file and a sass file, building it with vite. I am using vite defaults without a config file.
After running a build the index.html in the dist folder references everything as static paths:
<head>
<script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>
The same happens to url() paths in css: They are turned into static paths as well.
My question is: Is there a configuration option to make vite output relative paths, so:
<head>
<script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>
This leading path is the base URL, configured by the base option, which is / by default.
You can remove the base URL by setting base to an empty string, making the path relative to its deployment directory:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '', 👈
})
demo
I'm trying to study React in the context of Django... React by itself works, Django also works. When I'm trying to work with React in the Django, it doesn't give me any troubles, but nothing is seen on the page.
I tried:
I installed all possible packages from React. I lowered the version of one package, I don't remember exact name of it right now... It gave me some faults, I lowered its version because it automatically installed alfa version.
Originally I installed React into the Django project, but then I realized, it is wrong way to do it and installed React as separate Django project...
I tried to look up if somebody else had the same problem as me, found two threads, I tried solutions, they didn't help unfortunately:
stackoverflow.com/questions/61125436/opening-a-new-react-portal-only-opens-an-empty-page-with-no-content
And one more I cannot find it right now...
I followed this blog:
www.valentinog.com/blog/drf/
My code.
I have to mention. I start node.js in one cmd window with 'npm run dev' and after I start Django project in another cmd window... with 'python manage.py runserver'... Both start without any complaints...
The structure is quite standard, two projects... frontend(React) and sc(Django)...
frontend/src/index.js:
//import App from "./components/App";
import React from 'react';
import ReactDOM from 'react-dom';
import '/static/css/index.css';
import '/src/components/App.js';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import '/node_modules/bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('app'));
serviceWorker.unregister();
frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h4>To Do List</h4>
</div>
);
}
}
export default App;
frontend/templates/frontend/index.html(these folders included in settings.py as templates, so Django has to see files in theses folders):
<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<body>
<div id="app"></div>
+{% render_bundle 'frontend' %}//the + sign can be seen on the page
</body>
</html>
sc_s/urls.py:
path('front_index/', views.front_index, name='front_index'),
sc_s/views.py:
def front_index(request):
return render(request, 'frontend/index.html')
Please let me know if I forgot some code...
On new install of Foundation 6 Zurb stack, installing building block sticky-shrinknav and injecting it into index.html template using {{> sticky-shrinknav}} shows the component on the page but scrolling the page does not produce the expected result.
Tried installing Zurb stack multiple times in different locations. Same results are produced.
This is the index.html template:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veridata</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
{{> sticky-shrinknav}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
My app.scss file contains:
#import 'components/building-blocks/sticky-shrinknav';
and my config.yml contains:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/building-blocks/sticky-shrinknav.js"
- "src/assets/js/app.js"
Expecting the same as demonstrated on this page:
https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
Instead, the nav bar is static (doesn't shrink or move) and some page components are above the navbar when scrolling, while others are beneath the navbar as i scroll.
My apologies if this is a noob question. I am new to Foundation.
EDIT: this is the app.js file contents:
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
You have to import the sticky-shrinknav component in your app.js (if you want to bundle it there). Otherwise you have to also include the generated bundle in your html file too.
But in general you need const $ = require('jquery') or import $ from 'jquery' as first line in the sticky-shrinknav file to load jQuery for it.
I need to test my Node js apllication with mocha-phantomjs.I have tried the below code to test the app but i'm getting error as 'ReferenceError: Can't find variable: require'.How to resolve this.
test.html
<html>
<head>
<title> Tests </title>
<link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/should/lib/should.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
</script>
<script src="test.js"></script>
<script>
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
else { mocha.run(); }
</script>
</body>
</html>
test.js
var module=require('../lib/requiredModule');
var should = require('chai').should();
describe('Testing',function(){
it('Save Data',function(){
module.save(content,function(err,res){
should.not.exist(err);
});
});
});
While running the html file as mocha-phantomjs test/test.html i'm getting error as
ReferenceError: Can't find variable: require
So, I think your problem is that running your tests via the test runner basically runs them as if they were client side. Thus, it will not be able to find your native node modules (like require). You can try loading require.js in directly. Or, just use
<script src="../node_modules/chai/chai.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
var should = chai.should; // This will give you access to chai should.
</script>
So you will not need to require anything that you src to. Again, think of this like you are doing everything client side.
Take a look at browserify, which enables you to automatically include npm libraries: https://github.com/substack/node-browserify
Also recommended, are connect-browserify for auto-reloading in development https://github.com/andreypopp/connect-browserify and asset-rack https://github.com/techpines/asset-rack for automatic bundling in production.
Posting here as requested original post can be found here
Hello, I would like to build ember.js using Ubuntu 13.
I have cloned the official Github project, cd into the project and as described in the readme file I did:
bundle install
rake dist
no error is shown on screen and as a result I get a directory shown in the image
I would like to use ember and ember-data, so I include
ember.js
ember-data-deps.js
files in my test project.
The problem is that I am getting a TypeError: App.Router is undefined
I am using this at my client.js file to init ember
this.App = Ember.Application.create();
App.Router.map(function() {
this.route('contributors');
this.route('contributor', {path: '/contributors/:contributor_id'});
});
Am I doing something wrong in the build process?
Should I include some other js files in my project?
Thank you in advanced.
The TypeError: App.Router is undefined error is because ember.js is not loaded correctly or in the correct order.
To get ember-data (that is separate from ember.js) you have to clone this repo (https://github.com/emberjs/data) and follow the build instructions in the readme file, it's straight forward, and once you have the dist directory from the ember-data build process get the file ember-data.js development version or ember-data.min.js for production (well, production... ember-data is still considered unstable for production environments).
here is a simple ember project setup using ember-data:
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ember app</title>
</head>
<body>
<script type="text/x-handlebars">
hello world!
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var App = Ember.Application.create({
ready: function () {
console.log("app started...");
}
});
hope it helps