"Duplicate identifier" errors with Angular2 and TSD - angularjs

I'm trying to convert a project from Angular 1 to Angular 2.
This is a client & server project with some common code (so I keep it together). I want to use Angular 2 on the client side so I followed the ng2 QuickStart. I am currently trying to build it inside my project.
I am using TSD to manage my dependencies typings. Some of these dependencies like socket.io rely on node.d.ts.
My problem is that angular2 already expose node.d.ts and create an ambient definition so when I want to use TSD with angular2 I get a conflict between the two definitions :
typings\node\node.d.ts(961,9): error TS2300: Duplicate identifier 'path'.
Here is my gulp task :
gulp.task('build.conflict', function(){
var browserProject = tsc.createProject('browser.tsconfig.json', {
typescript: typescript
});
var src = [
'src/browser/**/*.ts',
'typings/**/*.d.ts' // commenting out this line results in unknown modules
];
var result = gulp.src(src)
.pipe(tsc(browserProject));
return result.js
.pipe(gulp.dest('build/browser'));
});
I also set up a simple repository demonstrating my issue.
How can I solve this error while still keeping my TSD typings. (The best solution would be to prevent angular2 to expose its internal node.d.ts)

If you started using Typings, you could only allow discovering *.d.ts from browser dependencies in tsconfig.json. Here is an excellent example at John Papa's NgConf demo.
UPDATE: This is outdated per Typings > 1.0.0.

Related

WebStorm is not recognizing external library globals

I am working on a little project with AngularJS (1.6.5) in WebStorm. The problem here is that WebStorm is not recognizing any globals AngularJS defines. I have AngularJS installed and the right #types. I also defined AngularJS as an External library and I also made sure that AngularJS is not excluded by WebStorm. Yet WebStorm is still giving me errors.
Example:
logConfig.$inject = ["$logProvider", "$compileProvider"];
function logConfig($logProvider: ng.ILogProvider, $compileProvider: ng.ICompileProvider) {
// $logProvider.debugEnabled(false); //TODO add this in production
// $compileProvider.debugInfoEnabled(false); //TODO add this in production
// Disable comment and class directives. Boosts the performance
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
}
The code above gets the following error in WebStorm: Unresolved variable $inject. (the $inject has a red color and the message is given when I hover over it)
Am I missing something?
Update
I may have found the problem. WebStorm doesn't reconsize AngularJS even though it is in my Node_modules, I have the correct typings (#types/angular) and I have registered as an exteral library (file-->settings-->languages & frameworks-->JavaScript-->Libra‌​ries).
When I type import * as ng from "an|", and hit "ctrl + space" WebStorm doesn't give me any hints about the angular library. I am guessing these issues are connected.
Anyone knows if there is an other option to make WebStorm reconsize AngularJS?
I found a solution for the problem:
Like Ekaterina Prigara said, somehow my TSLint was disabled. I needed to re-enable it via Settings | Languages & Frameworks | TypeScript | TSLint. After I re-enabled it I restarted my WebStorm and got the error: Error: Initialization error (typescript). Cannot read property 'createHash' of undefined. I then removed my node_modules folder and reinstalled it via npm install. After that everything was working again.

Angular 2 CLI and yfiles for HTML 2.0.0 - Cannot read property 'GraphComponent' of undefined

