Angular 2 unexpected token import - javascript

Hello i am absolute beginner into Angular2, i just set some application but i got error angular2-polyfills.js:390 Error: SyntaxError: Unexpected token import(…)
Please help me to resolve this.
I created app.component.ts file into same name space as main.ts
here is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>Acme Product Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="app/app.component.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
Starter files for Angular2: Getting Starteddd.
<pm-app>Loading app...</pm-app>
</body>
</html>
app component file
import { Component } from 'angular2/core';
#Component({
selector:'pm-app',
template: `<div>{{PageTitle}}</div>`
});
export class AppComponent{
pageTitle:string = 'Ovo je string';
}
main ts file
import { bootstrap } from 'angular2/platform/browser';
// Our main component
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Help i am new to Angular2 please help

Related

Why do I get this error? Everything seems fine

I'm learning React. I added them to my website with html script tag:
My index.html:
<!DOCTYPE html>
<html 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>MyWebsitewithReact</title>
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#2e2e2e">
</head>
<body>
<div class="navbar">
Home
Plugins
</div>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
This is the error I get :
Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I have tried to visit and the error is:
createRoot(...): Target container is not a DOM element
I checked the documentation and everything seems fine
EDIT:
first in your file index.js you need to add in first line:
import React from 'react';
import ReactDOM from 'react-dom/client';
because without imported these library you can't use elements of React and ReactDOOM.
and in your index.html you need to replace this:
<script src="js/index.js"></script>
to this:
<script src="js/index.js" type="text/babel" data-type="module"></script>
I wish I solved your problem.

Vue component not recognised? Very basic setup. The "header" component has been registered but not used vue/no-unused-components

I'm trying to get this header component to be recognised and it just isnt. I've tried messing setting eslint to strict, and messing with my syntax to no avail. I don't get it, this should be so simple. ANy help would be appreciated.
App.vue
<template>
<div class="container">
<header />
</div>
</template>
<script>
import header from './components/header'
export default {
name: 'App',
components: {
header,
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>
header.vue
<template>
<header>
<h1>Component header</h1>
</header>
</template>
<script>
export default {
name: 'header',
};
</script>
<style>
header {
display: flex;
}
</style>
Any help would be awesome. Thankyou.
The main.jsneeds to be imported into the index.html:
<body>
<div id="app"></div>
<script type="module" src="/src/js/main.js"></script>
</body>
(using the correct path)
It is better to rename your header component to another word, because <header> is used as a standard tag name in html

ReactJS not rendering on Laravel

I am trying to render reactJS a component on my laravel (5.7) but it does not seem to show up. This is what my files look like:
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>React JS</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{asset('css/app.css')}}" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from 'react';
class App extends React.Component() {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
export default App;
npm run watch is running and shows no errors.
Please what might I be doing wrong here?
Using defer fixed it for me
<script defer src="js/app.js"></script>
Use defer : The defer attribute is a boolean attribute.
<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Source: MDN
Syntex
You have syntactic bug when you declare class in App.js. You don't use parentheses when you declare class in JavaScript.
class App extends React.Component {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Add this inside the <head> </head>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
One way to solve this issue is by extracting the vendor library code in a separate file. To do so, open the webpack.mix.js file and update its code as follows:
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.extract(['react'])
.postCss('resources/css/app.css', 'public/css', [
//
]);

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

Angularjs ngRoute uncaught object error

I'm getting an uncaught object error in my console when trying to load my angularjs app. I don't know if it's related to ng-route.js or not, but that's all the error tells me is uncaught object
Here's my Code
HTML
<!doctype html>
<html class="no-js" lang="en" ng-app="selfservice">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div id="template">
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
app.js
//Initialize angular module include route dependencies
var app = angular.module("servicedesk", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
controller.js
app.controller("login", function ($scope) {
return "";
});
ng-app should contain the name of the module. Change ng-app="selfservice" to ng-app="servicedesk".
Angular-route is a separated module, you need to include it inside your servicedesk module declaration like this :
var app = angular.module("servicedesk", ["ngRoute"]);

Categories

Resources