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'.
Related
Question
What do I need to do to get my Angular application to allow me to use the templateUrl property of the Component decorator? When you create a new Rails 5.1 application and use the flag --webpack=angular, it gives you a proof of concept Angular application, but as soon as I started creating more components, I began to recognize that I don't know how to refer to the correct path that the templates are being served. I'm not even sure if they are being served, to be honest.
What I've tried
Tried many different variations of the path, from just the file name all the way to the root of the application, one folder at a time.
Googling for someone else running into the same problem.
include the CommonModule in my imports in app.module.ts.
Background
I'm really used to using the Angular CLI and I don't remember ever having an issue using the templateUrl property. What is different about an Angular CLI project to what's given to you in a Rails 5.1 app in terms of configuration affecting templates? Would I be able to use Angular CLI in a Rails 5.1 app without having to change much of the Rails app itself?
Can be done. But this needs a different webpack loader setup and several minor tweaks.
But first: shopping!
$ yarn add \
html-loader \
awesome-typescript-loader \
angular2-template-loader \
#types/node \
--dev
With all required packages installed replace config/webpack/loaders/angular.js with this:
const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { useCache: !isProd }
},
'angular2-template-loader'
]
};
angular2-template-loader scans your Component decorators for the templateUrl argument and replaces it with something like template: require('...')'. The require() call is the reason for installing #types/node by the way.
awesome-typescript-loader is a bit more optimized than the default ts-loader (which will probably work here as well, but I didn't test it).
So far so good. Next we need to tell webpack how to actually load HTML files. Add config/webpack/loaders/html.js with the following content:
module.exports = {
test: /\.html$/,
loader: 'html-loader',
};
Nothing obscure here. Moving on.
In your Javascript app add type informations for *.html files to app/javascript/hello_angular/html.d.ts:
declare module "*.html" {
const content: string
export default content
}
This tells the TypeScript compiler that require('template.html') returns a string.
Last but not least you have add .html to the recognized extensions in config/webpacker.yml:
default: &default
# ...
extensions:
# ...
- .html
# ...
Now you should be good to go:
import { Component } from '#angular/core';
#Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
Don't forget to restart bin/webpack-dev-server.
Theoretically you could do the same for styleUrls. But this is more tangled with rails/webpacker and you would loose some of it's features.
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
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.
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.