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';
Related
I am trying to import npm package ngstorage in my angularjs v1.x (typescript) project using #types/ngstorage
the index.d.ts contains
declare namespace angular.storage {
export interface IStorageService {
}
}
if I do like below in my .ts files
import * as angular from 'angular';
var storage: angular.storage.IStorageService;
I am getting compilation error
namespace angular and no exported member storage
finally I was able to get it work
import { ngStorage } from 'ngStorage';
the namespace and not the package name should matter when doing an import
I've been trying to setup angular 1 with webpack and ran into an issue with import modules, let's say I want to import ramda from node_modules
import angular from 'angular';
import uirouter form 'angular-ui-router';
import routing from './app.config';
import * as ramda from 'ramda';
angular.module('app', [uirouter, ramda])
.config(routing);
I get an error: Argument 'module' is not a function, got Object. If I console ramda, it is indeed an object and I understand I need a string, but I just couldn't figure out how to get it?
Change it to import ramda from"ramda".
This is because the export of the module is the module name.
When you write import * as ramda you import the namespace object, which is an object containing all the exports of that module.
If you are using TypeScript, you may need to add a allowSyntheticDefaultImports to your tsconfig.json.
allowSyntheticDefaultImports
I have followed the official tutorial to set up react, typescript and webpack from here: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Until this point it runs, fine.
Now I want to use the foundation CSS framework.
So I ran npm install --save foundation
Then I modified my TSX file to look like:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<a class="button" href="#">Default Button</a>,
document.getElementById("example")
);
Finally, I ran webpack.
However, when I open the generated index.html, the "button" is not there, just a link, which means the style was not applied.
In my /dist folder, I don't see anything related to css...
It seems that I'm missing something. Is there additional configuration that I have to do with webpack?
At first, foundation is installed as
npm install --save foundation-sites
then you need to include foundation in your root css file like
#import 'foundation';
and finally you need to alias it inside webpack config. For example when you are using sass loader
module: {,
sassLoader: {
includePaths: [
path.resolve(__dirname, "./node_modules/foundation-sites/scss")
]
}
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?
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. :)