Menu
I'm trying to use ng-polymer-elements with angular and requirejs. I did follow this instructions https://github.com/GabiAxel/ng-polymer-elements and I had not success. When I do remove the instance "ng-polymer-elements" from my requires at the "main.js" everything works correctly. Someone can help me,please? thanks.
A little issue part:
Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to: Error: [$injector:nomod] Module 'Coderup' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
require.config({
paths: {
angular: '../bower_components/angular/angular',
'angular-animate': '../bower_components/angular-animate/angular-animate',
'angular-cookies': '../bower_components/angular-cookies/angular-cookies',
'angular-mocks': '../bower_components/angular-mocks/angular-mocks',
'angular-resource': '../bower_components/angular-resource/angular-resource',
'angular-sanitize': '../bower_components/angular-sanitize/angular-sanitize',
'angular-scenario': '../bower_components/angular-scenario/angular-scenario',
'angular-touch': '../bower_components/angular-touch/angular-touch',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
'ng-polymer-elements' : '../bower_components/ng-polymer-elements/ng-polymer-elements.min',
platform : '../bower_components/platform/platform',
'uiRouter' : '../bower_components/angular-ui-router/release/angular-ui-router',
jquery : '../bower_components/jquery/dist/jquery.min'
},
shim: {
angular: {
deps: ['platform'],
exports: 'angular'
},
platform : {
exports : 'platform'
},
jquery : {
exports: 'jquery'
},
'ng-polymer-elements' : [
'angular'
],
'uiRouter': [
'angular'
],
'angular-cookies': [
'angular'
],
'angular-sanitize': [
'angular'
],
'angular-resource': [
'angular'
],
'angular-animate': [
'angular'
],
'angular-touch': [
'angular'
],
'angular-mocks': {
deps: [
'angular'
],
exports: 'angular.mock'
}
},
priority: [
'angular'
],
packages: [
]
});
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'uiRouter',
'ng-polymer-elements',
'controllers/config',
'directives/config'
], function(angular,app) {
'use strict';
/* jshint ignore:start */
var $html = angular.element(document.getElementsByTagName('html')[0]);
/* jshint ignore:end */
angular.element().ready(function() {
angular.bootstrap(document, [app.name]);
});
});
define(['angular', 'uiRouter' ,'ng-polymer-elements'], function (angular) {
'use strict';
var app = angular.module('Coderup', ['ui.router','ng-polymer-elements', 'appControllers', 'appDirectives'])
.config(function ($stateProvider, $urlRouterProvider) {
var dirView = "../views/";
$urlRouterProvider.otherwise("/learn");
$stateProvider
.state('learn', {
url: "",
controller: 'DadController'
})
.state('route1', {
url: "/route1",
views: {
"container": {
templateUrl: dirView + "teste.html"
}
}
});
});
return app
});
Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to:
Error: [$injector:nomod] Module 'Coderup' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=Coderup
at http://localhost:9000/bower_components/angular/angular.js:80:12
at http://localhost:9000/bower_components/angular/angular.js:1797:17
at ensure (http://localhost:9000/bower_components/angular/angular.js:1721:38)
at module (http://localhost:9000/bower_components/angular/angular.js:1795:14)
at http://localhost:9000/bower_components/angular/angular.js:4064:22
at forEach (http://localhost:9000/bower_components/angular/angular.js:335:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4048:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:3974:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1484:20)
at Object.bootstrap (http://localhost:9000/bower_components/angular/angular.js:1505:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=Coderup&p1=Error%3A…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1505%3A12)
Guys please, help me to resolve it. You can get this project by git.
git clone https://[email protected]/vcrzy/coderup.git
npm install
run mongod
cd /app
node app.js
go http://localhost:9000
857
With Angular Elements we can package our Angular code into a collection of web components that we can then use in our Angular, React, or AngularJS applications. Let’s change the example above to do that.
Note: The polymer components have the suffix @next, this is necessary for now because Polymer is still on preview. Next, import the element in the Angular component that you want to use it in. Add the [ironControl] directive to elements that use Angular form directives.
Since in 2018 we have version 1.0 of the web comp o nents standard, the previews releases of Polymer 3.0, and also Angular and Vue making efforts to be as compatible as possible with the standard, I thought it was time to use them together -Angular and Polymer-, at least in a test project.
It can act as a container for other elements which is not actually rendered on the screen. So it can be rendered as a parent element for others We can use “ng-container”, where multiple Structural Directives are required. By design, Angular cannot have multiple structural directives on the same components. We can do the same with “ng-container”
You probably have an issue with files loading order. You need to shim your app, with all dependencies, add something along these lines to the shim section:
app: [
'angular',
'ng-polymer-elements',
...
// list all other deps
]
The best way to troubleshoot this issue is to watch the Network tab and see the sequence of how files are being loaded, and make sure they load in the right order.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
