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'
}
Related
I have an error like this:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
this is my index.html
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="" name="description">
<meta content="" name="author">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-animate.js"></script>
<!-- CORE CSS FRAMEWORK - START -->
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<link href=" assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/app.js"></script>
<script src="assets/approute.js"></script>
<script src="assets/js/controller/logincontroller.js"></script>
<script src="assets/js/controller/dashboardcontroller.js"></script>
</head>
<body class=" ">
<div ui-view></div>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/pace/pace.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/viewport/viewportchecker.js"></script>
<script>
window.jQuery || document.write('<script src="assets/js/jquery-1.11.2.min.js"><\/script>');
</script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
and this is app.js
var app = angular.module("myApp", ['ui.router','ngAnimate']);
this is approute.js
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/login');
//$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/ui-login.html",
controller: 'LoginController',
})
.state('index-dashboard', {
url: "/index-dashboard",
templateUrl: "views/index-dashboard.html",
controller: 'DashboardController',
})
});
issued solve
I can't believe but it's work for me using
ng-app="app" to ng-app"app"
Angular JS Error: [$injector:modulerr]
I am developing MEAN stack application. I have used external angular modules in an application. Due to the performance issue, I used the $ocLazyLoad module to load module wise dependency in an application. It works fine with a custom controller, directive, services which I have created and it loads lazily. But when I tried to use with external angular modules, it returns an error. Such as "reCAPTCHA" module of angular use for integrating google recaptcha in an application. it uses only in one place which is signup. Right now I required to include in index.html globally and it loads unnecessarily in every page of an application. So I don't know how to load external angular modules using $ocLazyLoad.
If I remove the dependency from index.html and add in $ocLazyLoadProvider then it throws me an error of an angular module dependency. Can anyone suggest me how to resolve this issue? I am not able to find out the solution of this issue. My main issue is that I don't know how to manage this external modules dependency using $ocLazyLoad. I tried to found from Internet but fails to manage in an application.
app.js
(function() {
'use strict';
}());
/*
* #param angular
*/
angular.
module('myApp', [
'ngResource',
'ngCookies',
'ngRoute',
'ngAnimate',
'ui.router',
'ngNotificationsBar',
'reCAPTCHA',
'oc.lazyLoad'
])
.config(
['reCAPTCHAProvider',
function(reCAPTCHAProvider) {
// required, please use site key:)
reCAPTCHAProvider.setPublicKey('my publick key');
// optional
reCAPTCHAProvider.setOptions({
theme: 'custom',
custom_theme_widget: 'recaptcha_widget' // The id of your widget element.
});
}
], ['notificationsConfigProvider',
function(notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true);
}
], ['cookieProvider',
function(cookieProvider) {
}
],
.run(['$rootScope', '$http', 'UserService', function($rootScope, $http, UserService) {
}]);
app.routes.js
(function () {
function config($ocLazyLoadProvider, $stateProvider, $urlRouterProvider, $httpProvider, $provide, $locationProvider) {
$urlRouterProvider.otherwise('home');
$ocLazyLoadProvider.config({
debug: true, // For debugging 'true/false'
events: true, // For Event 'true/false'
cache: true,
series: true,
modules: [{
name: 'authenticationAndAuthorization',
files: [
"/modules/auth/controllers/auth.js"
]
}, {
name: 'userNotification',
files: [
"/modules/user/controllers/UserNotificationCtrl.js",
]
}, {
name: 'appSocket',
files: [
"/modules/common/services/HzSocket.js"
]
}]
});
$stateProvider
.state('app', {
url: '/',
abstract: true,
views: {
'globalHeaderLine1': {templateUrl: '/partials/headerLine1.html'},
},
resolve: {
content: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['userNotification'])
}]
}
})
/*
* Error page
*/
.state("app.error", {
url: "error/:code",
views: {
'content#': {templateUrl: '/partials/error.html', controller: 'ErrorCtrl', controllerAs: 'Error'}
}
})
.state("app.signin", {
url: "signin/:referer",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signin.html', controller: 'SigninCtrl', controllerAs: 'Signin'}
}
})
.state("app.signup", {
url: "signup",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signup.html', controller: 'SignupCtrl', controllerAs: 'Signup'}
}
})
}
angular
.module('myApp')
.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$provide', '$locationProvider', config])
}());
index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="MobileOptimized" content="320" />
<meta name="description" content="MyApp" />
<meta http-equiv="Cache-control" content="public" />
<link rel="shortcut icon" href="/favicon.ico" />
<link data-require="bootstrap-css#3.0.1" data-semver="3.0.1" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/angular-csp.css" />
<link type="text/css" rel="stylesheet" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/css/animation.css" />
<title>Welcome to MyApp</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="site_loader"></div>
<!-- Header section -->
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<div class="clear"></div>
<div>
<div class="container_video" ui-view="homeVideoPage"></div>
<div ui-view="featureBar"></div>
<div ui-view="content"></div>
<footer class="clear" ui-view="footer"></footer>
</div>
<!-- Javascript Dependencies -->
<!-- Application-->
<script type="text/javascript" src="/vendor/utils/modernizr.custom.js"></script>
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/utils/lodash.min.js"></script>
<!-- angular core files -->
<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-cookies.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-animate.js"></script>
<script type="text/javascript" src="/vendor/utils/ocLazyLoad.js"></script>
<!-- notificationbar -->
<script type="text/javascript" src="/vendor/angular/ngNotificationsBar.min.js"></script>
<!-- google recaptch -->
<script type="text/javascript" src="/vendor/angular/angular-re-captcha.min.js"></script>
<script type="text/javascript" src="/client/app.js"></script>
<script type="text/javascript" src="/client/app.routes.js"></script>
</body>
</html>
controller.js
I am following below way to developing a code in the controller.
(function () {
'use strict';
function SignupCtrl($http, $scope, $rootScope, $cookies, UserService, HzServices, HzSocket) {
// Signup code.
}
angular
.module('myApp')
.controller('SignupCtrl', ['$http', '$scope', '$rootScope', '$cookies', 'UserService', 'HzServices', 'HzSocket', SignupCtrl]);
}());
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
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
});
I'm new to angular and getting the following error and cant figure out why!
Uncaught Error: [$injector:modulerr] Failed to instantiate module PaymentApp due to:
You need to define an async loader such as requireJS or script.js
I cant find any reference on the web either why I'm getting this!
Any idea?
Thanks
EDIT MORE CODE:
App.js
'use strict';
/**
* #ngdoc overview
* #name PaymentApp
* #description
* # PaymentApp
*
* Main module of the application.
*/
angular
.module('PaymentApp', [
'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
])
.config(['$stateProvider','$urlRouterProvider','$ocLazyLoadProvider',function ($stateProvider,$urlRouterProvider,$ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
debug:false,
events:true,
});
$urlRouterProvider.otherwise('/dashboard/home');
$stateProvider
.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
resolve: {
loadMyDirectives:function($ocLazyLoad){
return $ocLazyLoad.load(
{
name:'PaymentApp',
files:[
'scripts/directives/header/header.js',
'scripts/directives/header/header-notification/header-notification.js',
'scripts/directives/sidebar/sidebar.js',
'scripts/directives/sidebar/sidebar-search/sidebar-search.js'
]
}),
$ocLazyLoad.load(
{
name:'toggle-switch',
files:["bower_components/angular-toggle-switch/angular-toggle-switch.min.js",
"bower_components/angular-toggle-switch/angular-toggle-switch.css"
]
}),
$ocLazyLoad.load(
{
name:'ngAnimate',
files:['bower_components/angular-animate/angular-animate.js']
})
$ocLazyLoad.load(
{
name:'ngCookies',
files:['bower_components/angular-cookies/angular-cookies.js']
})
$ocLazyLoad.load(
{
name:'ngResource',
files:['bower_components/angular-resource/angular-resource.js']
})
$ocLazyLoad.load(
{
name:'ngSanitize',
files:['bower_components/angular-sanitize/angular-sanitize.js']
})
$ocLazyLoad.load(
{
name:'ngTouch',
files:['bower_components/angular-touch/angular-touch.js']
})
}
}
})
.state('dashboard.home',{
url:'/home',
controller: 'MainCtrl',
templateUrl:'views/dashboard/home.html',
resolve: {
loadMyFiles:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'PaymentApp',
files:[
'scripts/controllers/main.js',
'scripts/directives/timeline/timeline.js',
'scripts/directives/notifications/notifications.js',
'scripts/directives/chat/chat.js',
'scripts/directives/dashboard/stats/stats.js'
]
})
}
}
})
.state('dashboard.form',{
templateUrl:'views/form.html',
url:'/form'
})
.state('dashboard.blank',{
templateUrl:'views/pages/blank.html',
url:'/blank'
})
.state('login',{
templateUrl:'views/pages/login.html',
url:'/login'
})
.state('dashboard.chart',{
templateUrl:'views/chart.html',
url:'/chart',
controller:'ChartCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'chart.js',
files:[
'bower_components/angular-chart.js/dist/angular-chart.min.js',
'bower_components/angular-chart.js/dist/angular-chart.css'
]
}),
$ocLazyLoad.load({
name:'PaymentApp',
files:['scripts/controllers/chartContoller.js']
})
}
}
})
.state('dashboard.table',{
templateUrl:'views/table.html',
url:'/table'
})
.state('dashboard.panels-wells',{
templateUrl:'views/ui-elements/panels-wells.html',
url:'/panels-wells'
})
.state('dashboard.buttons',{
templateUrl:'views/ui-elements/buttons.html',
url:'/buttons'
})
.state('dashboard.notifications',{
templateUrl:'views/ui-elements/notifications.html',
url:'/notifications'
})
.state('dashboard.typography',{
templateUrl:'views/ui-elements/typography.html',
url:'/typography'
})
.state('dashboard.icons',{
templateUrl:'views/ui-elements/icons.html',
url:'/icons'
})
.state('dashboard.grid',{
templateUrl:'views/ui-elements/grid.html',
url:'/grid'
})
}]);
And then the view (im using asp.net) that loads this app is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/App/styles/main.css">
<link rel="stylesheet" href="~/App/styles/sb-admin-2.css">
<link rel="stylesheet" href="~/App/styles/timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="~/Scripts/ocLazyLoad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
#RenderSection("scripts", required: false)
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="~/App/scripts/app.js"></script>
<script src="~/App/js/sb-admin-2.js"></script>
<!-- endbuild -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
<!-- Morris Charts CSS -->
<!-- <link href="styles/morrisjs/morris.css" rel="stylesheet"> -->
</head>
<body>
<div ng-app="PaymentApp">
<div ui-view></div>
<div id="contents" ng-view ng-cloak translate-cloak>
<!-- Checkout: start-->
#RenderBody()
<!-- Checkout: end -->
</div>
</div>
</body>
</html>