I am trying to set a templateUrl on a route in AngularJS using an html file in a child directory of assets. It works fine locally.
The templates are stored at: #{RAILS_ROOT}/app/assets/templates
# Sets up routing
Blog.config(['$routeProvider', ($routeProvider) ->
# Route for '/post'
$routeProvider.when('/post', { templateUrl: './assets/mainIndex.html', controller: 'PostCtrl' } )
# Default
$routeProvider.otherwise({ templateUrl: './assets/mainIndex.html', controller: 'IndexCtrl' } )])
I've tried leveraging asset_path, but that doesn't seem to work at all.
try to remove the ./ before the assets
$routeProvider.when('/post', { templateUrl: 'assets/mainIndex.html', controller: 'PostCtrl' } )
We must both be working on the same AngularJS/Rails tutorial. I am stuck on the same part.
asset_path does work. Make sure your javascript.coffee file ends in .erb
My templates are at:
app/assets/templates
In my main.js.coffee.erb (DONT FORGET the .erb), I have the templateUrl defined as:
templateUrl: '<%= asset_path('mainIndex.html')%>'
This works locally. Unfortunately, it still isn't working in production (I'm using OpenShift.) The precompiled files are being generated at (public/assets.) However, the asset_path always resolves to
GET /assets/mainIndex.html
rather than something like:
GET assets/mainIndex-435fd76973a72d658af47da0fb824bcd.html
In the logs, I see all of the assets GETs referencing the precompiled files, but for some reason, this templateUrl isnt. That's my next problem to solve.
Related
There are few assets generated via webpack. The assets themself are pretty regular, application.js, application.css, images and so on. The point is that at runtime that assets should be hosted inside a specific server-side assembly and because of this, all the urls should be changed in this manner:
dist/application.js ==> ?path=content.application.js
dist/application.css ==> ?path=content.application.css
...and so on for every style/script/image in the output bundle.
I tried the publicPath option of output section, but it looks like this functionality is not so powerful. So if I do this:
output: {
// ...
publicPath: "?path=content."
},
When the result for root html is like this:
<script type="text/javascript" src="?path=content./application.js">/script>
<link href="?path=content./application.css" rel="stylesheet"></head>
Which is not correct as it has additional / that I cannot get rid of.
It would be great if publicPath was a function that returns dynamic path for every resource:
output: {
// ...
publicPath: function(originalFile){
return /* generate publicPath dynamically */
}
},
...but it's not the case with webpack2. So is there any method to globally replace public urls for all the resources? Or maybe some loader that does this.
I've a project running with Angular 2 and webpack 2 but currently I load all my templates directly into the js file with no addional template loading from the server. That works great.
#Component({
selector: 'logmonitor',
styleUrls: [ './logmonitor.component.less' ],
templateUrl: './logmonitor.component.html'
}) ...
but I need to load only some Templates from a cshtml view and the views should only get loaded with an extra server request when I open these views.
I've created a simple cshtml view in my views folder an I can directly "show" it when typing the right controller/action into the url. That "works"
but I've tried to set this to get the Template loaded
#Component({
selector: 'testView',
templateUrl: 'Logviewer/TestLogview',
}) ...
but webpack will not compile the view it gives a error
Module not found: Error: Can't resolve './Logviewer/TestLogview' in 'C:\SourceControl\WebLogViewer\App\Views\LogViewer'
thats right the file is daved in
C:\SourceControl\WebLogViewer\Views\LogViewer
but I don't want that webpack tries to resolve this url, angular itself need to call this url when the view gets loaded. I've thought webpack will not try to load the cshtml file when I don't write the "./" in front of the file name, but thats not working. Is there a solution how I can prevent webpack from parsing all templateUrl ?
thats my current Loader for html files, but this should not parse the string because there is not .html at the end :-/
{
test: /\.html$/,
use: ['raw-loader'],
exclude: [helpers.root('App/index.html')]
},
You can find a working example in this repo.
https://github.com/timdows/webpages/tree/master/Angular2RazorViews
The key is lazy loading and
angular2-load-children-loader
in loading the ts template dependencies
So I'm writing a small app and currently working on the angular js front end. The backend is written in RoR but thats besides the point. I have a dependency ui.router in my angular.module so I can move around pages.
Link to github branch if interested: linky link
Paths:
App
-Assets
-Javascripts
-app.js (where the routing lies)
-Templates
-dashboard.html (this is the template I want to render)
-Views
-Layouts
-Index.html.erb <- this is the index
Heres the problem:
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html', <<--- RIGHT HERE
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
No matter what path I put into templateUrl, it never works. I have the same html file in basically every folder around app.js to see if it could read any of those but it always fails and just recursively inserts the parent div into the . Do any front end engineers know why?
The issue was the way the files were being served via rails. The sprockets gem was updated and no longer compatible with angular-ui-templates and broke everything. Downgraded to sprockets v. 2.x and it worked.
Its going to be relative to index.html. If index.html is under App then your path is going to be templateUrl: 'Templates/dashboard.html'.
I have a rails application, using angularjs for the client side development. I try to load a template located in `app/assets/javascripts/templates/':
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'MainController'
}).
otherwise({
redirectTo: '/'
});
}]);
but I always get a error: "Error: [$compile:tpload] Failed to load template: /index.html".
I tried to move the "templates" folder out of the javascripts - app/assets/templates and to add it to my assets pipeline load by adding the following line to config/application.rb: config.assets.paths << Rails.root.join("app","assets","templates")
I keep getting the same error message until I use the full path to the template: templateUrl: '/assets/index.html',.
Why the first method is not enough? the angular-rails-templates gem shouldn't look for templates in app/assets/javascripts/templates?
Why should I use the full path to an assets inside my javascript?
My problem has been a sprockets incompatibility. Version 2.1.3 works though so I put this in my Gemfile:
gem 'sprockets', '2.12.3'
And I ran bundle update sprockets and it's all peachy.
Practice has shown that you should keep Angular templates in ./public folder. For example make a folder called templates in the public folder. Now you can just call them like this: templateUrl: 'templates/index.html'
This makes sense as the app/assets/ is indeed only used for javascript and css files. Also you have the html files in app/views, but these are compiled by server because they use .erb extension. What you want is to have regular html files ready to be used any time. So you put them to public folder.
try this, I hope this will worked.
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'MainController'
}).
otherwise({
redirectTo: '/'
});
});
I solved this issue by adding "gem 'sprockets'" into the Gemfile
I currently have this directory layout:
project
web
app.html
main.dart
templates
app.html
alerts.html
menu.html
components
AppComponent.dart
AlertsComponent.dart
MenuComponent.dart
resources
css
bootstrap.css
My components look like:
#Component(
selector: 'app',
templateUrl: 'templates/app.html'
)
class AppComponent { ... }
My application's index.html (in another project) is served from /client, and project/web is served from /project. The above works in Dartium, but I get errors from pub build:
[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
#Component(
^^^^^^^^^^^
and
[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.
and
[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.
depending on what combination of paths I use in templateUrl and html_files (for Angular's transformer).
What, exactly, should go where and how should it be referenced in templateUrl and pubspec.yaml?
Update: I can get rid of my build errors by moving my templates to the lib directory and using templateUrl: 'packages/project/templates/app.html', but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.
but then Dartium tries to load that as
/packages/project/templates/app.html, and not
/project/packages/project/templates/app.html, which would be correct.
I don't see any way to tell it what the base URL is.
I believe you are using angulardart 1.1.1 or 1.1.2? We had the same issue in our project after switching from 1.1.0 to 1.1.2. This is weird behaviour that was added since version 1.1.1.
For some reason default package root in AngularDart now is '/packages/'. This causes generation of root-relative URLs. In your case it generates
/packages/project/templates/app.html
instead of
packages/project/templates/app.html
It's OK while you app is in the root of your domain. But in your case what you need to do is to add following to your initialization method in main.dart:
bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
.resolveRelativeUrls(true, packageRoot: 'packages/'));
This will override angular's default packages root and will make it generate correct relative URLs.
Hope it helps.