I'm testing with the developer preview of Angular Version 2 and serving it up using pub serve
I would like to estalblish a convention to structure my files inside /lib/ as follows:
└── project/lib/root
├── root.css
├── root.dart
└── root.html
└── project/web/
├── index.html
└── index.dart
In my /web/index.dart file i am successfully able to initialize the #View and #Component from root.dart
However, when i preview in Dartium via pub serve - i can't seem to serve up /lib/root/root.html
#Component(
selector: 'jroot'
)
#View(
templateUrl: '../../lib/root/root.html',
directives: const [If]
)
class Root {
String content = 'Root - This is the entry point to the component';
List<Times> list;
Root(){
print('RootComponent Init');
}
}
Dartium Console:
GET http://localhost:8080/lib/root/root.html 404 (Not Found)
I've been reading the documents for polymer here which states:
"Non-Dart files under lib must use relative paths to import assets under lib:"
https://www.dartlang.org/polymer/app-directories.html
<!-- lib/a5/a6/a6.html imports lib/a4.html -->
<link rel="import" href="../../a4.html">
Running a python simple web server seems to work, so the problems is with pub serve:
python -m SimpleHTTPServer
Question: How do a configure pub serve to work with nested html files from the lib folder?
Ensure you have the proper entry points on your pubspec.yaml transformers:
name: 'project'
version: 0.0.1
dependencies:
angular2: '2.0.0-alpha.23'
browser: any
transformers:
- angular2:
entry_points:
- web/index.dart //this
reflection_entry_points:
- web/index.dart //this
Then I think this should work
templateUrl: 'packages/project/root/root.html',
or just
templateUrl: 'root.html',
Related
I'm developing a legacy ASP.NET MVC 5 project which still uses ASP.NET Bundling and Minification. I'm interested in switching to Gulp or Grunt, because I need to save source maps for my js files.
It seems easy to generate a minified script bundle with Gulp or Grunt, but what I do not understand yet is the recommended setup for loading single js files when debugging and minified bundles in production. I guess it would be quite easy to generate a razor view for including the scripts as part of my Grunt / Gulp compilation process, but it feels like re-inventing the wheel.
For instance, in ASP.NET MVC i can write something like this:
#Scripts.Render("~/bundles/MyJSBundle")
and it will automatically load separate js files in development and a single script bundle in production. What is the easiest way achieve this with Gulp or Grunt?
Short answer:
Typically when using Grunt you generate two builds - one for "dev" (development) and another for "dist" (distribution/production). Whereby for the scenario you've described;
Both the "dev" and "dist" builds generate a single concatenated/minified file version (e.g. bundle.min.js) derived from multiple source .js files.
However, only the "dev" build generates an additional Source Map file(s), that holds information about your original .js files, for the purpose of debugging during the development lifecycle.
Grunt plugins, such as grunt-processhtml, provide a way to update any links to .js assets in the .html file. For example, let's say your source .html contains these two links;
<script src="js/a.js"/>
<script src="js/b.js"/>
They can be substituted during the "dist" and/or "dev" build step to the following single <script> element:
<script src="dir/bundle.min.js"/>
Example demo:
The following somewhat contrived example demonstrates how you may approach your requirement using Grunt.
Let's say our initial project directory is structured as follows:
project
├── Gruntfile.js
├── node_modules
│ └── ...
├── package.json
└── src
├── index.html
└── js
├── a.js
└── b.js
Note, in the src directory we have a single index.html file, and two .js files in the js directory.
In the contents of index.html shown below it contains two <script> elements, each one referencing a .js file.
project/src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
</head>
<body>
<!--build:js js/bundle.min.js-->
<script src="js/a.js"></script>
<script src="js/b.js"></script>
<!--/build-->
</body>
</html>
Note, the custom HTML comments encasing both <script> elements. These custom HTML comments are utilized by grunt-processhtml. The part that reads; js/bundle.min.js in the comment essentially defines the new pathname to be used.
Let's consider the following Gruntfile.js configuration:
Gruntfile.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-processhtml');
grunt.initConfig({
// 1. Concatenate .js files.
concat: {
dist: {
src: [
'src/js/a.js',
'src/js/b.js'
],
dest: './dist/js/bundle.min.js'
},
dev: {
options: {
sourceMap: true
},
src: [
'src/js/a.js',
'src/js/b.js'
],
dest: './dev/js/bundle.min.js'
}
},
// 2. Minify .js files.
uglify: {
dist: {
files: {
'./dist/js/bundle.min.js': './dist/js/bundle.min.js' // dest : src
}
},
dev: {
options: {
mangle: false,
sourceMap: true,
sourceMapIn: './dev/js/bundle.min.js.map'
},
files: {
'./dev/js/bundle.min.js': './dev/js/bundle.min.js' // dest : src
}
}
},
// 2. Process .html file.
processhtml: {
dist: {
files: {
'./dist/index.html': './src/index.html' // dest : src
}
},
dev: {
files: {
'./dev/index.html': './src/index.html' // dest : src
}
}
}
});
grunt.registerTask('default', ['dist', 'dev']);
grunt.registerTask('dist', [
'concat:dist',
'uglify:dist',
'processhtml:dist'
]);
grunt.registerTask('dev', [
'concat:dev',
'uglify:dev',
'processhtml:dev'
]);
};
Explanation of Gruntfile.js:
In addition to the previously mentioned grunt-processhtml plugin the following two are also utilized in this example:
grunt-contrib-concat - for concatenating the two .js files.
grunt-contrib-uglify - for minifying the .js file.
Note: There are other plugins available for these types of task. I have chosen these additional two plugins for the purpose of this demonstration.
Each of the three Tasks (concat, uglify, and processhtml) contain two separate Targets named dist and dev. The main differences in each Target are:
Different dest (destination) paths for the resultant generated .jsfile(s).
For the concat:dev and uglify:dev Targets its options object defines the configuration for the resultant Source Map file.
At the end of Gruntfile.js three different grunt.registerTask() have been defined. Each one defines a taskList that essentially defines which Task and Target to run in the order specified.
For example consider the following registered task named dist:
grunt.registerTask('dist', [
'concat:dist',
'uglify:dist',
'processhtml:dist'
]);
When running grunt dist via the command line Grunt essentially invokes this Task, which subsequently performs the following in this order:
Firstly, runs the dist Target defined in the concat Task.
Then runs the dist Target defined in the uglify Task.
Finally, runs the dist Target defined in the processhtml Task.
Running Gruntfile.js (above) and its output
Running the following command via the command line:
grunt dev
outputs the following additional assets to the project directory:
project
├── ...
├── dev
│ ├── index.html
│ └── js
│ ├── bundle.min.js
│ └── bundle.min.js.map
└── ...
As you can see it has:
Created a new dev folder in the root of the project directory.
The two <script> elements originally defined in project/src/index.html have been substituted in the newly generated project/dev/index.html with a single <script> tag as follows:
<script src="js/bundle.min.js"></script>
Both files; project/src/js/a.js and project/src/js/b.js, have been concatenated and minified in the resultant project/dev/js/bundle.min.js.
The following source map file has been generated; project/dev/js/bundle.min.js.map. This file essentially maps back to the original project/src/js/a.js and project/src/js/b.js files.
Running the following command via the command line:
grunt dist
outputs the following additional assets to the project directory:
project
├── ...
├── dist
│ ├── index.html
│ └── js
│ └── bundle.min.js
└── ...
As you can see this time it has;
Created a dist folder in the root of the project directory.
Again, the two <script> elements originally defined in project/src/index.html have been substituted in the newly generated project/dist/index.html with a single <script> tag (as per the aforementioned dev Task).
Again, both files; project/src/js/a.js and project/src/js/b.js, have been concatenated and minified in the resultant project/dist/js/bundle.min.js.
However, the main notable difference is that NO source map file has been created.
Running the following command via the command line:
grunt
will produce both the outputs defined in the previous steps 1 and 2.
I want to build a project written in electron.js with Electron-builder when index.html file in the parent directory, a simple app with structure like below:
project
├── css
│ ├── style.css
│ └── img.png
├── electron
│ ├── main.js
│ └── package.json
│── index.html
│── index.js
└── icon.png
use win.loadFile('./../index.html'); in the main.js file, everythings works fine when use electron . command in the electron folder, but after run electron-builder, when run the app with the executable file nothing works and the index.html file doesn't appear.
I was trying to use files config in the package.json file but no success:
"build": {
"appId": "x.y.z",
"productName": "projectName",
"files": ["**/*", "build/icon.*", "../**/*"]
},
I don't know what to do ?!
I've found this issue https://github.com/electron-userland/electron-builder/issues/2693 but can't undestand it and don't know what should I do?
I can't answer in the general case, but here's the solution when using vue-electron-builder and TypeScript. This will let you organize your files in any arbitrary hierarchy.
Create a file vue.config.js in your project root (this more or less corresponds to the overrides you'd need for an electron project with webpack):
module.exports = {
pluginOptions: {
electronBuilder: {
// my 'main' process is in src/main.ts:
mainProcessFile: 'src/main/main.ts',
// my 'main.ts' should get recompiled if any of these change:
mainProcessWatch: [
'src/main/extra_file_1.ts',
'src/main/extra_file_2.ts',
]
}
},
pages: {
// I only have one renderer process (otherwise I'd need another entry in 'pages')
"renderer": {
// 'main' for the renderer process
entry: "src/renderer/main.ts",
// this is the part you care about: you can put the template anywhere
template: "src/viewer/index.html",
// this makes sure your renderer page has all the ts-to-js chunks it needs
chunks: ["chunk-vendors", "chunk-common", "renderer"]
}
}
};
Note that if you want your index.html to <link> to a static css file, you should put the static file in the public folder of your project root. Then you can link to it like this:
<link rel="stylesheet" href="<%= BASE_URL %>my_css_file.css">
I am using Angular 4.1.3 with Rails 5.1
I am trying to implement the app component and if I use template and write my html, everything works, but I want to use templateUrl.
Here is my component.
import { Component } from '#angular/core';
#Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {}
And this is my file structure
├── app
| ├── app.component.html
| └── app.component.ts
| └── app.module.ts
I understand that in the #Component you can add moduleId: module.id but I thought this is no longer needed in angular 4.1.3.
If I do add it, it tells me:
moduleId should be a string in "AppComponent"
I also thought that if you do not include the moduleId angular just grabs from root directory, but if I do an absolute path, it should work right?
If you guys could help, that would be awesome.
I am assuming you're using the new webpacker-gem in your rails project!
There is a description of how to use templateUrl with it here in the documentation: Use HTML templates with Typescript and Angular
If you would like to keep templateUrl you could use angular2-template-loader webpack plugin:
# add plugins to project
yarn add angular2-template-loader raw-loader
and configure it:
# edit config/webpack/loaders/angular.js with
module.exports = {
test: /.ts$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
}
# create a new loader for htmls config/webpack/loaders/html.js
module.exports = {
test: /\.(html)$/,
loader: 'raw-loader',
exclude: /\.async\.(html)$/
}
I have an angular dart component I created that I am trying to use in my main project. I am using path packages to reference it. The component's constructor (in the dart file) is being called, but I get errors that the .css and .html file cannot be found. The paths it is looking for them in seem to exist, so I'm not sure why it cannot find them.
I have other custom components I am using throughout my code, but there is no html or css files associated with them and they were fine, it seems to be limited to the html and css files.
Here are snippets of my code
test.dart located in test_component/lib/test_component/
library TestCom;
import 'package:angular/angular.dart';
#Component(
selector: 'tester',
templateUrl: 'test.html',
cssUrl: 'test.css')
class TestComponent {
String t = "this is the test component";
TestComponent() {
print("Test Component STARTED");
}
}
test.html located in test_component/lib/test_component/
<h3>{{t}}</h3>
pubspec.yaml located in test_component
name: TestModule
dependencies:
angular: "^1.1.2+2"
browser: any
transformers:
- angular:
html_files:
- lib/test_component/test.html
main.dart located in main/src/main/dart/web
import 'package:TestModule/test_component/test.dart';
class MyAppModule extends Module {
MyAppModule() {
bind(TestComponent);
}
}
index.html located in main/src/main/dart/web/
<tester></tester>
pubspec.yaml located in main/src/main/dart
name: main_package
dependencies:
angular: "^1.1.2+2"
browser: any
shadow_dom: any
json_object: any
bootjack: any
crypto: any
xml: "^2.3.2"
TestModule:
path: ../../../../test_component
transformers:
- angular:
After I run pub get, in the packages folder of my main project, TestModule/test_component/ exists with test.css, test.dart, and test.html in it. I'm not sure why when I run it, it can not find the .html and .css files.
This is what is displayed in the console when I run it
Observatory listening at http://127.0.0.1:54254/
Test Component STARTED
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.css 404 (Not Found)
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.html 404 (Not Found)
2 HTTP 404: <html><head><title>404 Not Found</title></head><body>File not found</body></html>
STACKTRACE:
null
Try this
name: TestModule
dependencies:
angular: "^1.1.2+2"
browser: any
transformers:
- angular:
html_files:
- packages/TestModule/test_component/test.html
For the css file however, I think you only need to put them into the same folder as the component's Dart file.
When working on my project in AngularDart, I created a component called LoginComponent:
// lib/component/login.dart
#Component(
selector: 'login',
templateUrl: 'login.html')
class LoginComponent {
String username;
String password;
}
In the same folder where I created the login.dart script, I also put it's template code:
<!-- /lib/component/login.html -->
<form ng-submit="login()">
<input type="text" placeholder="Username" ng-model="username" />
<input type="password" placeholder="Password" ng-model="password" />
<input type="submit" value="Submit" />
</form>
The project's structure looks as follows:
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── lib
│ ├── annotations.dart
│ └── component
│ ├── login.dart
│ └── login.html
├── pubspec.lock
├── pubspec.yaml
└── web
├── index.html
└── main.dart
I also added the html template to the angular transformer:
name: 'duseapp'
version: 0.0.1
description:
An absolute bare-bones web app.
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
browser: any
web_components: ">=0.10.1 <0.11.0"
angular: ">=1.1.0 <2.0.0"
restpoint:
git: git://github.com/Adracus/restpoint.git
duse:
git: git://github.com/duse-io/duse-dart.git
transformers:
- angular:
html_files:
- lib/component/login.html
But now, I'm receiving the error:
Target of URI does not exist: 'login.html'
Does anybody know what's the cause of this?
For further insight, the github url of the project is here.
Thanks for your help.
After digging around for a day, I found an interesting post on Google Groups, which solved my problem (except for a little mistake, it is 'packages' instead of 'package'). According to the post, one should specify the templateUrl as follows:
templateUrl: 'packages/<package-name>/<any-lib-subdirectory>/<filename>'
That solved my problem.