I have an existing angular.js application, which I am in the process of upgrading to angular with NgUpgrade. I am also trying to move to using angular cli as the build system. ng serve and ng build works perfectly, but I am having trouble with ng build -prod.
For the orginal application, I used gulp for building, and as a intermediate step i transformed the input files with ng-annotate. I am having a hard time getting this to work with angular cli.
Is there any way to integrate ng-annotate with ng build -prod? Or any other way to process the angular.js files before minification?
I did this using babel-plugin-angularjs-annotate, which adds the annotations to the source files, in a permanent manner (so, you only need to run it once).
I put detailed instructions in this other SO post.
Notice Babel should not be added to your Angular project. Instead, you create a second project, and execute Babel in there. Babel will read the files from the folder you specify, and generate the annotated files in another folder you specify.
After you run this once, you can forget about ng-annotate.
Related
have a projejct that uses webpack .It is an angular project https://github.com/cornflourblue/angular-8-registration-login-example
howw to generate service for that
When i used like this
ng g service rest-api
getting error as
The generate command requires to be run in an Angular project, but a project definition could not be found.
Your project is missing a few key angular files... so technically your project isn't an angular project - did you create this project using the CLI?
The easiest way to fix this issue would be to follow the getting started tutorial here https://angular.io/guide/setup-local and create a new project and copy and paste the changes you've made in your project to the CLI created version.
Overview
I have Angular 6 app build by Angular CLI. Application is written in multiple languages. Each language has JSON file with translations of all the application texts. The filenames are ${language}.json, e.g. en.json, es.json, pl.json.
I'd like to set the language of the app during build - build the app only in one language. For that on build I need to import a single translation file, which is chosen depending on which language I'm building for.
Problem
How to conditionally import single translation file only for the language chosen during build?
In addition I'd like the translation file to be bundled together with the rest of my application's JavaScript, instead of being loaded on demand on run-time.
Sketch of a solution
const translations = import(`./translations/${lang}.json`);
Actually the above code works in Angular 6/Webpack (the only thing needed is setting compilerOptions.module: 'ESNext' in tsconfig.app.json), but not in a way that I want. Instead of resolving the import during build time and bundling the translation file together with the rest of the code, it creates a separate files (chunks) for all translations, one of which is then loaded on demand during run-time depending on the value of JavaScript lang variable.
So how do I make the import to be resolved during build-time and not run-time? Also where and how do I set lang variable during build, as I don't have access to Webpack configuration (it's hidden inside Angular CLI)
Webpack alone
When using Webpack alone, it's possible to implement this for example by using NormalModuleReplacementPlugin. But as Angular CLI hides all the Webpack configuration, I don't know how to integrate it into Angular project. Ejecting Webpack configuration from Angular CLI is the last resort for me.
As part of the CLI 6.1 release, a feature was added that allows files to be replaced during the build other than .ts files. Previously this was used for the environment and environment.prod files
Additional files can now be set with the fileReplacements key of the angular.json configurations. As far as I know, it should work with asset files, so .json should work. It's only been added recently, but there are issues/feature details that you can look up
Let us know if it works out!
P.S. If you don't want to complicate the angular.json configuration, you could create a .js node script, and run it before doing the build, passing in the language as a param, and replacing the relevant .json file in before building the Angular bundles
How can I convert a gulp setup project to normal angular js project without gulp?.
My friend gave me gulp setup project but I need to be able to run it without gulp.
If you're going to use a different build tool, just remove the Gulpfile and any npm dependencies related to gulp. Then install and setup the other build tool.
If you're not going to use a build tool at all, you do the same as above, but have to manually include all the .js files in your html file separately.
I don't suggest you use the latter of the two. Actually, I suggest you keep gulp, as it's a pretty decent tool.
You must have been using gulp for css minifying or some other tasks you can directly remove gulpfile.js file and run the angular project. It is not a problem having gulp it provides many tasks which reduces development effort unless if you trying to migrate to webpack or browserify tools i don't recommend you to delete.
As I understand it, ng-build creates a distributable packaged version of your application. I also understand that webpack is used to bundle Javascript modules.
I ran ng build on a test project and found that it created a dist folder containing what looked like a packaged version of my Angular application. All of the .js files had been combined however my referenced .css files had been left in the original form (not bundled or minified).
Therefore, what is the difference between using ng build or webpack to do this job. Or are they complimentary? Would I potentially use both in my deployment pipeline?
Not a complete answer, but worth to note:
If your css files were not compiled, it probably means, either:
you ran ng build (a.k.a. ng build --dev) which adds default --extract-css to false:
--extract-css (aliases: -ec)
Extract css from global styles onto css files instead of js ones.
You ran ng build --prod but forgot to reference your styles as global styles in angular.cli.json:
"styles": [
"styles.css",
"assets/styles/test.component.css"
],
Once you do this you will find your css files inlined, however, you will also find them in normal format as well. Cant understand why is that..
Webpack and ng-build do pretty much the same job, which is bundling your modules to be used in a browser environment For example, the Angular module is a feature, which doesn't support in the browser, and ES 6 modules are not implemented in any browser yet, which is why things need to be bundled.ng build only for angular. we can you webpack any UI related applications including angular.
I'm starting new project which will be based on some legacy code which was written using https://github.com/linemanjs/lineman-angular-template lineman-angular-template and Angular 1.5 components
But all new stuff i want to write as Angular 2 components. And i'm looking how to
concat all source code from angular# folder into one file let's say vendor.js
Previously i saw such variant How to compile an Angular2 TypeScript application to a single file?
src="/node_modules/angular2/bundles/angular2.dev.js"
but now in node_modules/#angular there is no more bundles/angular2.dev.js
I can't use cdn for it. I need to store everything on my server.
Can you suggest me some tool or smth like that?
Angular-cli also won't work for this case.