I'm new to Angular2, till now I got succeeded to write the 5 Min Quickstart.
I want to learn how to use routing in Angular2 and Dart, unfortunately I couldn't find any example on the web yet. most of the articles are talking about routing with typescript which I couldn't get it work with dart.
I'm using webstorm with dart plugin.
import 'dart:html';
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
import 'package:angular2/router.dart';
#Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
class AppComponent {}
void main() {
bootstrap(AppComponent);
}
Try this HashLocationStrategy example.
https://github.com/ng2-dart-samples/todomvc
I found this tutorial quite helpful to set up routing in my application.
Related
I am new to Angular Dart. I have installed Dart, and added dart plugin in VS code. Then I created a bare bone project thru VS command pallette. But when I added this line in main.dart, I got build error. It is as recommended by angular dart i.e
angular dart
Here is my main.dart file.
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_web_application/app_component.dart' as ng;
import 'package:http/browser_client.dart';
#GenerateInjector([
ClassProvider(Client, useClass: BrowserClient),
])
void main() {
runApp(ng.AppComponentNgFactory);
}
Here is my app_component.dart
import 'package:angular/angular.dart';
#Component(
selector: 'my-app',
template: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
var name = 'Angular';
}
In my index.html, I have this line
<my-app>Loading</my-app>
But I am facing build error for the line
runApp(ng.AppComponentNgFactory);
I get this error:
"message": "The name 'AppComponentNgFactory' is being referenced through the prefix 'ng', but it isn't defined in any of the libraries imported using that prefix.\nTry correcting the prefix or importing the library that defines 'AppComponentNgFactory'.
The factory is not declared in the app_component.dart.
It is generated by Angular compiler
import 'package:angular_web_application/app_component.template.dart' as ng;
Which should have the right implementation.
See What does somecomponent.template.dart import in AngularDart point to? for example.
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.
But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.
import { Routes, RouterModule } from '#angular/router';
import { Contest } from '../pages/contest/contest';
export const appRoute: Routes = [
{ path: '', redirectTo: 'Contest', pathMatch: 'full' },
{ path: 'Contest', component: Contest}
]
export const appRouting = [
RouterModule.forRoot(appRoute)
];
I imported this statement into app.component.ts and injected it into the constructor.
import { Router } from '#angular/router';
constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();
In the app.module.ts I imported the following statements and also set them in the imports inside #ngModule
import { RouterModule, Routes } from '#angular/router';
import {appRouting} from './app.routing';
imports: [appRouting,
IonicModule.forRoot(MyApp)
]
I put the <router-outlet></router-outlet>
in my app.html file.On doing all this when I try to run I get the following errors.
Runtime Error:
WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'NgProbeToken
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'Version'.
I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions
I'm using:
Ionic2 : v2.2.1
npm: 3.10.10
cordova : 6.5.0
Angular2: Final Release rc5
Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?
Make sure you're dependencies are set according to what's specified in ionic change log:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.
I tried to use the router in angular2-beta.20 in Dart with the HashLocationStrategy.
But I couldn't find any docs, except for
this link to angular2-beta.15 docs, which are incomplete.
The example shows TypeScript imports instead of Dart ones.
So I tried to import package:angular2/router.dart, but the Dart Analyzer keeps complaining that it can not find LocationStrategy and HashLocationStrategy
Also I don't know, how to write the import exactly, because a top-level provide function, as in the example above, seems non existent.
provide(LocationStrategy, {useClass: HashLocationStrategy})
After some research I found the following:
LocationStrategy and HashLocationStrategy are now part of
package:angular2/platform/common.dart instead of package:angular2/router.dart.
The bootstrap()- method is platform specific, so we need to import package:angular2/platform/browser.dart.
We need to import package:angular2/router.dart to have ROUTER_PROVIDERS available in bootstrap() method.
Here is a working code example for the dart file initializing :
// needed to import "bootstrap" method
import 'package:angular2/platform/browser.dart';
// needed to import LocationStrategy and HashLocationStrategy
import 'package:angular2/platform/common.dart';
// needed for Provider class
import 'package:angular2/angular2.dart';
// needed to import ROUTER_PROVIDERS
import 'package:angular2/router.dart';
// import your app_component as root component for angular2
import 'app_component.dart';
void main() {
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
const Provider(LocationStrategy, useClass: HashLocationStrategy)
]);
}
Hope this helps somebody! :)
I'm trying to run this simple code from here
import 'package:angular/angular.dart';
void main() {
ngBootstrap();
}
But i recieve this error:
The function 'ngBootstrap' is not defined
Any idea about what's happening? I already tried 'pub get'.
Lastest angular version is 0.9.11.
So, you must use ngDynamicApp().addModule(new MyAppModule()).run(); instead of ngBootstrap(module: new MyAppModule());, and add import 'package:angular/angular_dynamic.dart'; in your main.dart.
Lastest angular version is 0.10.0.
So, now you must use applicationFactory().addModule(new MyAppModule()).run(); instead of ngDynamicApp().addModule(new MyAppModule()).run();,
and always add import 'package:angular/angular_dynamic.dart'; in your main.dart.
Be careful, many thing has changed, like we use Component without #... etc.