Load pure javascript library from node_modules with ng build --configuration=<env> - javascript

I have an Angular 7 app that use pure javascript files from the node_modules folder. All files are referenced correctly but when I run the next command:
ng serve -o
#or
ng build #without any advanced configuration
But when I run the build command:
ng build --configuration=pre
The output deployed app doesn't show any error but the library is not loaded and executed correctly.
Is there any available configuration to load that library from node_modules in order to use within our Angular 7 projects?
For sake of reference the library used is: mapbox-gl-draw-rectangle-mode

I think you need to add the references to this libraries in angular.json file in the section "scripts" inside "build -> options" key as follow:
"build": {
...
"options": {
...
"scripts":[
"{path to js file in node_modules or where is storage}"
]
}
}

Related

Include External js file to angular 5.0.0 project

I'm trying to include hello.js in my angular 5.0.2 project.
Below is the cli version
I have added the script file to the angular-cli.json file.
"scripts": [
"./js/hello.js",
"./js/hello.polyfill.js",
]
The path is correct as i'm also loading style in the angular-cli.json which are loading fine.
In my service file i'm importing hello as below:
declare var hello: any;
declare var gapi: any;
but when i run ng build the console shows the error:
Cannot find module 'hello'.
If i load the files through script tag in the index.html the code and imports works fine .Only when i add it to the angular-cli.json file it stops working.
Please guide
Thanks
Edit the scripts array in angular-cli.json or angular.json.
You must also specify the assets folder:
"scripts": [
"./assets/js/hello.js",
"./assets/js/hello.polyfill.js",
]

How do I include a JS file from a node_module in my view in Roots?

I'm using roots (http://roots.cx) and I want to include a library from a node_module in my page. I've npm install foo and the library is on disk.
I've tried adding foo to the extensions in app.coffee and restarted the watcher but the path it's rendering is to the node_modules folder which does not resolve from the browser.
extensions: [
js_pipeline(files: 'node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
and in the page source I get
<script src='node_modules/foo/lib/foo.js'></script>
What is the correct way to include a library from a node module?
Try this instead with the ./ since it's only a file and not a module, like this:
extensions: [
js_pipeline(files: './node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
Otherwise try to extract or copy the file from the node_modules and put it in a separate folder

Integrating Sails Js with Angular 2

I'm trying to integrate Angular 2 in a Sails Js application. I'm new to both. I have been following this official tutorial here. It works fine in standalone mode with a static http server but when i try to integrate into sails app i get following problems:
1 - How do i refer to angular2 js inside the local node_modules folder. Everytime i do, sails interprets it as a route and gives me a 404 for my scripts. For instance:
<script src="node_modules/angular2/dist/angular2.min.js"></script>
I was able to overcome above issue using cdnjs links for now but i would like to know a better/proper solution.
2 - I added the tsc and tsc -w scripts to my package.json, but even with sails lift --verbose i do not get any output or error. Here is how I added the script to json file:
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"debug": "node debug app.js",
"start": "node app.js"
}
In the end i had to install typescript with -g and compile manually. That worked, but again, it's expected to work with the scripts. It would be great to know what I'm missing.
3 - After jumping through hoops to get rid of the above errors, when i lift the server again, it gives me more 404 error which seem to be coming from system.src.js and that I am unable to figure out. Please see the console screengrab below.
I think I might be making a mistake setting up the angular application directories within sails. Just to make sure we cover everything, here is the directory structure I'm using. The sails app does not have anything in it yet. Which is why the below paths are just for angular related artifacts and assets.
Within the assets folder:
app
│   ├── app.component.ts
│   └── main.ts
Of course the .ts files get compiled to js.
In the sails views folder I have layout.ejs which has following contents:
.
.
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/app/main')
.then(null, console.error.bind(console));
</script>
.
.
.
<my-app>Loading...</my-app>
In addition to above files, I have also added the tsconfig in the sails root folder.
I have followed the code and directory structure guidelines from the official quickstart tutorial.
So, for anyone interested, i have resolved the issues like so:
1 - For providing static access to node_modules i created an express middleware (probably use policies for this as well?):
(config/express.js)
var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
}
};
2 - I was able to compile already so all good there
3 - For the rxjs related errors, i did some research and found out that rxjs is no longer bundled with angular 2. Therefor, i had to modify the systemjs config a bit to add mapping for rxjs, like so:
(views/layout.ejs)
System.config({
map: {
rxjs: 'node_modules/rxjs' // added this map section
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'rxjs': {defaultExtension: 'js'} // and added this to packages
}
});
System.import('/app/main')
.then(null, console.error.bind(console));
You need to setup access to your static files. You can check out how, right here.
http://sailsjs.org/documentation/concepts/assets
So put those node modules into an asset folder, for which you can then have static access.
However, are you sure you want to do this with Sails? As far as I know Sails is a fullblown MVC framework, which you won't really need if you only want to use it as a backend for Angular. I'd recommend using something like Express instead.
You can use the JavaScript files that are provided in the folder node_modules/angular2/bundles:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
This should answer to your first question.
Regarding the second question, elements you put in the scripts block of your package.json file are aliases for commands. The tsc -w one waits for updates in TypeScript files and automatically compiles them. This command must be started in background... For example with: npm run tsc:w.
Hope it helps you,
Thierry
(1) For the first question:
The problem with 404 angular files not found is that when Sails lifts Grunt deletes all the files in .tmp then rebuilds the project from scratch, so what happens is Sails server starts before the build is finished and the files are not there that's why you get 404. If you wait for a little while your page should load without any errors.
If waiting get too long use these scripts from CDN:
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
(2) Second question:
Run tsc in a separate console window like this:
npm run tsc:w
(3) The third problem by adding the following to components where it's needed:
import 'rxjs/add/operator/map';

Prevent Jade from flattening folder structure

I've been attempting to implement a build solution using NPM scripts as opposed to Gulp/Grunt/etc as outlined here: http://substack.net/task_automation_with_npm_run and here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/. However, I'm struggling to integrate a clean and sensible approach for managing numerous Jade files in the build process.
The Jade CLI supports passing it a directory and outputting all of the deeply nested compiled Jade files. This is great, however, this completely flattens the folder structure. I'd ideally like to have Jade output the results whilst maintaining the directory structure. What's the best way to go about this?
Example folder structure:
package.json
src/
foo.jade
bar/
baz.jade
qux.jade
Running jade src -o build outputs:
package.json
build/
foo.html
baz.hmtl
qux.html
src/
Instead of:
package.json
build/
foo.html
bar/
baz.html
qux.html
src/
Not sure how I missed this but for anyone who should happen upon this in the future, the -H flag is your friend.
ex: jade src -H -o build
ref: https://github.com/jadejs/jade-cli/blob/master/index.js#L36

How to define relative dependency with brunch

Brunch allows for specifying the concatentation order in the JS processing via before and after.
I have the following dependency order:
some bower components
a setup file (setup.js)
more JS files
so basically the setup.js file needs the bower components to be there, but it must be loaded before other JS files.
If I put setup.js in the before list, it is included before the bower components.
How can I make sure setup.js gets included right between my bower components/vendor libs and my own JS.
before: [
'bower_components/**/*',
'setup.js'
]

Categories

Resources