Im using the angular.js 1.5.8 framework along with "oc.lazyload" library for lazy loading applications.
Now, i'm trying to load a "child" component from parent component (ie. lazy load the component "navigation" into the "main") but it doest work.
Main component:
angular.module('app', [
'ngRoute', 'oc.lazyLoad'
]).component('main', {
template: '<navigation></navigation>',
controller: function($ocLazyLoad: any) {
return $ocLazyLoad.load('ui/navigation.js');
}
})
)
Navigation.js:
angular.module('app').component('navigation', {
templateUrl: './ui/navigation.html'
});
When i look into the developer console it shows me that only the navigation.js file is loaded and not the template (navigation.html)
It does work when i'm using it with ngRouter resolve property however. Is there anything similar i could use for components?
Related
I upgraded our AngularJS package from 1.4.14 to 1.5.11. In doing so, our routes unexpectedly stopped loading. The base url for our application is baseurl.com/app.
I've reviewed the angularjs migration documents, but cannot find anything that has helped me to fix this issue.
App.config(function($routeProvider) {
$routeProvider
// route for the top level
.when('/', {
template : '<home></home>',
})
// route for a new project
.when('/new', {
template : '<new></new>',
})
// route for the project overview page
.when('/view', {
template : '<overview></overview>',
})
// route for the manage page
.when('/manage', {
template : '<manage></manage>',
})
// route for the base perform page
.when('/perform', {
template : '<perform></perform>',
})
// default route
.otherwise('/');
});
I was able to resolve the issue by adding the code below
.run(['$route', function() {}]);
This was a known issue in the AngularJS documentation that I missed somehow.
https://code.angularjs.org/1.5.11/docs/api/ngRoute#known-issues
Learning Angular. Working with 1.6.6.
Trying to use ui.router, running into an issue with injecting components.
I've been using the following as resources to structure my project:
AngularJS: Understanding design pattern
https://github.com/angular-app/angular-app
Both these resources suggest using module as a container for the code underneath them. For example from my own project:
angular.
module('randomTownGenerator.module', [
'randomTown.service',
'randomTown.controller'
]);
Each of those dependancies is defined in its own file. When I specify the above module as the component for the the route:
var randomTownGenerator = {
name: 'randomTownGenerator',
url: '/random-town',
component: 'randomTownGenerator.module'
}
I get:
Error: [$injector:unpr] Unknown provider: randomTownGenerator.moduleDirectiveProvider <- randomTownGenerator.moduleDirective
How can I pass the randomTownGenerator.module, which is just a wrapper around the service, template, and controller, to ui.router?
You have provided a module where it is expecting an angular component.
component: 'randomTownGenerator.module'
Here angular-ui-router is expecting a angular component to generate as the view for the state 'randomTownGenerator'. Please refer the angularjs documentation on how to create a component.
https://code.angularjs.org/1.6.6/docs/guide/component
You are trying to mixup the angularjs earlier version of injecting a module and new way of injecting module.
You should provide a component as a view with the later version so that will be loaded when it is required.
var States = {
"app": {
path: "",
routing: null,
definition: {
name: "app",
url: "",
onEnter: function () {
console.info("App state entered.");
},
params: {
//
},
resolve: {
//
},
views: {
"app#": {
component: "appComponent"
}
},
abstract: true
}
}
};
where component should be a component not a module. Here is a complete example of how to create states with ui-router and angularjs 1.6 version
I am running UI Router with angular 4.x. Below code is not rendering anything and I did not get any error message too. But when I changed to $default as a view name, then I am getting the page.Please suggest me.
<app-root>
<ui-view name='main'></ui-view>
</app-root>
Below is the angular State Definition,
export const appState = {
name: 'app',
views : {
main : {
component: AppComponent
}
}
};
When Angular application bootstrap's, it wipes out the inner content of app-root(root) component. What ever you put inside root component will appear until Angular application bootstrap. Generally this place has been used to add Splash screen, loader to show initial loading.
To see your ui-view to replace via ui-router configuration, you should add ui-view inside app-root component HTML.
#Component({
selector: 'app-root',
template: `<ui-view name='main'></ui-view>`
})
export AppRootComponent {
}
Is there any way to load JS selectively depending on module?
I want to have Bootstrap.css included in templates that are in frontend and Angular Material for temaplates that are in backend of my app.
Currently if I import bootstrap.css in one component it's loaded globally which I don't want. This also means that backend.css and ngMaterial will also be loaded in frontend components...
So the way to conditionally load CSS I came up with is not very elegant but works.
I'm using Angular UI Router and when it comes to resolve route I append/remove link tag with CSS sheet using angular.element(). In my case it's abstract routes for backend and frontend, therefore it resolves (and appends/removes) link tag only once when browsing children routes.
// Frontend - add Bootstrap
$stateProvider
.state('front', {
url: "",
abstract: true,
templateUrl,
resolve: {
importBootstrapCss() {
let head = angular.element(document.querySelector('head'));
head.append("<link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' id='bootstrap-css'>");
}
}
});
// Backend - remove Bootstrap
$stateProvider
.state('backend', {
url: "/backend",
abstract: true,
templateUrl,
resolve: {
deleteBootstrapCss() {
let link = angular.element(document.getElementById('bootstrap-css'));
link.remove();
}
}
});
Hello fellow stackoverflowers,
I've been trying for some time now without success to implement
lazy loading of angular components with the new component router (ngComponentRouter).
This is the code I used for the configuration of the main component:
//define main app component
app.value("$routerRootComponent","simpleTrackerApp");
//main app component config
var lazyLoaderMod = null;
var httpService = null;
app.component("simpleTrackerApp", {
/*#ngInject*/
controller:function ($ocLazyLoad,$http) {
lazyLoaderMod = $ocLazyLoad;
httpService = $http;
},
templateUrl: CONFIG_APP_SHARED_URL + 'mainComponent/simpleTrackerApp.html',
$routeConfig: [
{
useAsDefault:true,
path:"/bugs",
name:"Bugs",
loader: function () {
return lazyLoaderMod.load(CONFIG_APP_COMPONENTS_URL + 'bug/bugs/bugsCtrl.js');
}
},
{path:'/**',redirectTo:['Bugs']}
]
});
My first problem was I could'nt get it to work with ocLazyLoad injected in loader propety so I loaded it in the main controller and referenced it in the loader property.
After that when I finally got it working inside loader propety
I couldn't seem to get it to actually load the component I kept getting this error:
lib.js:2 TypeError: Cannot read property 'then' of undefined
at e._loader (http://simpletracker.co.il/client/production/app/lib.js:9:10670)
at e.resolveComponentType (http://simpletracker.co.il/client/production/app/lib.js:9:21463)
at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:23535)
at http://simpletracker.co.il/client/production/app/lib.js:9:25949
at Array.forEach (native)
at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:9:25921)
at e._recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4834)
at e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:4605)
at t.e.recognize (http://simpletracker.co.il/client/production/app/lib.js:10:13656)
at http://simpletracker.co.il/client/production/app/lib.js:10:10757
Now I understand I'm obviously doing something wrong in the loader
and that I need to somehow register the component. but I couldn't find
any docs on angular for the loader and nobody else lazyloading components with the new router so I really couldn't figure how this could be achieved.
I'd really appreciate some help on this but I'm also wondering in general
if maybe it is premature to use angular component router
with its lack of documentation and support.
So I'd really like to hear from other expierenced angular programmers
their opinion on the matter.
Edit:Anyone have any insight on the matter?..
You could use $router instead of the http-service. Applied on your code:
app.component("simpleTrackerApp", {
templateUrl: 'mainComponent/simpleTrackerApp.html',
controller: ['$router', '$ocLazyLoad', function ($ocLazyLoad, $http) {
$router.config([
{
path: '/bugs/',
name: "Bugs",
loader: function () {
return $ocLazyLoad.load('/bugsFolder/bugs.component.js') //no url, set the path to your component
.then(function () {
return 'bugs' //name of your component
})
}
}
])
}],
});
And don't forget to inject your dependencies in the app.module.