I am attempting to add the aurelia-validation plugin to my app. In my aurelia.json file, I have added the module to the dependencies node.
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
"node_modules/requirejs/require.js"
],
"dependencies": [
... Trimmed other packages...
{
"name": "aurelia-validation",
"main": "aurelia-validation",
"path": "../node_modules/aurelia-validation/dist/amd",
"resources": []
}
]
When I look at the index.html file in the browser, I see a script tag in the <head> pointing to aurelia-validation in the node_modules folder.
Which is causing a run time error because that path does not exist in my web root.
Why is the CLI referencing this module like this? Why would it not bundle it like the rest of my files?
Most of the time you can achieve installing/adding reference in aurelia.json using au import/install. See it here.
Related
I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
I am using nx to manage my work environment with #nrwl/express plugin. I want to serve static file from the express server but with no success.
I tried the following.
express.static(path.join(__dirname, 'videos'));
but I am not able to get the files inside the videos directory, I always get 404.
I tried both this URLs
http://localhost:3333/api/output.m3u8
http://localhost:3333/output.m3u8
the videos directory is located in the root of my app.
Any idea how can I solve this?
Not sure if you ever solved this but I've just ran into the same problem myself.
When you serve your Express App with Nx it will be transpiled and served from the dist folder. Therefore __dirname will actually resolve to your monoreporoot/dist folder (i.e. the root of your project /dist).
If like me you were trying to serve content from a static folder inside your src directory or similar, you will need to ensure that it's transferred across to your dist folder when serving your Express app.
For me, it wasn't a problem as I was just using it as a temporary upload folder for dev so I manually created the folder inside of dist. If it's linked to your app then you might need to add a specific mkdir or cp command to your build to make sure the files/folder is present.
The process of using from the dist folder, so it is necessary that the source folder be copied.
Add a line to project.json
{
"targets": {
"build": {
"executor": "#nrwl/node:webpack",
"outputs": ["{options.outputPath}"],
"options": {
...
"assets": ["packages/<your-app>/src/public"] <-- need add this line
},
"configurations": {
...
}
}
}
Add this in your main.ts
app.use('/static', express.static(__dirname + '/public'));
The file in packages/[your-app]/src/public/some-file.txt will be available at
http://localhost:3333/static/some-file.txt
When I building my angular 5 project using
ng build --prod
It gives long error as below. It shows part of error.
error TS5055: Cannot write file 'E:/Files/dash-
functional/node_modules/zone.js/dist/long-stack-trace-zone.js' because it
would overwrite in
put file.
Adding a tsconfig.json file will help organize projects that contain both
TypeScript and JavaScript files. Learn more at https://aka.ms/t
sconfig.
error TS5055: Cannot write file 'E:/Files/dash-
functional/node_modules/zone.js/dist/proxy.js' because it would overwrite
input file.
Adding a tsconfig.json file will help organize projects that contain both
TypeScript and JavaScript files. Learn more at https://aka.ms/t
sconfig.
error TS5055: Cannot write file 'E:/Files/dash-
functional/node_modules/zone.js/dist/sync-test.js' because it would
overwrite input file.
Adding a tsconfig.json file will help organize projects that contain both
TypeScript and JavaScript files. Learn more at https://aka.ms/t
sconfig.
error TS5055: Cannot write file 'E:/Files/dash-
functional/node_modules/zone.js/dist/zone.js' because it would overwrite
input file.
Adding a tsconfig.json file will help organize projects that contain both
TypeScript and JavaScript files. Learn more at https://aka.ms/t
sconfig.
After I added tsconfig.json as below also gives error again.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
How can I solve this. That error is not showing when compiling (ng serve) and build without prod mode.(ng build)
The problem is that the TypeScript compiler is processing the .ts files in your node_modules folder. You'll need to add an exclude array in your .tsconfig file. You can learn more about the .tsconfig file in the TypeScript docs.
{
"compilerOptions": {...},
"exclude": [
"node_modules"
]
}
How did you create your Angular project? If you use the Angular CLI, it will create this file for you already. You may want to generate an example project using the Angular CLI and copy/paste the .tsconfig file it generates (maybe even use that as a starting point for your project).
I'm building a library of aurelia custom elements for use by several different aurelia apps and am running into trouble getting the custom element html hooked into the app bundle properly with the CLI process.
I'm currently thinking that the library will be part of package.json and thus listed under node_modules/my-lib. What should the delivered .html format be
<template>...</template>
or should it be delivered in required format
define('text!my-lib/component1.html', ['module'], function(module) { module.exports = "<template>\r\n ...
If the former - what do I put in aurelia.json to get it to be included correctly in the vendor-bundle?
If I do resouces['../node_modules/my-lib/**/*.html'] in my-lib dependency section - it gets included as html in a js file which throws an error.
If I add as source to the vendor-bundle or using my own bundle my-lib-bundle.js
"source": [
"[../node_modules/my-lib/**/*.js]",
"../node_modules/my-lib/**/*.{css,html}"
],
Nothing gets included then except the 'main' listed in the one dependency.
If I add to the markupProcess (which seems more linked to the app and not a library)
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": [
"src\\**\\*.html",
"..\\node_modules\\my-lib\\**\\*.html"
]
},
I get the html correctly added to app-bundle but has the wrong path because it includes the '../node_modules' in the define so it's not found when the app attempt to use it.
I'm not using the CLI to build my lib as I want the app to only include pieces it uses. So the JS is built and delivered in AMD format, but I wasn't sure the process to go through with HTML?
Suggestions?
There is a skeleton plugin repo # github
https://github.com/aurelia/skeleton-plugin
With build scripts and all
We rename our assets directory on every single git push to handle browser caching issues. This mean that we store a random variable in a config.json file in our project.
I'm trying to move from gulp to npm as a build process, and therefore need to access this stored variable somehow from within the package.json file.
How would I go about such a task, and is it even possible?
"scripts": {
"build-offers": "uglifyjs src/pages/offers/*.js -mc > [HERE I NEED TO PREFIX THE OUTPUT FOLDER USING THE config.json FILE CONTENT] assets/offers.js",
"offers": "npm run build-offers"
},
You can acces environment variables in your scripts, but i think, that it isn't possible to read such variables from an other file with pure package scripts. Here is a way, you could do it within your package.json.
"config": {
"prefix": "prefix"
},
"scripts": {
"build-offers": "uglifyjs src/pages/offers/*.js -mc > %npm_package_config_prefix% assets/offers.js",
...
}
NOTE: The above version only works under windows.