systemjs not working in angular2-rc1 - javascript

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

Laravel version9.19 and vuejs 3. 2 + vite

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

Uncaught SyntaxError: Unexpected token '<' in index.html

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>

Angular hybrid application is not working

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'
}

Handle static file (css, js, img) in React

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

Nginx and angular: Uncaught SyntaxError: Unexpected token <

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

Categories

Resources