We Keep Coding

JavaScript file names are getting changed after building using "ng build" command in Angular

I am new to Angular. I see that, there are some files like runtime.js, polyfills.js, main.js, styles.css etc getting generated by Angular cli when creating a new project.
When I build the app using ng build command, inside the dist directory, I am getting similar files with a random number added in these file names like main.some_random_number.js
Is there any configuration that will stop this file name change? I am having issues on accessing these files through Express.js path since I don't know what file name will be after I run ng build command.

Angular is cache busting the files, so that when you deploy a new version, there is no chance that, old code will be viewed in your browser.
If you want to cache bust your application, you need to toggle the flag.
--output-hashing - controls addition of the cache busting random string.
As per angular documentation.
--output-hashing Define the output filename cache-busting hashing mode.
none | all | media | bundles
So set it to none to remove the hash.
You can either set it in the command ng build --output-hashing=none or in the angular.json configurations array

Add angular app built with CLI into existing webpack project

I am working on an existing project which used webpack for front end asset compilation. I would like to add an angular app to this project. The angular app will be contained to a specific part of the site initially. Ideally I would like to use the CLI for the build but it isn't clear in the docs whether I can run the angular CLI commands within my existing webpack.config.js.
My folder directly is roughly as follows. Webpack imports from the webpack driectory and outputs the assets into an assets directory.
/
|-/webpack
|-/webpack-module-1
|-/another-module
|-/some-other-webpack-module
[|- IDEALLY ANGULAR-CLI APP WOULD GO HERE]
|-/assets
|-/js
|-/css
|-webpack.config.js
|-package.json
Is there a way of importing angular-cli app into webpack config?
Update
As a workaround I am using concurrently to run the angular-cli commands alongside the webpack ones and updated the outputPath of the angular app. I'm going to leave the question open in the hope somebody has a more elegant solution.

Linking local library into Angular 5 Project

What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance

npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save

You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2

When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.

While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve

Compiling JavaScript files in Angular 5 CLI project

I have a problem compiling (including) JavaScript files in Angular 5.0.0 CLI project.
I am performing the following steps:
Create an empty CLI (1.6.2) project (ng new test2). The project runs fine.
Modify tsconfig.json to include the line allowJs": true, to compile/bundle Javascript files
Create a simple Javascript file (eg test.js with content i=1;) in the app folder.
Build fails in Angular 5 with the error below.
Angular 5 error
"ERROR in error TS5055: Cannot write file
'/Users/user/Documents/workspace/test2/src/app/test.js' because it would
overwrite input file. Adding a tsconfig.json file will help organize
projects that contain both TypeScript and JavaScript files. Learn more at
https://aka.ms/tsconfig."
In Angular 4 JS file is compiled to the output directory specified in the outDir parameter and included in the final bundle.
ng --version is giving the following:
Angular CLI: 1.6.2
Node: 6.10.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.2
#angular-devkit/build-optimizer: 0.0.36
#angular-devkit/core: 0.0.22
#angular-devkit/schematics: 0.0.42
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.2
#schematics/angular: 0.1.11
#schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
outDir is set to "./dist/out-tsc" in tsconfig.json and "../out-tsc/app" in tsconfig.app.json.
Any thoughts anyone.
Regards
Dave

I ran into this issue recently and am happy to report that I think I have a solution!
To start:
Upgrade your Angular to the latest version (5.1).
Upgrade your TypeScript to the latest supported version (4.*, as of the time of the writing -- not 5.*)
You probably need allowJs: true in your config file.
Run ng serve --aot or ng build --watch=auto --aot You should see the above error and be unable to access your site.
Open one of the .ts file that's part of your app and make a small change (such as adding a single space) and then save the file.
Your app should compile!
(The --watch=auto and --aot flags are critical for this workaround, as far as I can tell)

The error is present in the provided error message.
"ERROR in error TS5055: Cannot write file '**/*.js' because it would
overwrite input file. Adding a tsconfig.json file will help organize
projects that contain both TypeScript and JavaScript files. Learn more at
https://aka.ms/tsconfig."
It appears that your build process is trying to compile *.ts files to *.js files, but cannot write the file because the file already exists.
Before your build process, simply clear out the build files from your distributable directory first.
Advice
It seems that you are dumping the *.js files directly in your src/, which can be messy and undesirable.
A better solution is to generate a /dist directory that contains the compiled build files.

Ive raised a bug for this against the angular cli
https://github.com/angular/angular-cli/issues/8991#issuecomment-353889755 that is being fixed in PR8930

Ember-CLI rundown using it with Laravel or other backend frameworks

Using the ember-starter-kit all I had to do was throw the contents of it in the /my_laravel_app/public folder and everything was fine.
Now I am trying to create a project with laravel and ember-cli
I'm a little confused as to how I need to structure my application? In which laravel folder should I be running the ember new my-app command? Furthermore, how can I use apache for testing my ember-cli application instead of using ember server command since I need to test it with my laravel generated apis.
Any help is much appreciated!

Here is one way to do it
Go into your root laravel folder and run the ember new my_app_name
Then go into your my_app_name folder and create a new file build_custom.sh add the following lines to the file
ember build
cp dist/index.html ../app/views/ember.php
cp -r dist/assets ../public/assets
Explanation: the first line builds your ember-cli app and generates all the necessary files in the dist/ folder. The second line copies the index.html file generated to app/views/ folder and renames it ember.php so laravel can recognize it. The last line just copies all the assets into your laravel public folder
You can add the following in your app/routes.php file in laravel to serve your ember app. Make sure it's all the way at the bottom so your other api routes take preference
Route::get('{ember?}', function() {
return View::make('ember');
})->where('ember', '.*');
That should be it, everything should work as intended. Good luck.

Here is another way to do it:
You can create two separate folders: backend (laravel app) and frontend (ember app)
. Let's say, your laravel app is running under 192.168.10.10, you can then proxy your ember app ajax requests using ember-cli command: ember serve --proxy http://192.168.10.10. Using this proxy option, all commands will be passed to ip address, specified with --proxy option - in this case ip address, where laravel app is running (where api is listening).

If you getting UnrecognizedURLError: /ember try to remove welcome route on laravel...