Basics of importing scripts in angular2 using nodejs and npm with ASp.net Core 1 - asp.net

Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?

Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.

Related

hosting gulp based project with multiple directories with firebase

I have a template based on a gulp, I want to host project on firebase, I tried to create a simple project and it went well, but with so many directories and also considering the fact that my main project is built on gulp, I ran into a problem.
this is my project's folder structure:
so, question is how I can modify firebase.json so that everything work fine and I don't have to change the whole gulp file ?
sorry I didn't describe everything in details but I think get the point of my problem.

How to use sass for Meteor on development?

I am learning my way through Meteorjs and I want to write the styles of my code using sass, I added fourseven:scss plugin to my meteor app with meteor add fourseven:scss and documentation says
Without any additional configuration after installation, this package automatically finds all .scss and .sass files in your project, compiles them with node-sass, and includes the resulting CSS in the application bundle that Meteor sends to the client.
So I created some .scss files in /client/styles/ and I was expecting for the plugin to detect those files and generate a css file that meteor would bundle in the browser, but it doesn't work that way I guess, that means the file will be generated when I build my app? Is there a way to get the compiled files immediately after a change, just like npm compiler packages? thank you.
You can edit a scss.json file in your root folder to show straight where css and scss files should lay.
{
"enableAutoprefixer": true,
"includePaths": [
"path/to/some/sass/folder",
"path/to/another/sass/folder"
]
}
If you starting meteor server he already watch for changes in CSS files and refreshing browser on change without reloading page via Browserify.
Thank for providing the code Adnan Y

Preview Failed - Visual Studio will look for typescript files when publishing even when they are not included

I'd like to do the inverse of this question/answer:
How to include TypeScript files when publishing?
The thing is that I'm trying to publish an ASP.NET MVC 5 Project. Unfortunately the dreaded Visual Studio and the hungry Jack Typescript interpreter ignores any tsconfig.json file and decides to go deep down and look for any .ts file that is not accompanied by a .js. I have lots of npm packages nested down and some of them have uncompiled typescript files.
Funny thing is, that they are not included in the project (not even an exclamation mark). (I even checked for the .csproj and no files were found).
Is this a bug? How can I prevent this from happening? Using VS 2015.2 (Update 2).
I had a very similar issue. Publish kept failing because it couldn't find foo.js as it wasn't in the same directory as my ts/tsconfig files, even though outDir was set to another location. I don't know if it is a bug or not but I couldn't figure it out using the tsconfig. Instead, I was able to get things working by using the inbuilt TypeScript Build settings instead.
First, I deleted all tsconfig files from my project (I made sure I kept a backup just in case). The TypeScript Build was originally greyed out because I had the tsconfig files in my project.
Next, I created a new folder directly under Scripts to save the js files into.
I then went to Project Properties and selected the TypeScript Build tab. Under Output, I checked the Redirect JavaScript output to directory and browsed to the newly created folder. I repeated this for all build configurations.
Finally, I included the new folder in my project and then built. Folders and files which aren't included in the project can be seen as a ghost icon in the Solution Explorer if you have Show All Files icon selected. I think that if you have multiple TypeScript projects with their own tsconfigs, the file structures are replicated under the chosen output directory but I haven't tested it in many cases so I'm not certain.
Obviously I had to redirect my script bundles to the newly created js structure.
When I first followed this process, I got a few build errors mainly due to my own daft mistakes in my TypeScript code which I'd set the tsconfig to conveniently ignore. Another error was multiple references for objects, which I managed to fix by deleting the definitions files and making sure that the Generate declaration files option was unchecked in Typescript Build. Once I fixed those issues though, I was able to publish without that annoying error - happy days!

How to make Meteor ignore files?

Is there some specific folder in Meteor file structure which is simply ignored by Meteor? (meteor bundle and meteor deploy etc)
Or better yet: is there a kind of .meteorignore file where we can list files for Meteor to ignore?
There's no such file as .meteorignore yet.
Currently the only reliable way to hide a file from Meteor is to make it hidden (add a dot to the beginning of name). You can hide the whole directory, which is useful if you need specific filenames for things like Grunt tasks.
For example if you create a directory called .hammerTime, then Meteor can't touch this.
Update:
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
You can use them in any directory of your project and are fully integrated with the file watching system.

How to use the modified bootstrap in Flat-UI in a Meteor app?

I am using bootstrap in Meteor and found that there is a modified flat design here: http://designmodo.com/demo/flat-ui/. Among the files seems to be a modified set of Bootstrap files. Is it possible to somehow use those css and js files to override the default bootstrap files to get the Flat-UI in a meter app? Thank you!
it's quite simple:
unzip the contents of the flat-ui-master.zip from the flatui site, then follow these steps:
create these folders in your app root: /client/stylesheets
copy the contents of the .zip into /stylesheets
remove the index.html and README.md files as they might cause your app to crash, and are not needed
meteor automatically takes care of the rest.
Although manually insert files works, I'm using meteor package jss:flat-ui
meteor add jss:flat-ui
it will automatically add flat-ui and twbs:bootstrap.
Note that, it might be better to remove any bootstrap package before installing this, I've been in a project that has mizzao:bootstrap installed and the login ui not working, so I remove mizzao:bootstrap and reinstalled flat-ui to make it work.
You can use whatever css you want to, Meteor don't care.
I wouldn't add the bootstrap meteor package though, I'd just download the css files you want and place them in your project. That way you know exactly what files are used and can easily make changes.
Here's some info on how to structure your app: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I created a shell script to generate a custom bootstrap Meteor package from either a precompiled distribution, or from your own clone of the Bootstrap Git repository.
You can find it here, along with usage information: https://github.com/wojas/meteor-package-bootstrap
Just unpack the ZIP file containing the files and run this command from inside the theme folder:
/path/to/meteor-package-bootstrap.sh $your_meteor_project/packages/bootstrap

Resources