I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
Related
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
Prior to posting this question, I consulted the following threads on this topic:
How to include external CDN link into webpack project
Webpack and external libraries
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
How to include jQuery CDN in Webpack?
Webpack externals documentation
Based on all the above, it appears that in order to load a third-party library via a CDN, the standard method would be to use webpack externals, which produces the following script tag in the index.html file (per Webpack docs).
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
While this solution works if you have one or two libraries, how are you supposed to load 10 libraries (for arguments sake) via CDNs asynchronously (to maximise pageload performance) using externals in Webpack?
My current solution to this problem is to manually include the following script tags in my index.html file with relevant "async" and "defer" tags; however, I need to update the index.html file in my dist folder every time I include a new library, which leads me to believe I'm doing this completely wrong. Below is what my index.html file currently looks like, which is also replicated in the dist folder.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.20.1/moment.min.js" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.4/lodash.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" async defer></script>
<script src="https://widget.cloudinary.com/global/all.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" async defer></script>
<script src="/dist/build.js" async defer></script>
</html>
While I'm sure there's a "hack-ey" way of achieving my goal (which I'm open to seeing), my question is whether I can accomplish the above through an officially supported method (like through externals). If not, how does most of the web development world use libraries given that CDNs are known to almost always improve pageload performance?
EDIT: For some context, I'm using Webpack because I'm using vue-loader to build my VueJS SPA (as a learning project).
EDIT 2: This question was asked using incorrect assumptions about Webpack and how web development works. The conclusion is that you shouldn't be using CDNs as liberally as I have if you're using Webpack. Refer to the comment section for clarification.
I created new project and selected "Angular JS" as project type in webstorm.
Now webstorm has created a project for me like this:
I have added angular.js as a dependent javascript library.
When I open the index.html file, it has below code:
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
The code is referring to angular js files which are present in folder called as bower_components, but the webstorm has not created any such folder automatically. Due to this when I created a file called app1.js and trying to write some angular js code the auto-completion is not working at all.
What is the correct way of creating the projects in webstorm for Angular JS?
Earlier I tried with creating a simple project rather than Angular Js project but still had issue with auto-completion. The details are given in this post : How to create a simple angular js project in webstorm
Update:
Thanks to Daniel, now the issue of bower components is solved. But still the auto-completion is not working when I try to do for code webstorm.controller, please see below screenshot, how can I fix this issue?
Standard Angular methods completion doesn't currently work, please follow WEB-14134 for updates
I want to install the Angular Material library in a project, but I am behind a corporate firewall and even configuring the proxy doesn't work, it seems the proxy blocks certain types of files. Is there a way to install this offline?
FYI this is my BundleConfig
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Scripts/angular-loading/loading-bar.css",
"~/Scripts/nya-bs-select/nya-bs-select.min.css",
"~/Content/angular-ui-switch.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-ui/ui-bootstrap-tpls.js",
"~/Scripts/AngularApp/app.js")
.IncludeDirectory("~/app", "*.js", true)
.Include("~/Scripts/smart-table/smart-table.js",
"~/Scripts/angular-loading/loading-bar.js",
"~/Scripts/nya-bs-select/nya-bs-select.min.js",
"~/Scripts/moment.js"));
You can either use the CDN link in your reference, as explained in the docs, or download the source from CDN.
excerpt from the docs:
<head>
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
</head>
<body>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
</body>
Or grab the Source
download from here, save of your pc and include in your project ?
It's really confusing; I don't know why they can't put a freakin' Zip archive on GitHub like everyone else that contains all the dependencies. (They include a Zip file, but without the distribution minified files.)
By looking at the source code of the Angular Material site, it seems you can use the following links to get the latest files:
https://material.angularjs.org/latest/angular-material.min.js
https://material.angularjs.org/latest/angular-material.min.css
I started investigating jspm and stumbled across this issue.
I seriously search all over Google but could not find a simple answer or example.
How do you load CSS and fonts that come with it?
I tried to do <script>System.import('font-awesome/css/font-awesome.css')</script> but it does not work. It adds .js extension to the url and I get a 404. like this: font-awesome.css.js
I tried import 'font-awesome/css/font-awesome.css'; which does not work either.
So, for a jspm packages that contain css and fonts, how do you make them available to my application?
And what about the font files? Do I have to move them manually or get gulp to do it? How do you handle this in your jspm workflow?
Thanks
EDIT
Based on the given answer by Joy, I just want to clarify what I want.
Investigating jspm I read about its ability to dynamically load modules (aka es6 module loading). This, I believe, is the crux of jspm. I don't want to bundler every time I change a file! I want to bundle once at the end of the development just before I upload the app to the server. During the development cycle I want jspm to dynamically load my js modules and assets. Otherwise, if bundling is required, I can just use already available (and much faster bundling solutions) like Browseryfy, Webpack. So bundling at every file change is not a solution. With Systemjs and HTTP/2 we should not need to bundle at all ever. And this, I thought, what the jspm was all about.
So can someone tell me if it is possibly to load assets (css, fonts, images) dynamically with jspm the same way it loads js modules? The key word here is dynamically without bundling first. If yes - how?
Before you using font-awesome package, you need the CSS loading plugin and CSS build support.
$ jspm install css
$ jspm install npm:clean-css --dev
$ jspm install font-awesome
And create the main.js file which contains:
import 'font-awesome/css/font-awesome.min.css!';
Until now, you have two options that make them available.
(1) The first solution in index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('main');
</script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
You don't need to bundle all js file here. Import the main.js file only.
(2) Second solution is use jspm bundle-sfx
You can build a build.js by
$ jspm bundle-sfx main.js ./build.js
or gulp to automatically build the bundle file.
Here is a simple gulpfile.js example:
const gulp = require('gulp');
const gulp_jspm = require('gulp-jspm');
const paths = {
main: './main.js',
dest: './dest/'
};
gulp.task('scripts', function () {
gulp.src(paths.main)
.pipe(gulp_jspm({
selfExecutingBundle: true
}))
.pipe(gulp.dest(paths.dest));
});
function reportChange(event){
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}
gulp.task('watch', function () {
gulp.watch([paths.main], ['scripts']).on('change', reportChange);
});
gulp.task('default', ['watch', 'scripts']);
Now, create a index.html file and can test it by httpster
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dest/main.bundle.js"></script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
Check the jspm-cli/docs/plugins.md to get more informations.
load it with css plugin.
jspm install css
jspm install fontawsome=github:FortAwesome/Font-Awesome
in the js file
import fontawsome from 'fontawsome/css/font-awesome.css!';