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.
Related
I am trying to use mat-dialog in my angular custom element. I works fine when in the angular app but can't seem to bundle the material theme while building to custom element.
When i inspect the code outside of angular app, no style is attached to any of the cdk class. Everything seem to work fine when running in the angular server. How do i include the needed css with the custom element?
My app.module file
#NgModule({
[ ...
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatDialogModule,
...
],
providers: [ConnectBackendService],
entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('my-element', <Function>el);
}
ngDoBootstrap() {}
}
and my styles.css file
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
My dialog should have absolute positioning, should be aligned to the center of the window and should have a backdrop. Currently, none of these applies to the dialog box
I had the same issue and i reported it to Google on their GitHub page for Angular components. It is now tagged as "Low-priority issue that needs to be resolved" by Google.
https://github.com/angular/components/issues/15968
Just letting you and anyone else who sees this thread know so that they can find a possible future fix in my github post when/if Google fixes this issue.
Fixed it by going to angular.json file, changed extractCss property to false and added styles.js to build files
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!
Question
What do I need to do to get my Angular application to allow me to use the templateUrl property of the Component decorator? When you create a new Rails 5.1 application and use the flag --webpack=angular, it gives you a proof of concept Angular application, but as soon as I started creating more components, I began to recognize that I don't know how to refer to the correct path that the templates are being served. I'm not even sure if they are being served, to be honest.
What I've tried
Tried many different variations of the path, from just the file name all the way to the root of the application, one folder at a time.
Googling for someone else running into the same problem.
include the CommonModule in my imports in app.module.ts.
Background
I'm really used to using the Angular CLI and I don't remember ever having an issue using the templateUrl property. What is different about an Angular CLI project to what's given to you in a Rails 5.1 app in terms of configuration affecting templates? Would I be able to use Angular CLI in a Rails 5.1 app without having to change much of the Rails app itself?
Can be done. But this needs a different webpack loader setup and several minor tweaks.
But first: shopping!
$ yarn add \
html-loader \
awesome-typescript-loader \
angular2-template-loader \
#types/node \
--dev
With all required packages installed replace config/webpack/loaders/angular.js with this:
const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { useCache: !isProd }
},
'angular2-template-loader'
]
};
angular2-template-loader scans your Component decorators for the templateUrl argument and replaces it with something like template: require('...')'. The require() call is the reason for installing #types/node by the way.
awesome-typescript-loader is a bit more optimized than the default ts-loader (which will probably work here as well, but I didn't test it).
So far so good. Next we need to tell webpack how to actually load HTML files. Add config/webpack/loaders/html.js with the following content:
module.exports = {
test: /\.html$/,
loader: 'html-loader',
};
Nothing obscure here. Moving on.
In your Javascript app add type informations for *.html files to app/javascript/hello_angular/html.d.ts:
declare module "*.html" {
const content: string
export default content
}
This tells the TypeScript compiler that require('template.html') returns a string.
Last but not least you have add .html to the recognized extensions in config/webpacker.yml:
default: &default
# ...
extensions:
# ...
- .html
# ...
Now you should be good to go:
import { Component } from '#angular/core';
#Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
Don't forget to restart bin/webpack-dev-server.
Theoretically you could do the same for styleUrls. But this is more tangled with rails/webpacker and you would loose some of it's features.
I currently have this directory layout:
project
web
app.html
main.dart
templates
app.html
alerts.html
menu.html
components
AppComponent.dart
AlertsComponent.dart
MenuComponent.dart
resources
css
bootstrap.css
My components look like:
#Component(
selector: 'app',
templateUrl: 'templates/app.html'
)
class AppComponent { ... }
My application's index.html (in another project) is served from /client, and project/web is served from /project. The above works in Dartium, but I get errors from pub build:
[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
#Component(
^^^^^^^^^^^
and
[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.
and
[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.
depending on what combination of paths I use in templateUrl and html_files (for Angular's transformer).
What, exactly, should go where and how should it be referenced in templateUrl and pubspec.yaml?
Update: I can get rid of my build errors by moving my templates to the lib directory and using templateUrl: 'packages/project/templates/app.html', but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.
but then Dartium tries to load that as
/packages/project/templates/app.html, and not
/project/packages/project/templates/app.html, which would be correct.
I don't see any way to tell it what the base URL is.
I believe you are using angulardart 1.1.1 or 1.1.2? We had the same issue in our project after switching from 1.1.0 to 1.1.2. This is weird behaviour that was added since version 1.1.1.
For some reason default package root in AngularDart now is '/packages/'. This causes generation of root-relative URLs. In your case it generates
/packages/project/templates/app.html
instead of
packages/project/templates/app.html
It's OK while you app is in the root of your domain. But in your case what you need to do is to add following to your initialization method in main.dart:
bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
.resolveRelativeUrls(true, packageRoot: 'packages/'));
This will override angular's default packages root and will make it generate correct relative URLs.
Hope it helps.
I have an app that I've primarily built in AngularDart v0.12 that was building into and running in JS just fine, but after upgrading to AngularDart v1.0 and accounting for the breaking changes, it fails to run in JS now after building to it without a problem. When attempting to run in Chrome the console gives the following error:
Uncaught Type "QueryService" not found in generated typeFactory maps
The following is my pubspec.yaml config:
name: ###
author: ###
description: ###
homepage: ###
transformers:
- angular:
dart_sdk: "C:/dart/dart-sdk"
suppressWarnings: false
- $dart2js:
suppressWarnings: false
minify: false
checked: true
dependencies:
angular: any
angular_dart_ui_bootstrap: any
bootjack: any
browser: any
chrome: any
di: any
dquery: any
google_oauth2_client: any
http_server: any
inject: any
js: any
logging: any
mock: any
mongo_dart: any
route: any
shadow_dom: any
shelf: any
shelf_route: any
shelf_web_socket: any
sqljocky: any
unittest: any
The following is my module class:
class AppModule extends Module{
AppModule(){
/*
* Services, Routers, and Controller
*/
bind(QueryService);
bind(RoutingService);
bind(RouteInitializerFn, toValue: initRoutes);
bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
/*
* Components
*/
bind(Login);
bind(Dashboard);
bind(SideNav);
}
}
The following is the QueryService class:
#Injectable()
class QueryService{
Http _http;
Scope _scope;
QueryService(Http this._http, Scope this._scope){
someFunction();
}
}
Just to reiterate, this application is working fine when run using the DartVM, but doesn't seem to want to inject the QueryService when built into JS.
Also, I'm aware this may be very similar to this question, but the solution doesn't appear to have any effect in my case, and the AngularDart version is newer.
The #Injectable annotation should trigger the generation of the factory.
If it's not may be you are not running the angular transformer ?
You pubspec should list this transformer, ie:
name: myApp
dependencies:
angular: ">=1.0.0 <2.0.0"
transformers:
- angular
Apparently I was importing my app's library directly via a relative path in my main.dart file instead of importing it as a package. This caused a duplicate declaration of the library which must have given the transformer some issues. I basically just had to change my import on my main.dart file from
import '../library/src/app.dart';
to
import 'package:myPackage/app.dart'