I want to use my Angular 7 project for Sharepoint 2013. Some of my codes doesn't work in .html. That is why I want the index.html generated in dist folder to be index.aspx
In angular 5. I used to use ng eject and changed some setting that will set index to index.aspx instead of index.html when i build. But since ng eject no longer works in Angular 7 I am having problem on how to generate index.aspx when I build my project.
Expected result when I build a project should generate index.aspx instead of index.html
you can overwrite angular webpack config with the help of https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack
it includes guides and examples of how to use it. Hope it helps
Related
When adding an image by nodejs in Angular project's assets folder Angular needs a rebuild to show the image by path, how can I get images without a rebuild?
I suppose that you are talking about ng serve and not actual deployment.
The assets are meant to be static updated at build time (ng build or ng serve).
I would upload the images to a different directory outside of angular and fetch them from there in your angular app as is described at this link here
I'm new in Angular and NodeJS. I finished all the basic documentation, and now I'm doing tutorials. My question is about the architecture.
Following the angular tutorial, you create a new server:
ng new new-project
That creates a whole server listening to port 4200, you learn and work with angular, learn about directives, etc.
Then you create a server with node, configure routes, etc.
But how these two servers live together?
What do you recommend me to join them?
This is a node server. The angular part are just two files
This is the server created with ng serve. The angular part is so much complicated
Angular project is not a server. Angular is framework to create front-end page/app. Angular-cli command ng serve is used to build application and start a web server on localhost.
When you build your page with angular use angular-cli command ng build --prod to build your page ( more info about ng build command). The build artifacts will be stored in the dist/ directory of your project.
If you want to host angular page with node - copy file from projektFolder/dist to catalog when node can have access to copy files. In node you can use express library to host static files:
app.use('/myangularproject', express.static('myangularproject')) //host static files`
More info about hosted static files in node and express
EDIT
You use Angular CLI to build an angular application. This is an additional tool for working with angular and you do not have to use it.
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box
ng serve
ng serve is a tool from angular cli. When you call this command your project is build in memory and serve it via webpack-dev-server. It is used for quick preview and development of the project. If this command is confusing for you then you can use the npm script npm start.
The CLI supports running a live browser reload experience to users by running ng serve. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via webpack-dev-server. doc
ng build
ng build compiles the application into an output directory.
Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
When you use command ng new Angular CLI add all necessary files to develop your application. Some of them are used to configure the project e.g tslint.json, tsconfig.json, angular.json ... Do not host these files only result files from the use of the ng build command (/dist directory).
Angular CLI compiles your project into several files (try ng build and look how many files do you have in /dist. You must host all of them. These are static files. You do not need a special server like php files. You can host them using a regular file server. I don't know what you concern use in the node to host static files. If they use express you can use express.static(). More info at the top.
I'm using Vue CLI 3 and vue-router mode history and had this problem.
Found out that after I run npm run build, I need to put .htaccess inside the dist folder.
How to make npm run build to automatically include the .htaccess so that I don't need to manually copy it into dist folder?
It might sound obvious, but placing the .htaccess inside the public folder seems to do the trick for me. Everything contained in public folder is copied as is to dist folder during build.
I'm making a web page index.html say.
I used to download jQuery.min.js and put it in the same folder and add to index.html the tag `".
Then I got a bit more sophisticated and replaced the src with the URL of a CDN.
Now I've been told that I have to use npm and webpack. I see that npm creates a folder node_modules. So do I just src="node_modules/jquery/jquery.min.js"?
Refer here
You simply place it under scripts: array in your webpack configuration file.
I start learning webpack , node , and react and I am bit confused about some basic staff.
Does webpack bundle whole react.js + my javascript files into one output file, so when deploying to production I don't need to install node packages used in project (assuming that they are added to webpack.config.js file) ?
If above is right:
On my server I just need to place index.html + output from
webpack ( bundle.js) ? ( In simple scenario) ?
package.json will be used only on development side ?
You only need index.html and the bundle.js (or any name you gave the file) for the app to work, provided that you are not using any local assets. You don't need to include node modules. Package.json should tell you what to include in your project so that you don't have to include node modules whenever you want to upload your project along with few other decalarations.
The way Webpack works is that you specify one or more entry points and one or more output files. Webpack then reads the entry point and also traverses through the import / require statements recursively. It then generates final bundle file(s) which includes all the traversed files.
Yes, Webpack outputs everything in the the bundle.js file(s). You can configure multiple output bundles. So, you just need HTML and output bundle to deploy the app.
The package.json specifies the packages upon which the app depends, apart from several other things. While traversing through the entry points, webpack will also include the packages specified in import / require. Function of package.json is to tell npm to install those packages.