I've created some routes using ember generate route {my_route_name} and it creates a js file under routes and a hbs file under templates
Now I want to define these routes like
App.Router.map(function() {
this.resource('posts');
this.resource('post', { path: '/post/:post_id' });
});
But where do I do that in ember-cli?
I've tried adding it in the app.js file right under this code
var App = Ember.Application.extend({
modulePrefix: 'front', // TODO: loaded via config
Resolver: Resolver
});
But that gives me an error: Uncaught TypeError: Cannot read property 'map' of undefined
So I am a little confused as to where to actually define all my routes?
They should be defined in the app/router.js file.
Since you used ember generate route it's likely that a route is already defined there for you, you'll just need to update it.
Related
I'm creating pluggable angular app.
I've found the following article:
Building an extensible Dynamic Pluggable Enterprise Application with Angular
Generally, everything works fine, but when I've tried to add angular router then I met some problems.
Currently, I'm not able to add the dynamically loaded component to the router.
I've tried something like this:
this.pluginLoader.load(pluginName).then(moduleFactory => {
const moduleRef = moduleFactory.create(this.injector);
const entryComponent = (moduleFactory.moduleType as any).entry;
const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
entryComponent
);
this.router.config.push({
path: `${pluginName}`,
component: entryComponent
});
this.router.resetConfig(this.router.config);
this.router.navigate([`/${pluginName}`]);
});
But this code cause following error:
core.js:15723 ERROR Error: Uncaught (in promise): Error: No component factory found for function(){this.x=!1}. Did you add it to #NgModule.entryComponents
I've tried also use loadChildren property instead of the component property but I don't know what path should I use.
How can I add the component to the component factory, or how can I find a proper path for such components?
I've found a solution, to add the dynamically loaded module to the angular router we have to use LoadChildren property, but directly from Route object. In this case, we have to create Route object first and then add it to the router config.
loadPlugin(pluginName: string) {
this.pluginLoader.load(pluginName).then(moduleFactory => {
const route: Route = {
path: `${pluginName}`,
loadChildren: () => moduleFactory
};
this.router.config.push(route);
});
}
I have a backbone view in 1 file which I am trying to instantiate in another, 'entry' file. An output file is bundled using Webpack and the entry file is loaded first in the output file, before the view code. Something like this:
index.js:
import $ from 'jquery';
import { Book } from './views/Book';
$(document).ready(function () {
new Book();
});
Book.js
import Backbone from 'backbone';
const Book = Backbone.View.extend({
tagName: 'li',
template: _.template('<%= name %>'),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
export default Book;
On running the project, I get this error in the console:
TypeError: __WEBPACK_IMPORTED_MODULE_1__views_Book__.Book is not a constructor
at HTMLDocument.<anonymous>
index.js:5 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1__views_Book__.Book is not a constructor
When running webpack, I get this warning:
WARNING in ./js/index.js
5:6-10 "export 'Book' was not found in './views/Book'
I saw some posts on circular dependencies, but don't think that is the problem here. Can someone help please? Thanks!
if you use
export default Book
then you need to load it this way
import Book from './views/Book';
export Book
would work with
import { Book } from './views/Book';
OK, the fix was altering the entry point in my webpack config file. I changed the entry point from:
entry: '/index.js'
to
entry: [SRC_DIR + '/views/main.js', SRC_DIR + '/index.js']
This ensured the dependencies(in main.js) were loaded first, followed by the index.js file. Hence in the bundled output file, the dependencies (in this case Book view) were implemented before initializing them. The problem was thus not in the code I posted, but in the configuration file of Webpack.
I'm trying to inject my config file into all of my routes, controllers, and components instead of calling import config from '../config/environment' in every file. I get the following error however:
Uncaught Error: Failed to create an instance of 'config:main'. Most likely an improperly defined class or an invalid module export.
Below is my code as its rendered via coffeescript.
// app/initializers/config.js
define('app/initializers/config', ['exports', 'app/config/environment'], function (exports, Config) {
'use strict';
var ConfigInitializer, initialize;
initialize = function (container, app) {
var config;
config = {
config: Config['default']
};
app.register('config:main', config);
app.inject('route', 'config', 'config:main');
app.inject('controller', 'config', 'config:main');
app.inject('component', 'config', 'config:main');
};
ConfigInitializer = {
name: 'config',
initialize: initialize
};
exports['default'] = ConfigInitializer;
exports.initialize = initialize;
What am I missing?
I've stepped through everything using breakpoints and my path to my environment.js file is correct. So I know its not that. I think I'm missing something fundamental about dependency injection.
Everything looks fine in your code, except one thing. By default Ember expects to register Factories but not instances. So once the property gets injected, it tries to get an instance from registered factory. But in your case it's not a factory, it's an instance (object) itself. So the only thing you have to do is to say Ember to use registered object as is, without trying to get an instance. To achive this, just add instantiate: false to register options:
app.register('config:main', config, {instantiate: false});
It is complaining that can't instantiante a new config object when initializing. Try changing your config object into a Ember.Service
import Ember from 'ember'
initialize = function(container, app) {
var config = Ember.Service.extend({
config: Config['default']
}
...
}
Where should the template files be placed for nested routes when using the pod structure in ember-cli?
Here is what I have at the moment.
Visiting /foo works
Expected and actual result: app/foo/template.hbs gets rendered.
Visiting /foo/bar does not work, I get "Error: Assertion Failed: The URL '/foo/aa' did not match any routes in your application"
Expected result: app/foo/bar/template.hbs gets rendered.
Actual result: "Error: Assertion Failed: The URL '/foo/bar' did not match any routes in your application"
Router:
Router.map(function() {
this.resource('foo', function() {
this.resource('foo.bar', function() {
});
));
/* ... */
});
Folder Structure:
/app/pods
/foo
controller.js
route.js
template.hbs
/bar
controller.js
route.js
template.hbs
Should I be defining my routes differently or naming my files differently?
In the documentation page, it says "app/templates/ Your Handlebars templates. These are compiled to templates.js. The templates are named the same as their filename, minus the extension (i.e. templates/foo/bar.hbs -> foo/bar)."
Actual result: "Error: Assertion Failed: The URL '/foo/aa' did not match any routes in your application"
It is searching for /foo/bar/bar.hbs , however your case is /foo/bar/template.hbs
Naming convention is the key role of ember.js.
Route
Router.map(function() {
this.resource('foo', function() {
this.resource('bar', function() { // 'bar' route nested in 'foo' route
});
});
});
Getting Started
I have a Router.map defined to my application. I'm working with EmberJS AppKit architecture. https://github.com/stefanpenner/ember-app-kit
I'd like to access to my page "profile" using the following path:
http://localhost:8000/#/profile
But, the name of my route differ to this path, because it's call user-profile, so I did this:
router.js
var Router = Ember.Router.extend();
Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
});
export default Router;
user-profile.js
export default Ember.Route.extend({
model: function () {
return this.store.find('user-profile');
}
});
When I launch my application, Ember is telling me that profile route doesn't exist, even though I defined the path:
Uncaught Error: Assertion Failed: Error: Assertion Failed: The URL '/profile' did not match any routes in your application
Do you know what's wrong with my code at this point?
Thanks
I dont use ember appkit but perhaps try with underscore, ie 'user_profile' and rename your file too. Just a shot in the dark.
I would have to guess it is the way that you are designing your router and the namespace.
Typically a barebones Ember app requires:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
App.Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
In your example your router is not in the App namespace, or whatever your root object is named (It doesn't have to be 'App'). I would give this a try or maybe post more code if there are other factors I do not see here.
Also, typically you would name your route userProfile. While i dont think the dasherized name is a problem, it doesn't follow Ember naming conventions.
Hope this helps.