I'm using Aurelia CLI (v1.2.0) with webpack (v4.41.0). Running the command au build --env prod works well and all necessary files are placed in a dist folder relative to the project's root as expected. However, a problem I'm seeing is the following in the generated .html file:
...
<body aurelia-app="main">
<script type="text/javascript" src="/runtime~app.66066bc9a3f8c86e3d5a.bundle.js"></script>
<script type="text/javascript" src="/vendor.bluebird~01be3b92.3dbcbc269195ad05c865.chunk.js"></script>
<script type="text/javascript" src="/vendor.setimmediate~a1c951f6.42ef81a6d814b4bc894f.chunk.js"></script>
<script type="text/javascript" src="/vendor.process~16c59945.ef28f3259f949d41518b.chunk.js"></script>
<script type="text/javascript" src="/vendor.moment~399b027d.9b9b0283b72b7237fb27.chunk.js"></script>
...
You see the src="/file_name_here" part in these script tags is not going to work as it's looking for files at the root of the main hard disk, not relative to the HTML file. If I add src="../file_name_here" then all works fine. Am I missing a webpack configuration somewhere?
Thanks for the assistance.
in your project, you have a webpack.config.js file.
there you should find the baseUrl property. change it to whatever suits you best.
for example: I want the bundle files to be in the same directory of the index.html file, regardless of their respective path on the server. (they will not always be in the root of my server).
so I just change the default '/' to '' (empty string.)
Related
When i want to put js file i get this error
GET http://localhost:3000/src/app.js net::ERR_ABORTED 404 (Not Found)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pug with Java</title>
</head>
<body>
<script src="src/app.js"></script>
</body>
</html>
Structure of the project
You need to build your app. If you open package.json you will see scripts to build the app.
Build it and include the js from build folder. If your index.html and js file is in same location you dont need to src/ in script src.
Most probably app.js will be changed to main.js after build. Check it in build folder.
Build command will be something like
npm run prod
or
npm run prod-en
Once you do a build you will not have the src folder.
In which file is your HTML? If it's in index.pug you should try <script src="app.js"></script> as it's in the same folder.
if you use express.js ,try this ,
add this code app.use(express.static(path.join(__dirname, ""))); into your app.js to identify the exacly path. to your file.js
What is a good strategy for concatenating and minifying modules?
I want to take this:
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/satellizer/satellizer.min.js"></script>
etc...
And make it this:
<script src="js/all_bower_components.js"></script>
I am running this build process for my other js files, which are concatenated and minified into main.js, but that's easy because my folder structure for my own JS files is relatively predictable. But my bower components is not:
bower_components/
angular/
angular.js
index.js
other random js files which aren't the ones I need
jquery/
dist/
jquery.js
src/
bunch of other crap
I am attempting it as such: Loop through all components and sub folders and simply search for .js files... but again, this could be including things I do not need like index.js in Angular:
gulp.task('modules', function() {
return gulp.src(['bower_components/**/*.js'])
.pipe(concat('modules.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
Any thoughts?
have you tried main-bower-files? this gulp plugin will capture all your base bower .js and .css by looking in your components' bower.json file for which files to grab (those listed as main). you can override the defaults within your call to the plugin for any requirements that don't match their bower.json config. i've found this very useful for bundling a vendor.js and vendor.css for a dependency-heavy app.
good luck!
I'm new in angular, bower, grunt, etc stuff so I completely stuck with current issue.
My project is built based on angular.
In my index.html path to js/css like this
<script src="/scripts/shared/flow-item.js"></script>
after compiling with grunt path to js/css in index.html
<script src="scripts/app.da1aee60.js">
so that if i deploy project in ROOT on tomcat everything works perfect
but if i deploy it in some folder like MyProject/ and call index.html we see application still looks for scripts by path http://localhost:8080/scripts/app.da1aee60.js instead http://localhost:8080/MyProject/scripts/app.da1aee60.js
Is it possible in some say project look for script in proper path?
You can set base path in html (inside head tag):
<base href="/scripts/MyProject/" />
I have error and am trying to solve it for hours.
My file structure:
-/node_modules
-/www
---bundle.js
---index.html
in index.html I have such code
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="bundle.js"></script>
Problem is bundle.js is included fine, but ng-cordova.min.js gives 404 error
Cannot GET /node_modules/ng-cordova/dist/ng-cordova.min.js
Edit: I also tried this without success
<script src="/node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
I don't use express or express.static.
Judging by your project structure I'm betting that it is powered by Express.js. I'm also betting that the www folder was set as a static folder in the express app like this:
app.use('/', express.static(path.join(__dirname, www)));
In which case your server will only serve files located in the www folder. You need to include any client dependencies in the www folder:
-/node_modules/
-/www/
--lib/
---ng-cordova/
--bundle.js
--index.html
And then load them like so:
<script src="lib/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
UPDATE
Simply put node_modules inside the www folder, it should work fine.
The problem here is that you try to load your ng-cordova.min.js file from the index.html folder.
You should change:
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
For this:
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
You are trying to load the file from the wrong directory.
You either have to use this path:
src="../node_modules/
or this:
src="/node_modules"
in case the above directory is your root directory.
What's also confusing is that the line you commented the error in is not the line the error actually comes from. Why are you trying to link to the file twice?
//Edit: As Romain was a minute faster than me he deserves the right answer reward I'd say :P Only if it actually solves your problem ofc :D
I am trying to load different JS file in Angular for different environment because the prefix for my js file is different and I can't save them in my local.
in dev
js file path is http://myproject-dev.com/product.js
so my html will be like
<script src="http://myproject-dev.com/product.js"></script>
prod
js file path is http://myproject.com/product.js
my html is like
<script src="http://myproject.com/product.js"></script>
I need to load them based on the environment, I have a variable set in JS to detect the environment but I don't know how to load them in html or in run time in Angular. Any tips will be appreciated. Thanks!
Use a relative URL.
Same position: <script src="product.js"></script>.
With a subfolder from current position: <script src="scripts/product.js"></script>
With a subfolder from root: <script src="/scripts/product.js"></script>
You can simply use relative paths to reference your files rather than using the full URL.
if you directory structure looks like this:
js
product.js
index.html
then inside of index.html you can reference product.js like this:
<script src="js/product.js"></script>