I'm trying to convert my existing Angular Project to work with Angular Universal (https://universal.angular.io/). I'm following this tutorial: https://github.com/angular/angular-cli/wiki/stories-universal-rendering. I'm stuck at the end of Step 3 (Building the Bundle). The name of my project is "fundercat". When I try to run:
ng run fundercat:server
I get the error:
Project 'dist/fundercat' could not be found in workspace.
Following the tutorial, I modified the following line in app.module.ts:
#NgModule({
imports: [
// Modified this line:
BrowserModule.withServerTransition({appId: 'fundercat'}),
And I added the following to angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fundercat": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
...
// added this block:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/fundercat",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
Any idea what I'm doing wrong?
Double check that fundercat is the name of your project by looking at what is listed as the name in your package.json file. If the name is something other than fundercat, you will have to use that name in the command in order to build the server. For example, if your project is actually named FunderCat then you need to run ng run FunderCat:server to run the server.
I ran into a similar issue when I tried to add angular universal to the angular-tour-of-heroes project. The way the documentation was worded made it seem like "my-project" was some kind of special angular cli command for running the server. It's not. "my-project" refers to the name of the project you're working on. So I had to run ng run angular-tour-of-heroes:server to run the server in the tutorial project instead of ng run my-project:server.
Related
I am using a angular login example found online that we use npm start to run. My problem is when i generate a component and add it to the app.modules.js file, the app doesn't display anything just a white page with a loading... on the top left. can this be because i am using npm? when i posted it on stackblitz and added the sidebar component it worked but locally if i add a componenet by ng generate component test and as soon as i add it to the app.modules.js file it shows the white screen but once removed it works perfectly fine. the stackbliz and origional github link is provided below
stackblitz: https://stackblitz.com/edit/angular-ydiywh?file=src%2Fapp%2Fapp.module.ts
github: http://jasonwatmore.com/post/2018/06/14/nodejs-mongodb-simple-api-for-authentication-registration-and-user-management
when i run ng serve --open i get the following error
error after installing module
ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs//src/tsconfig.app.json'
Error: ENOENT: no such file or directory, stat '/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/src/tsconfig.app.json'
at Object.statSync (fs.js:815:3)
at AngularCompilerPlugin._setupOptions (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#ngtools/webpack/src/angular_compiler_plugin.js:96:16)
at new AngularCompilerPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#ngtools/webpack/src/angular_compiler_plugin.js:61:14)
at _createAotPlugin (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:41:12)
at Object.getNonAotConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js:47:19)
at BrowserBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#angular-devkit/build-angular/src/browser/index.js:82:37)
at DevServerBuilder.buildWebpackConfig (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#angular-devkit/build-angular/src/dev-server/index.js:111:46)
at MergeMapSubscriber.check_port_1.checkPort.pipe.operators_1.concatMap [as project] (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/#angular-devkit/build-angular/src/dev-server/index.js:38:40)
at MergeMapSubscriber._tryNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
at MergeMapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
at MergeMapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/Subscriber.js:64:18)
at TapSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/operators/tap.js:62:26)
at TapSubscriber.Subscriber.next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/Subscriber.js:64:18)
at MergeMapSubscriber.notifyNext (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocsnode_modules/rxjs/internal/operators/mergeMap.js:84:26)
at InnerSubscriber._next (/Users/xxx/Library/Mobile Documents/com~apple~CloudDocs/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
at InnerSubscriber.Subscriber.next (/Users/xxx/Library/Mobile/node_modules/rxjs/internal/Subscriber.js:64:18)
.angular.cli file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"new-cli": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets"
],
"styles": [],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "new-cli:build"
},
"configurations": {}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "new-cli:build"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [],
"exclude": []
}
}
}
},
"new-cli-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application"
}
},
"defaultProject": "new-cli"
}
error in chrome inspect when adding component and running npm start
Uncaught Error: Unexpected module 'SidebarModule' declared by the
module 'AppModule'. Please add a #Pipe/#Directive/#Component
annotation. at syntaxError
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:1270)
at eval
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:10888)
at Array.forEach (<anonymous>) at
CompileMetadataResolver.getNgModuleMetadata
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:10870)
at JitCompiler._loadModules
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:24112)
at JitCompiler._compileModuleAndComponents
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:24093)
at JitCompiler.compileModuleAsync
(webpack:///./node_modules/#angular/compiler/fesm5/compiler.js?:24053)
at CompilerImpl.compileModuleAsync
(webpack:///./node_modules/#angular/platform-browser-
dynamic/fesm5/platform-browser-dynamic.js?:158) at
PlatformRef.bootstrapModule
(webpack:///./node_modules/#angular/core/fesm5/core.js?:4649) at eval
(webpack:///./src/main.ts?:6)
So here are the steps to reproduce for your 'local' stackblitz to work:
1 - generate your project with ng new myApp
2 - download the stackblitz project via the export button, then extract the files inside of the compressed folder.
3 - in the extracted folder, go to the src folder, then inside of it click on the second src folder.
4 - copy the app and the main.ts file and paste them to the first src folder.
5 - open the typings.d file in the second src folder and copy the line inside. and paste this line in the typings.d file in the first src folder.
6 - delete the second src folder.
7 - replace the src folder in your project root with the one from the extracted folder.
8 - run this command in your project root: npm install --save ng-sidebar
9 - run npm start
You can now create how many components you want this will still works.
Install the Angular CLI:
npm install #angular/cli
Then run this from the app directory. It should open a browser to localhost:4200
ng serve --open
npm install --save-dev #angular-devkit/build-angular
this should solve your dev kit error its a new dependancy introduced in angular 6 and has to be saved as dev dependancy
So I went to the site you cited and downloaded the github project.
I followed the instructions on the page and was able to run it with no issue.
I tried to add a component via "ng" and was unable to. I kept getting a variety of errors related to angular.json not being able to be located and so on. I'm not sure what you did to get the component in there, but it seems like that is related to the problem. The cli cannot run this project out of the box it seems to require the use of npm.
After looking through some of the source it seems that this is Angular on Webpack, so the CLI won't work for you. It won't allow you to create components either.
I have an existing project and I want to use the angular cli generator, so After install and create the following .angular-cli file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "app"
},
"apps": [
{
"root": "src/mc2/components",
"prefix": "app"
}
],
"defaults": {
"styleExt": "css",
"component": { }
}
}
The problem is when I generate a new component it created inside:
/src/mc2/components/app/todos/...
How can I remove the app folder, what I really need is:
/src/mc2/components/todos/...
Fist of all you have to follow the CLI project structure, so just run ng new my-app and make sure that you have a matching structure in your project, once it is done change your "root": "src/mc2/components" to "root": "src" in .angular-cli.json
If you are in the root of your project folder the rule is
ng g c something - create something component in src/app/something
ng g c /components/something - create something component in src/app/components/something
Also you can use --flat flag to create a component without a dedicated folder
You can add --dry-run just to see what the command is gonna do
Sorry, seems that i mislead you. Because of the angular-cli style guide the ng g component something always places your generated component inside an app folder. Didn't find a way to change this except manually doing so. But when you generate a new file it just generates a new app folder. So for now i dont think they have made a way to do this yet.
I'm creating an application using Angular 2. I started using it in the RC2 phase and after alot of updates I made to my app according to the released RC I finally got it to run on the Angular 2.0.0 final version.
As I'm using the angular-cli as well and updated to the currently latest version (1.0.0-beta.15). I also did all the required changes needed as it e.g. now uses webpack instead of SystemJs.
My problem now is, that I can't seem to find a way to include external libraries (lets take jQuery for this example) to my application without the need to include from a CDN.
In previous versions of Angular 2 there was an angular-cli-build.js like this:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
Which (looking to the last line of the vendorNpmFiles array) mapped the jquery library to the folder of the ready build app together with the system-config.js which had a little something like this:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
And what it did was creating a vendor folder inside the final build folder (by default called dist) from which I could simply import jquery from in my parent most index.html with a statement like:
<script src="vendor/jquery/dist/jquery.min.js"></script>
My question now is how to get a similar result as described in the angular-cli version I'm using.
For now I use the libraries globally so I include them in the angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
This way it is also not needed to include them into the index.html.
If someone finds another way to do it I'm still very interested in it.
i'm packaging my application using electron-packager but isn't changing its name, and still display "Electron".
it's supposed to use the productName in my package.json but it doesn't change.
even if i made an installer, the name of the app installed, shortcut and process still is Electron
i've read that maybe the problem is electron-prebuilt but i didn't have it as a dependency on my project.
Any idea what is wrong?
Edit:
reading more on the documentation of electron-packager there's an options especially to windows. but when i use them throws me an error:
Fatal error: Unable to commit changes
undefined
the first time i used them was "working" good packaging my app, but still displaying wrong the appname
electron-packager ./ --platform=win32 --arch=ia32 --overwrite=true --appname="TierraDesktop" --version-string.ProductName="TierraDesktop" --version-string=InternalName="TierraDesktop" --version-string.CompanyName="Cosmica" --version-string.FileDescription="Sistema de gestion comercial" --version-string.OriginalFilename="TierraDesktop"
before was working with --version-string.ProductName but now even with it still throws that error.
here i'll leave you my packager.json that's on the root of my project
{
"name": "TierraDesktop",
"productName": "TierraDesktop",
"version": "2.0.5",
"description": "Aplicacion de escritorio tierra de colores",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/xxxx/xxxxx.git"
},
"author": "xxxxx",
"devDependencies": {
"debug-menu": "^0.4.0",
"electron-winstaller": "^2.3.3"
},
"dependencies": {
"electron-json-storage": "^2.0.0"
}
}
Ok after trying and researching i've decided to package my application via programmatic API
with this script i can achieve all what i want. hope this help someone with the same problem.
var packager = require('electron-packager');
var options = {
'arch': 'ia32',
'platform': 'win32',
'dir': './',
'app-copyright': 'Paulo Galdo',
'app-version': '2.0.5',
'asar': true,
'icon': './app.ico',
'name': 'TierraDesktop',
'ignore': ['./releases', './.git'],
'out': './releases',
'overwrite': true,
'prune': true,
'version': '1.3.2',
'version-string':{
'CompanyName': 'Paulo Galdo',
'FileDescription': 'Tierra de colores', /*This is what display windows on task manager, shortcut and process*/
'OriginalFilename': 'TierraDesktop',
'ProductName': 'Tierra de colores',
'InternalName': 'TierraDesktop'
}
};
packager(options, function done_callback(err, appPaths) {
console.log(err);
console.log(appPaths);
});
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
If appname is omitted, this will use the name specified by
"productName" or "name" in the nearest package.json.
Have you tried to set the 'name' property in package.json?
#Paulo Galdo Sandoval's answer is correct for electron-packager, but as of version 9.0.0 of the package, it automatically grabs information for those fields (version-string is now win32metadata). See the release notes for that package
electron-packager checks the output directory for an existing package based on the version name. If you did not change the version name when you tried to re-package with a different product name, electron-packager probably told you in the console that it was skipping the packaging process because a package already exists.
What is the best way to implement the internationalization for a angular application at the moment?
The official i18n angular2 will be implemented in one of the rc release before the final release. It also will be more advanced than the current solutions.
More info how the new concept of i18n works in angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015
UPDATE 6 SEPTEMBER 2016:
Support for i18n is now official in Angular 2 RC6
Official release blog:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html
A sample of internationalization with Angular 2 RC6
https://github.com/StephenFluin/i18n-sample
At the moment the best alternative is is to use ng2-translate, which is a port to Angular 2 of the well known ng-translate. This will likelly cover the majority of use cases.
Later for Angular 2 there will be an official i18n implementation.
According to change log https://github.com/angular/angular/blob/master/CHANGELOG.md, a big piece of i18n was introduced in Angular 2 RC5:
i18n: merge translations 7a8ef1e
Unfortunately, I still don't observe any useful documentation.
However, according to https://github.com/angular/angular/issues/9104, the simple cases are already covered
{{ 'TRANSLATION_ID' | translate }}
Search this document https://docs.google.com/document/d/1mwyOFsAD-bPoXTk3Hthq0CAcGXCUw-BtTJMR4nGTY-0/edit for {{ 'TRANSLATION_ID' | translate }} for more details.
Recently I've created an in depth article about this...
Internationalization
Introduction
The Introduction of ngx-i18nsupport sums up the problem pretty well
Angular has a specific way of dealing with internationalization (i18n). It is described in the official documentation Angular Cookbook Internationalization (i18n).
Said in one sentence,
markup your strings to translate in your templates with an attribute i18n
run the Angular extraction tool (ng-xi18n) to extract the strings in an XML Format called [XLIFF-1.2]
copy and then translate the extracted file for every language you plan to support
run the ng compiler to generate a special version of your app for the different languages
But there are some maior gaps in the workflow. That´s where this tool comes into play.
First, you have to create a complete translation, otherwise, the ng compiler will not generate a version. It is not possible to run with partial translation.
Second, whenever you change something in your app, you have to regenerate the xliff, but there is no documented way how to merge this with the already existing translated files. There are new translation unit, that you have to merge in, and there are translation units, that do not exist any more.
We're going to use the ngx-i18nsupport-package to solve this issue.
Prepare Angular-App for i18n
Install Package #angular/localize using the angular-cli
ng add #angular/localize
Add the i18n-section to your angular.json in your project-section. Add the languages you need and change the source of your translations (the language you use as default in code/html) if required NOT RECOMMENDED STICK WITH EN IF EVER POSSIBLE.
Also make sure to set localize to true for your production-configuration.
{
...
"projects": {
"yourprojectname": {
"i18n": {
"sourceLocale": "en",
"locales": {
"de": "src/locale/messages.de.xlf",
"fr": "src/locale/messages.fr.xlf",
"it": "src/locale/messages.it.xlf"
}
},
...
"architect": {
"build": {
...
"configurations": {
"production": {
"localize": true,
...
Install ngx-i18nsupport
Run the following command to install ngx-i18nsupport
npm install -g ngx-i18nsupport
Configure xlf-merge
Add the following block the root-section of package.json and change it for your needs.
"xliffmergeOptions": {
"srcDir": "src/locale",
"languages": [
"de",
"fr",
"it"
],
"preserveOrder": true,
"beautifyOutput": true
}
languages
languages your app needs to support. Make sure it matches the i18n-definition your angular.json!
srcDir
output-dir for translation-files. Make sure it matches the i18n-definition your angular.json!
preserveOrder
Ensures the order of you translation isn't changed (not ordered to abc or whatever). This makes it easier to compare different version of the translation files.
beatifyOutput
formats xml nicely
Add some translations to your code
Make sure you have actual translations in your app like
<p i18n>Some random pagagraph that needs translation</p>
or
alert($localize `User ${username} doesn't exist!`);
Generate Translation Files
Run the following command to generate translation files. If you changed the --output-path make sure to change it accordingly.
ng extract-i18n --output-path src/locale
Call xliffmerge now to fix the issues mentioned in the introduction
xliffmerge
Recommendation Add this Command to the scrips section in your
package.json
"scripts": {
"translate": "ng extract-i18n --output-path src/locale && xliffmerge",
"xliffmerge": "xliffmerge",
...
You can run npm run translate any time you want to upate translations.
Test your app in a different language
You may want to test how your app looks translated for a specific language.
Add a build-configurations and serve-options to set the localize-language for each language used in your app.
HINT Don't forget to replace yourprojectname
angular.json
{
...
"projects": {
"yourprojectname": {
...
"architect": {
"build": {
...
"configurations": {
"de": {
"localize": ["de"]
},
"fr": {
"localize": ["fr"]
},
"it": {
"localize": ["it"]
}
...
}
},
"serve": {
...
"configurations": {
...
"development-de": {
"browserTarget": "yourprojectname:build:development,de"
},
"development-fr": {
"browserTarget": "yourprojectname:build:development,fr"
},
"development-it": {
"browserTarget": "yourprojectname:build:development,it"
}
Run your app in the desired language
ng serve -o --configuration=development-de
Recommendation Add a script starting your app in your apps supported langauges simultanialy each language on a different port
package.json
"scripts": {
"start": "ng serve -o",
"start-de": "ng serve -o --configuration=development-de --port=4201",
"start-fr": "ng serve -o --configuration=development-fr --port=4202",
"start-it": "ng serve -o --configuration=development-it --port=4203",
...
Now you can run your app simultaneously in any language you like
npm run start-de.
Have Fun!
😄