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
Related
I have a project build on react-native version 0.55.4. It was woking fine on old system. I have to change system due to some reasons. I setup on new system, I am able to run project using react-native run-android but when building a signed APK using ./gradlew assembleRelease I am receiving following error.
Task :app:processReleaseGoogleServices
Parsing json file:
<Project-Directory>/android/app/google-services.json
FAILURE: Build failed with an exception.
What went wrong:
Could not list contents of
'<Project-Directory>/node_modules/react-native/scripts/third-party/glog-0.3.4/test-driver'. Couldn't follow symbolic link.
I know this issue is already on stack overflow Invalid symlink in node_modules error when trying to deploy to simulator (RN 0.45). I have tried it. I have also tried following github question.
https://github.com/facebook/react-native/issues/11212
https://github.com/facebook/react-native/issues/14417
https://github.com/facebook/react-native/issues/14548
https://github.com/facebook/react-native/issues/14464
I have also tried following things.
Deleting node modules and reinstalling them
Deleting .bin folder in node modules
Deleting react-native/third_party folder in node modules.
Copying node modules from older system.
Copying third-party and glog-0.3.4 from older system.
Deleting test-driver file inside third-party folder.
Unlinking test-driver file inside third-party folder.
Installing automake-1.16 and creating a new alias of test-driver file inside third-party folder.
My java version is 1.8.0_201. My android studio version is 3.3.2. Projects react native version is 0.55.4. My mac os version is 10.14.4. My x code version is 10.2.
Please help.
Thanks in advance.
Unlinking as below and restart with the cache cleaned
In project folder:
unlink ./node_modules/react-native/scripts/third-party/glog-0.3.4/test-driver
and then stop js server and run:
npm start -- --reset-cache
It should work
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.
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
I have an existing Express project located at ~/Documents/projects/express-project, and I want to use Angular 4 with it. I have tried using
ng new express-project --directory express-project
while in my projects directory, but it doesn't create the files needed for Angular and gives the following messages:
$ ng new express-project --directory express-project
error! express-project/.gitignore already exists.
error! express-project/package.json already exists.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'express-project' successfully created.
I have also tried the following command:
ng build
but it complains about an angular-cli.json file. What do I need to do to get Angular 4 working with my existing project?
I have found it best to create a folder with two subfolders for example
-express-project
-server <-- copy the existing files from your project here
-client <-- ng new here and set the build directory in the .angular-cli json to your desired path in the server dir.
I'm currently developing a web-app using node/npm and grunt. I'm new to web-development and come from java development. This is how my prototype's structure looks like:
prototype
|--app
|--index.html
|--index.js
|--dist
|--index.html
|--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json
I plan on developing with following structure: My code will be modularized by using npm modules in the lib folder. Those will be included in the index.js. The index.html and index.js files in the app folder will be built for the browser using grunt-browserify and grunt-contrib-copy; results will be put into the dist folder. I also plan on using bootstrap.
In the bootstrap starting-guide, there is written (source), grunt dist would regenerate the dist folder with bootstrap included.
My first question is: How does that happen? I guess you have to place the bootstrap folders somewhere. Or do I need to install some bootstrap related package? In short: How does grunt "know about" bootstrap?
My second question is: How could I include this process in my gruntfile? Right now my gruntfile uses browserify to browserify the index.js and copy to copy the index.html. Those are registered at the goal (is this the right term?) default: grunt.registerTask('default', ['browserify', 'copy', ]);. I'd like to alter this goal by adding the bootstrap magic that happens in grunt dist.
Any help is much appreciated!
The target you are referring to is in bootstraps build environment. You can download this with npm install bootstrap#3 The grunt dist target they are referring too is contained in the downloaded node_modules\bootstrap\Gruntfile.js and is used to compile bootstrap itself for distribution.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
The dist target uses several grunt modules like grunt-contrib-htmlmin and grunt-contrib-cssmin and not all may be desired in your setup.
I would suggest taking a look at this file and each of the targets called and modules used for some more guidance on how to proceed.
If you just want to use bootstrap in your project you can download the already compiled and minified libary here and just add them to your project.