ng2-bootstrap module in visual studio 2015 - angularjs

I'm trying to import ng2-bootstrap module in VS project.
I fetch this github repo and it start successfully after adding "moment": "2.11.2" to tsconfig.json.
In VS I do almost the same, adding "ng2-bootstrap": "1.0.5", "moment": "2.11.2" to tsconfig.json, VS restoring it to Dependencies. Then with gulp I move ng2-bootstrap.min.js, moment.js to root app directory and bundle it to index.html and moment.js map in system.js configuration as map: { moment: 'libs/moment.js }.
After adding Alert component to my angular class:
import {Component, OnInit} from 'angular2/core'
import {Router} from 'angular2/router'
import {HeroService} from './hero.service'
import {User} from './user'
import {Alert} from 'ng2-bootstrap/ng2-bootstrap'
//declare var jwt_decode: any;
#Component({
selector: 'login',
templateUrl: 'app/login.component.html',
styleUrls: ['app/login.component.css', 'app/css/bootstrap.css', 'app/css/styles.css'],
directives: [Alert]
})
After build I take a following error:
Error TS2307 Build: Cannot find module 'moment'. ASPAngular2Test E:\Development\C#\ASP.NET\ASPAngular2Test\src\ASPAngular2Test\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts 1
I insert this <script src="libs/moment.js"></script> into my index.html
and declare a variable in date-formatter.ts like declare var moment: any, error is gone, but after bulding bootstrap tags has no effect.
Project Solution Structure
And in mysterious way i get compiled node_modules/ng2-bootstrap and my all ts files in wwwroot/app/scripts directory. I replaced compiled js files in wwwroot/app/and it's also has no effect. My application don't see native properties of ng2-bootstrap components. Maybe someone faced with this sort of problem?

you are adding ng2-bootstrap to tsconfig.json?
Shouldn't it be added to package.json?

Related

Typescript+AngularJS+Webpack modules without default export

I'm using Webpack to bundle AngularJS with Typescript (with the default setup suggested here) and I cannot include modules that do not have default exports, such as ui-bootstrap. Modules such as ui-router do not have such problem since their typings mention a default export.
JS code works:
import * as angular from 'angular';
import router from 'angular-ui-router';
import uibootstrap from 'angular-ui-bootstrap';
angular.module('app', [uirouter, uibootstrap]);
However the same code in Typescript (target: es6, module: es6, all settings same as those mentioned in webpack guide) drops error:
Module "node_modules/#types/angular-ui-bootstrap/index" has no default export.
Using angular.module('app', [uirouter, 'ui.bootstrap']); instead throws a 'ui.bootstrap' not found error.
You can set allowSyntheticDefaultImports to true in your tsconfig.json to continue importing import uibootstrap from 'angular-ui-bootstrap'; as if angular-ui-bootstrap had a default export.
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
It seems using a simple import 'angular-ui-router' works.

#angular/cli build issue with default class

I am playing around with the #angular/cli tool for projects and building and am having an issue with one of the classes.
I am trying to add a component that is lazyloaded on access of the route:
App route:
const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module'
}
];
And a module that loads the components and routes (currently just a simple component that says "Dashboard"):
import { NgModule, ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {
DashboardComponent,
DashboardRoutingModule
} from './index';
#NgModule({
imports: [DashboardRoutingModule],
declarations: [DashboardComponent]
})
export default class DashboardModule { }
When I run ng serve the web page starts as expected and I can develop / see what I am working on.
When I run ng build the project builds ok without any issues.
When I run ng build --prod --aot it returns an errors and a warnings:
WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
31:38-61 "export 'DashboardModule' (imported as 'import1') was not
found in '../../../app/dashboard/dashboard.module'
WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
46:23-46 "export 'DashboardModule' (imported as 'import1') was not
found in '../../../app/dashboard/dashboard.module'
WARNING in ./src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
58:91-114 "export 'DashboardModule' (imported as 'import1') was not
found in '../../../app/dashboard/dashboard.module'
ERROR in C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
(1,1): Namespace '"C:/wamp/www/api/data-portal/src/app/dashboard/
dashboard.module"' has no exported member
'DashboardModule'.C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
(1,1): Namespace
'"C:/wamp/www/api/data-portal/src/app/dashboard/dashboard.module"' has
no exported member 'DashboardModule'.
C:/wamp/www/api/data-portal/src/$$_gendir/app/dashboard/dashboard.module.ngfactory.ts
(1,1): Namespace
'"C:/wamp/www/api/data-portal/src/app/dashboard/dashboard.module"' has
no exported member 'DashboardModule'.
If I remove the keyword default from the export of the Dashboard Module, it builds without any issues however then the app doesn't work as it can't find a default, however if I add in the default again it breaks the production build.
Any ideas/thoughts as to what I am doing wrong? I am really confused as ng serve works and ng build works with the default keyword, but ng build --prod --aot does not
I managed to fix this by changing the way I was doing the routing.
Instead of:
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module'
}
I used:
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
}
Removing the need for a default in the dashboard module - works perfectly in case anyone has the same issue as me.

