I have installed this npm module called ng2-dnd,
according to its wiki page, i needed to make changes in systemjs in order to use it in my application.
Below is my code:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RapidNg2</title>
<base href="/">
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Angular 2 JumpStart">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/project-manager.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aweso me/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/styles/animate.css">
<link rel="stylesheet" href="assets/styles/angular-csp.css">
<link rel="stylesheet" href="assets/styles/cool-list.css">
<link rel="stylesheet" href="assets/styles/project-manager.css">
<link rel="stylesheet" href="assets/styles/sidebar.css">
<link rel="stylesheet" href="assets/styles/default.css">
<link rel="stylesheet" href="assets/styles/rapid-drag-drop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<rapid-ng2-app>Loading...</rapid-ng2-app>
{{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
so I configured my systemjs as following:
system-config.ts
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'ng2-dnd',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/+project-manager',
'app/+designer',
'app/+project-manager/pages/pages',
'app/+project-manager/projects/projects',
'app/+project-manager/workspaces/workspaces',
'app/+project-manager/pages',
'app/+project-manager/projects',
'app/+project-manager/workspaces',
'app/components/icici-body',
'app/components/icici-heading',
'app/components/icici-footer',
'app/components/button',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
if(barrelName=='ng2-dnd'){
cliSystemConfigPackages[barrelName] = { main: 'ng2-dnd' };
}else{
cliSystemConfigPackages[barrelName] = { main: 'index' };
}
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
// 'ng2-dnd': '../node_modules/ng2-dnd/ng2-dnd.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
But I am getting below error in my browser:
zone.js:101 GET http://localhost:4200/ng2-dnd/ng2-dnd.js 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-dnd/ng2-dnd.js
any suggestions?
Try this,
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'ng2-dnd': '../node_modules/ng2-dnd'
},
packages: cliSystemConfigPackages
});
Related
I am working in project with Laravel version9.19 and vuejs3.2 + vite but me display this error:
My current project was set up such as screenshot:
I am sharing with you how I have made configuration vite in Laravel: In file vite.config.js:`
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/scss/app.scss",
"resources/js/app.js",
],
refresh: true,
}),
],
});
In view's file app.blade.php, I have added #vite like below:`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel VUE CRUD Application - LaravelTuts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
#vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
#vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
<h1>Hello Sass</h1>
</div>
</body>
</html>
Any idea way me display error above and how I can solve?
Thanks in advance.
I had same problem and installed plugin-vue
please install it by :
npm install #vitejs/plugin-vue
then add it to vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
laravel({
"resources/css/app.css",
"resources/scss/app.scss",
"resources/js/app.js",
refresh: true,
}),
],
});
Hope it works
I want to include google map places service into my app, and in my index.html file I have an error:
Uncaught SyntaxError: Unexpected token '<' (at js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}:1:1).
You can see that I'm using backtick to add the google map API key into the src url. But how can I have an error about < here?
The index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta."description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script async
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}>
</script>
<script>
let autocomplete;
function initAutoComplete() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),
{
types: ['geocode'],
componentRestrictions: {'country': ['NL', 'CN', 'US']},
fields: ['place_id', 'geometry', 'name'],
},
)
}
</script>
<div id="root"></div>
</body>
</html>
I am migrating from angular 1 to angular 2. I want to run angular 1 from angular 2. I tried to apply debugger ngDoBootstrap(). But it never came. That means angular 1 code is not getting execute. I think i am missing something. Do i need to call ngDoBootstrap() method manually ??
I am not getting any console errors. Do i need to create angular 2 component to run hybrid application.
I am referring Upgrading from AngularJS
index.html
<!DOCTYPE html>
<HTML>
<head>
<title>Activate My Account</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui">
<link rel="shorcut icon" href="/thinkshop/icons/thinkshopfavicon.png" />
<link media=all rel="stylesheet" type="text/css" href="/thinkshop/fonts/font.css" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.3.0/css/ngDialog.min.css"/>
<!-- #StartCSS:IdeolveSignupcss-->
<link rel="stylesheet" type="text/css" href="/thinkshop/css/material_icons.css"/>
<link rel="stylesheet" type="text/css" href="/thinkshop/widgets2/thinkshopapplication/css/thinkshop.css"/>
<link rel="stylesheet" type="text/css" href="/thinkshop/css/commoncss.css"/>
<link rel="stylesheet" type="text/css" href="/thinkshop/widgets2/thinkshopapplication/signup/css/ideolvesignup.css"/>
<link rel="stylesheet" type="text/css" href="/thinkshop/angularplugins/ngDialog/css/ngDialog-theme-custom.css"/>
<!-- #EndCSS:IdeolveSignupcss-->
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></SCRIPT>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<!-- Agular 2 -->
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
</head>
<body resize layout="column" class="IdeolveSignupBody" id="IdeolveSignupBody">
<ideolveformcomponent showideolvelink="true" layout="column" flex></ideolveformcomponent>
<script>
var angularVersion = '2.4.4';
System.config({
paths: {
'unpkg:*': 'https://unpkg.com/*'
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
/* meta: {
'*': {
deps: [ 'zone.js', 'reflect-metadata' ]
}
}, */
packageConfigPaths: [
"unpkg:#*/*/package.json"
],
'app': '/thinkshop/widgets2/thinkshopapplication/activateaccount/',
map: {
'#angular/core': 'unpkg:#angular/core#'+angularVersion,
'#angular/compiler': 'unpkg:#angular/compiler#'+angularVersion,
'#angular/common': 'unpkg:#angular/common#'+angularVersion,
'#angular/platform-browser': 'unpkg:#angular/platform-browser#'+angularVersion,
'#angular/platform-browser-dynamic': 'unpkg:#angular/platform-browser-dynamic#'+angularVersion,
'#angular/upgrade/static': 'unpkg:#angular/upgrade/bundles/upgrade-static.umd.js',
'rxjs': 'unpkg:rxjs#5.0.0-beta.6',
'zone.js': 'unpkg:zone.js#0.6.23',
'reflect-metadata': 'unpkg:reflect-metadata#0.1.3'
}
});
System.import('/thinkshop/widgets2/thinkshopapplication/activateaccount/main.js').catch(function(err){ console.error(err); });
}
</script>
</body>
</html>
main.js
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.module.js';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.js
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
#NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
var app= angular.module('IdeolveActivateAccount', ['ngMaterial', 'jlareau.bowser', 'validation.match', 'ngDialog', 'ngMessages']);
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
}]);
app.config(['$locationProvider', function($locationProvider) {
// remove ! hash prefix
$locationProvider.hashPrefix('');
}]);
app.value("CLIENT_ID", {clientId : ""});
app.constant("APP_NAME", 'web-ideolve');
app.constant("AUTH_TOKEN", "");
app.constant("CAN_EDIT",false);
app.directive('resize', loadResize);
app.service("SupportedDeviceService", loadSupportedDeviceService);
app.service("ActivateAccountService", loadActivateAccountService);
app.factory('httpRequestInterceptor', loadPlainHttpRequestInterceptorfactory);
app.controller("ActivateAccountApp", loadActivateAccountApp)
app.controller('ActivateAccountController', loadActivateAccountController);
app.component("ideolveformcomponent",{
bindings:{
showideolvelink: '<'
},
controller: 'ActivateAccountApp',
templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
});
this.upgrade.bootstrap(document.body, ['IdeolveActivateAccount']);
}
}
I did some cleanup in my code and my code is started working.
Here is a solution,
These files are reomved from index.html .
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js">
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js">
Un commented some config from System.config
meta: {
'*': {
deps: [ 'zone.js', 'reflect-metadata' ]
}
}
reflect-metadata requires crypto lib. Added crypto into System.config
map: {
'#angular/core': 'unpkg:#angular/core#'+angularVersion,
'#angular/compiler': 'unpkg:#angular/compiler#'+angularVersion,
'#angular/common': 'unpkg:#angular/common#'+angularVersion,
'#angular/platform-browser': 'unpkg:#angular/platform-browser#'+angularVersion,
'#angular/platform-browser-dynamic': 'unpkg:#angular/platform-browser-dynamic#'+angularVersion,
'#angular/upgrade/static': 'unpkg:#angular/upgrade/bundles/upgrade-static.umd.js',
'rxjs': 'unpkg:rxjs#5.0.0-beta.6',
'zone.js': 'unpkg:zone.js#0.6.23',
'reflect-metadata': 'unpkg:reflect-metadata#0.1.3',
'crypto' : '#empty'
}
I have a React app and I'm using a template for this app. This is my react app's folder structure:
|app
|-client
|---assets
|---component
|-node_modules
|-server
|---index.html
|---index.js
In my server/index.html there are many static files such as css, js and img.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/assets/img/logo-fav.png">
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css"/>
</head>
<body>
<div class="be-wrapper" id="root">
</div>
<script src="bundle.js"></script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
Plugins.init();
});
</script>
</body>
</html>
How to handle those files in a React app? Meanwhile in a Node JS app we use this to handle static files:
app.use('/assets',express.static(__dirname + '/assets'));
the static file isn't loaded and not found if i type eg:
localhost:3000/assets/js/jquery, the file is not available
and this is my server/index.js file:
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
let app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));
app.use('/assets',express.static(__dirname + '/assets'));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname,'../index.html'));
})
app.listen(3000, () => console.log('Running port 3000'));
Thank you.
You can put static files as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Container Components Example</title>
<link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/css/bootstrap.theme.min.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div id="root"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
Source: https://github.com/johibkhan2/react-sample-app/blob/master/index.html
so my problem is, that nginx is apparently not loading all the dependecies for angular defined at the beginning of the .html view.
This is an excerpt from the start_game.html
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<!--<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>-->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/../node_modules/angular-material/angular-material.css"/>
<link rel="stylesheet" href="/../app/assets/app.css"/>
<script src="/../node_modules/angular/angular.js"></script>
<script src="/../node_modules/angular-animate/angular-animate.js"></script>
<script src="/../node_modules/angular-aria/angular-aria.js"></script>
<script src="/../node_modules/angular-environment/dist/angular-environment.js"></script>
<script src="/../node_modules/angular-material/angular-material.js"></script>
<script>
angular.module("startGame", ['ngMaterial']);
</script>
<script src="/start_game.js"></script>
`
The nginx.conf file looks like this
`server {
# Used to set address and/or port for IP.
listen 80;
server_name localhost;
include /etc/nginx/mime.types;
location /console {
proxy_pass http://jatos-backend;
}
# all other traffic
location / {
root /usr/share/nginx/html;
try_files $uri /trust/start_game/start_game.html$is_args$args;
include /etc/nginx/mime.types;
}
location /start_game {
return 404;
}
}
`
When requesting http://localhost i get the following errors
Console errors
but the actual path http://localhost/trust/start_game/start_game.html directly to the view resolves without any issues.
Thank you for your time