THE PROBLEM
I am trying to integrate yfiles for HTML into an Angular 2 application that uses the Angular CLI. I am using the latest version of Angular 2 and the latest BETA release of the CLI.
I have installed the types using npm install --save #types/yfiles.
I have placed the required yfiles folders in my project and have updated angular-cli.json to include the required sytles and scripts:
"styles": [
"../lib/yfiles.css"
],
"scripts": [
"../lib/license.js",
"../lib/yfiles/view-component.js",
"../lib/yfiles/view-layout-bridge.js",
"../lib/yfiles/layout-hierarchic.js",
"../lib/yfiles/layout-tree.js",
"../lib/yfiles/router-polyline.js",
"../lib/yfiles/router-other.js"
],
I have confirmed that a build includes these scripts in the bundled scripts output after running ng build.
When trying to reference yfiles the autocomplete works in the IDE (latest Webstorm):
graphComponent: yfiles.view.GraphComponent;
constructor(private element: ElementRef,
injector: Injector,
resolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
let containerDiv:HTMLDivElement =
this.element.nativeElement.getElementsByClassName('graph-control-container')
[0];
this.graphComponent = new yfiles.view.GraphComponent(containerDiv);
}
The project compiles and runs when ng serve is issued BUT when I navigate to a route that activates the component that is trying to use yfiles, an error is thrown and reported in the console:
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined
I have tried importing the yfiles modules - for example:
import 'yfile/view-component'
This just prevents ng serve from building the application:
ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
# ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
# ./src/app/app.module.ts
# ./src/main.ts
# multi main
Any assistance appreciated.
The scripts provided in the app.scripts array will just be loaded as if they would have been referenced with regular <script> tags - no module resolving will take place at all.
However, the yFiles modules you provided in the scripts array are "meta modules" that would load the actual implementation files using AMD/CommonJS-style define/require statements.
Therefore, in order to load the yFiles functionality with angular-cli, you will have to provide the actual implementation files directly:
"scripts": [
"./assets/yfiles/license.js",
"./assets/yfiles/lib/yfiles/impl/lang.js",
"./assets/yfiles/lib/yfiles/impl/graph-core.js",
"./assets/yfiles/lib/yfiles/impl/core-lib.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
"./assets/yfiles/lib/yfiles/impl/algorithms.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
"./assets/yfiles/lib/yfiles/impl/graph-binding.js",
"./assets/yfiles/lib/yfiles/impl/layout-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
"./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
"./assets/yfiles/lib/yfiles/impl/layout-router.js",
"./assets/yfiles/lib/yfiles/impl/layout-tree.js",
"./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],
It's unfortunate that the modules can't be resolved automatically with this approach even though the yFiles modules adhere to the UMD pattern, but I don't see a better option to make this work with angular-cli right now.
To generate the list of the yFiles implementation modules in the correct order, you can use our yeoman generator with the "script-tags" option:
https://www.npmjs.com/package/generator-yfiles-app

forwardRef not identifying ng2 module when they are in seperate files

I have been trying to use ng-upgrade as an upgrade strategy to angular2
with limited success, I have successfully added an angular2 app and downgraded
it's components, but the implementation is not very flexible.
I get an error saying
ReferenceError: MainModule is not defined
It seems like UpgradeAdapter must be instantiated in the same file as the
angular2 module declaration - which is a problem when introducing multiple,
separate modules with independent downgrades.
I guess my question is... is it the correct way to utilize UpgradeAdapter and if so
is there a way to separate the adapter definition and the module definition into
separate files?
plnkr demonstrating the issue: https://embed.plnkr.co/ZPw9BVBVSZjYbfzkAkpl/
I followed the bootstrap sequence until I found the issue,
it turns out that there were 2 mistakes in my plnkr:
Angular 1 - The ng1 app template used "module-1-component" & "module-2-component" as the downgraded components selector, but it was actually "module1-component" & "module2-component", I misunderstood the camelCase to kebab-case conversion in ng1.
Angular 2 - The ng2 module declarations had "declares" property instead of "declarations".
Updated plnkr demonstration the solution: https://embed.plnkr.co/6gljurzSWWiuk8QHvLFw/
Hope this helps!

bundling angular-permission with webpack

I'm currently in the process of migrating an AngularJS (1.5.8) from a Gulp pipeline to a webpack pipeline.
One of the dependencies we have is angular-permission.
We're relying on the commonjs style (require) and as documented here I added a require('angular-permission') before the declaration of my angular module.
I also added the angular dependencies permission and permission.ui right after ui.router.
The bundling process goes through, however every time we try to load the app we have this error message in the console: Unknown provider: PermissionStoreProvider <- PermissionStore(…)
I guess the problem is because angular-permission is not injecting the services properly but even playing with the require statement, adding provide plugin or few other attempts didn't solve the issue.
So the question is: how can I properly integrate angular-permission with webpack?
Finally found out what it was with the help of a friend. During my transition from bower to npm for client side deps I unintentionally changed the version of angular permission to the latest. And they changed the name of the service to PermPermissionStore (same thing for Role Store)
Related: https://github.com/Narzerus/angular-permission/issues/310

Use AngularJS (Angular1) module from Angular2 project

Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!

Resources