I've tried setting up the webpack loader by adding this to the webpack/loaders directory
var path = require('path');
module.exports = {
test: /\.html$/,
loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"] //html?attrs[]=div:ng-include
}
and then requiring the appropriate template file from the .js code.
templateUrl: require('ngtemplate!html!./app/views/environment/index.html')
but I get the following error
Module not found: Error: Can't resolve 'html' in '/Users/joe/testrails5.1/app/javascript/app/scripts'
resolve 'html' in '/Users/joe/testrails5.1/app/javascript/app/scripts'
Parsed request is a module
Does this work for anyone else? I'm using angular 1.6 so do I need to use a different module?
Related
I have been configuring rollup for creating custom react component library on top of fomantic-ui.
I have already setup the rollup.config.js
ALthough in the configuration, I need to resolve an import:
#import (multiple) '../../theme.config';
the import is part of fomantic-ui-less library, which needs to be resovled to:
path.join(__dirname, '/themes/theme.config')
and I do have themes/theme.config at my project root.
when I run build command it throws following error:
[!] (plugin postcss) Error: '../../theme.config' wasn't found. Tried - E:\Projects\UILibrary\node_modules\fomantic-ui-less\theme.config,..\..\theme.config
and I have used the rollup-plugin-postcss plugin and #rollup/plugin-alias, and called it inside plugins array
...
plugins: [
...
alias({
entries: [
find: '../../theme.config$',
replacement: path.join(__dirname, '/themes/theme.config')
]
})
postcss(),
...
]
I have also tried changing the order of plugins.
And the worst part is, it is working when configuring the storybook, using webpack alias.
.storybook/main.js
webpackFinal: async (config) => {
config.resolve.alias = {
"../../theme.config$": path.join(__dirname, "../themes/theme.config")
}
...
}
I am new with Svelte and trying to import some package.
After the npm install, I import it directly into my svelte file:
import jspdf from "jspdf"
that got me the error:
Error: UMD and IIFE output formats are not supported for
code-splitting builds.
then I tried to use CDN and import via HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
and the svelte give me undefined error from:
var doc = new jsPDF();
I googled and some some comments and it seems like the first solution should already be working. How can I resolve this?
Add inlineDynamicImports: true in rollul.config.js at the export, like this:
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
inlineDynamicImports: true
},
I'm trying to follow these instructions to add cesium to my rails project with Webpack, but I can't figure out how to translate the instructions to work with the rails implementation of Webpack.
For example:
In webpack.config.js, we add the following above our configuration object:
// The path to the Cesium source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
I assume in a rails project we would do our file imports in app/javascript/packs/application.js like this:
import 'cesium/Source';
import 'cesium/Build/Cesium/Workers';
but that gives the error:
Failed to compile.
./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'cesium/Build/Cesium/Workers' in '/Users/user/Developer/appName/app/javascript/packs'
# ./app/javascript/packs/application.js 15:0-37
# multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js
I've double checked, and the path is correct.
The Cesium instructions also indicate that I need to add some configuration options, but I can't figure out where I would put those since the rails webpacker gem doesn't have a webpack.config.js file. Do I just add config to the same file as the imports?
You would rather add a new config file which resolve your libs custom paths.
You can get inspiration from Webpacker documentation here:
https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration
You could do this :
//config/webpack/cesium.js
module.exports = {
resolve: {
alias: {
cesiumSource: 'cesium/Source',
cesiumWorkers: 'cesium/Build/Cesium/Workers'
}
}
}
Then merge the config options either in environment.js (global) or in development|test|production.js if this is specific to a particular environment
// config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const cesiumConfig = require('./cesium')
environment.config.merge(cesiumConfig)
Hope this help.
Regards
I am trying to compile my Rails app assets using RAILS_ENV=production bundle exec rake assets:precompile, but this doesn't compile my AngularJS assets, so my console report this:
ActionController::RoutingError (No route matches [GET] "/assets/app/views/products/index.html"):
My AngularJS assets are under "/assets/app/", so I tried to compile the angular folders by adding following into my production.rb but still not working.
config.assets.precompile += %w(app/* bootstrap/* datatable/* ....
I can find the compiled index file under this path:
public/assets/app/views/products/index-2429bd0f8fc0762dcc075e51f0306c5b.html
Any idea?
UPDATE
Also tried config.serve_static_assets = false in production, but it cause more missing assets errors
Thanks
I've worked through this in my app by using constants to get the path structure right.
my angular app is journey (yours would obviously be different)
so I declare the angular app as a module
this.journey = angular.module('journey', [
'ngResource',
'ngRoute'
]);
Then I have a file called constants.js.erb where I declare my templates
journey.constant('INDEX_TEMPLATE', '<%= asset_path('journeys/journey_index.html')%>');
journey.constant('EDIT_JOURNEY_TEMPLATE', '<%= asset_path('journeys/journey_edit.html') %>');
Finally in my services I use the constants declared as the template url
journey.config([
'$routeProvider',
'$locationProvider',
'INDEX_TEMPLATE',
'EDIT_JOURNEY_TEMPLATE',
function ($routeProvider, $locationProvider, INDEX_TEMPLATE, EDIT_JOURNEY_TEMPLATE) {
$locationProvider.html5Mode(false);
return $routeProvider.when('/', {
templateUrl: INDEX_TEMPLATE,
controller: 'JourneyIndexController'
})
}
])
This way I don't have to worry about where the files are or how rails is organising the routing.
Hope this helps
I'm having a problem with relative paths in requirejs.
First of all, I have the following structure. I'm running it with a virtual host (os.com) and the path is os.com/test
index.html
<script data-main="config" src="require.js"></script>
config.js
require.config({
baseUrl: "./apps",
deps: ['ui'],
paths: {
ui: 'ui/ui',
system: 'system/system',
core: 'core/core'
}
});
ui.js
define(['./class/menuBuilder',"./class/window"], function(menuBuilder, windowBuilder){
return {
menuBuilder: menuBuilder,
windowBuilder: windowBuilder
}
});
When I run it, I get the following errors.
GET http://os.com/test/apps/class/menuBuilder.js 404 (Not Found)
GET http://os.com/test/apps/class/window.js 404 (Not Found)
If I take out 'ui' property from the 'paths' property then change deps to ['ui/ui'], it works, but I would like to use paths.
Changed config.js
require.config({
baseUrl: "./apps",
deps: ['ui/ui'],
paths: {
system: 'system/system',
core: 'core/core'
}
});
How do I change my config to make paths and relative path work together?
I had similar problem. I didn't have deps:'ui' part in my configuration, just the path setting, but still the relative module reference ('./class/menuBuilder') would not work from the module loaded with path ("ui: 'ui/ui'") and would use baseUrl instead. To solve it, I defined 'ui' as a package:
require.config({
baseUrl: "./apps",
deps: ['ui'],
paths: {
system: 'system/system',
core: 'core/core'
},
packages : [
{
name: 'ui',
location : 'ui',
main : 'ui'
},
]
});
In this case require will load relatively-pathed modules correctly.
Here is a useful post: Relative paths with RequireJS modules/packages
The solution here is to use map configuration, not paths configuration. Paths configurations should only be used for folders, not modules themselves. Map configurations apply to individual modules.
So try:
require.config({
map: {
'*': {
'ui': 'ui/ui'
}
}
});