Loading React 15.4 with System.js fails with "require is not defined" error

I've been using System.js to load my React 15.3.2 dependency into my application:
System.config({
"defaultJSExtensions": false,
"map": {
"react": "vendor/assets/react/react.js",
"react-dom": "vendor/assets/react/react-dom.js"
}
});
System.import("js/main.js");
My main.js is importing React:
import React from "react";
import ReactDOM from "react-dom";
With version 15.3.2 everything works fine. I'm able to create components, render them etc.
With version 15.4 System.js fails with an error message:
Uncaught (in promise) Error: (SystemJS) require is not defined
I'm using Babel with es2015 prefix.
It seems like the React 15.4 structure is completely different and ReactDOM cannot be loaded the same way as before?
Read more about this issue here:
https://github.com/facebook/react/issues/8301

AngularJS 2 error: enableProdMode is not defined

I'm use https://angular.io/guide/quickstart to start learn Angular2, but I notice there's console log "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." So I added to main.ts as following.
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
enableProdMode();
bootstrap(AppComponent);
Now the browser has error
enableProdMode is not defined(…)
So I found this article https://github.com/angular/angular/issues/6096.
Looks like I'm doing it right, and works on others, so maybe my package files or npm modules has something is wrong? please help, or do you know which module is using enableProdMode?
Seems like you missed to import enableProdMode
import {enableProdMode} from '#angular/core';

AngularJS 1 to Angular 2 Upgrade Strategy

I decide to prepare updating my application from angular1.x to angular2.x. There is I have no find something useful. I have studied this document about 1 to 2 upgrade strategy. I figured out that all magic in migration is that you have to start Angular 1 and 2 in one time with Angular 1 in the root of the application, cut off the Angular1 unsupported code(filters, decorators and etc) and adapt(read wrap!) all Angular1 supported code(directives, services and etc).
The document that I have given above, you can see the pseudo code of the wrappers. I think if I wrap all of my current code - it doesn't explicitly give it speed. Who really have experience about it, write please how is it in real? Can I feared that my application starts to slow down, and may be easier to rewrite it once a new Angular2? But it`s very big, it will be a big piece of work and I have to think before. That why I ask about real experience who have production real life big projects and already migrated.
Also, I want to ask how I check libraries compatibilities. Maybe there is some service that checks my app and output results what libraries are good and what fails?
Yes, You can use both Angular 1 & Angular 2 in the same application. Just follow the below steps:
First of all you need to create "package.json" with all required angular 2 dependencies + #angular/upgrade
Create "tsconfig.json" and set "module": "system" in "compilerOptions" object. (To avoid require js errors)
Create "system.config.js" file (you can copy this file from angular 2 quick-start repo.). Don't forget to add '#angular/upgrade/static': 'npm:#angular/upgrade/bundles/upgrade-static.umd.js' bundle in a map object.
Include JS files for Reflect.js, zone.js, and system.config.js in your index.html just before the </body> tag (To avoid reflect-metadata & zone js errors).
Add this code just below that to import your app:
<script type="text/javascript">
System.import('app').catch(function(error){
console.log(error);
});
</script>
Create "main.ts" file and add below code :
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { downgradeComponent } from '#angular/upgrade/static';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['<app-name>']);
});
angular.module('<app-name>', []).directive('angular2App',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory);
Create "app.module.ts" file and add the below code:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './app.component';
#NgModule({imports: [BrowserModule,UpgradeModule],declarations: [AppComponent],entryComponents: [AppComponent]})
export class AppModule {ngDoBootstrap() {console.log("Bootstrap Angular 2");}}
Create "app.component.ts" file and add below code":
import { Component } from '#angular/core';
#Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'})
export class AppComponent { }
Now add the below code in your Angular 1 view file :
<angular2-app>Loading Angular 2...</angular2-app>
That's it. :)

Resources