I'm making an angular 1 application with typescript and components. But my views arn't loaded.
and I can't seem to figure out why, the ui-router is working and my components are loading as wel if I include them in my index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular typescript webpack</title>
</head>
<body ng-cloak>
<a ui-sref="app.home" ui-sref-active="active">Hello</a>
<a ui-sref="app.about" ui-sref-active="active">About</a>
<messages-application></messages-application>
</body>
</html>
app.ts
import './modules/_application/index';
import './modules/about/index';
import 'angular';
angular.module('app', [ 'app.application', 'app.about']);
angular.bootstrap(document, ['app'], {
strictDi: true
});
modules/_application/index.ts
import 'angular';
import 'angular-ui-router';
import {config as routesConfig} from './configs/routes';
import {MessagesApplicationComponent} from './components/messagesApplication/MessagesApplicationComponent';
angular.module('app.application', ['ui.router'])
.component('messagesApplication', new MessagesApplicationComponent())
.config(routesConfig);
modules/_application/configs/routes.ts
config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
let abstractState: ng.ui.IState = {
abstract: true,
name: 'app',
component: 'messages-application'
};
$stateProvider.state(abstractState);
}
modules/_application/components/messagesApplication/messagesApplicationComponent.ts
export class MessagesApplicationComponent implements ng.IComponentOptions {
template: string = `
<h1>Messages application</h1>
<div ui-view></div>
<h3>test</h3>`;
}
and then i have a route for my about
modules/about/index.ts
import 'angular';
import 'angular-ui-router';
import {PageAboutComponent} from './components/pageAbout/PageAboutComponent';
import {config as routesConfig} from './configs/routes';
angular.module('app.about', ['ui.router'])
.component('pageAbout', new PageAboutComponent())
.config(routesConfig);
modules/about/configs/routes.ts
config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
let aboutState: ng.ui.IState = {
name: 'app.about',
url: '/about',
component: 'page-about',
parent: 'app'
};
$stateProvider.state(aboutState);
}
modules/about/components/pageAbout/pageAboutComponent.ts
export class PageAboutComponent implements ng.IComponentOptions {
public template: string = `
<div>
<ul>
<li>Typescript</li>
<li>Webpack</li>
<li>Angular 1.4</li>
<li>Karma</li>
<li>Jasmine</li>
<li>Istanbul coverage</li>
</ul>
</div>`;
}
anybody knows what I might be forgetting or doing wrong?
Related
I am trying to make Angular routing in my AngularJS/Angular hybrid application.
I created app-routing.module.ts file :
import { ModuleWithProviders } from "#angular/core";
import { Routes, RouterModule, ExtraOptions } from '#angular/router';
import {SignInComponent} from "./modules/login/components/sign-in/sign-in.component";
import {ActivationComponent} from "./modules/login/components/activation/activation.component";
const routes: Routes = [
{
path: 'sign-in',
component: SignInComponent
},
{
path: 'activation',
component: ActivationComponent
},
{
path: '',
pathMatch: 'full',
redirectTo: '/activation'
},
{
path: '**',
pathMatch: 'full',
redirectTo: '/activation'
}
];
export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);
in app.module.ts I added routingModule to "imports" array and in app.component.html I added :
<button (click)="goto('sign-in')">go to home</button>
<button (click)="goto('activation')">go to product</button>
<router-outlet></router-outlet>
When insight by index.html i am using just Angular it works perfectly
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
But when I am adding my AngularJS code just adding
this.upgrade.bootstrap(document.body, ['app']);
my current Angular routing instead reload content of "router-outlet" tag, reloads completely the page. If I remove
this.upgrade.bootstrap(document.body, ['app']);
it works fine.
Does anybody had some similar issues and maybe someone can propose some scenario how to make Angular routing work appropriately insight hybrid AngularJS/Angular application?
Thanks
It looks like you have not configured the AngularJS and Angular Router in the correct way, please verify the below steps-
Default route (.otherwise) should be removed from AngularJS routing.
Implement the 'UrlHandlingStrategy' interface as a part of Angular router config settings to handle the routing for specific URLs. This will avoid the Angular router conflict with AngularJS router-
export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: UrlTree): boolean {
return url.toString().startsWith('/ng/');
}
extract(url: UrlTree): UrlTree { return url; }
merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree { return newUrlPart; }
}
Add above class (Ng1Ng2UrlHandlingStrategy) as a provider in the root module for URL handling strategy-
providers: [
{ provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
]
Add both AngularJS and Angular outlet/directive in the app component html
<router-outlet></router-outlet>
<div class="ng-view"></div>
Hash based routing will work but setUpLocationSync(upgrade) is required to support the html 5 based routing in the hybrid app. Please update the main.ts file like below-
upgrade.bootstrap(document.body, ['app']);
setUpLocationSync(upgrade);
I have downgrade a component written in Angular2 + Typescript. Now I want to use it in simple angular 1 app, But the js file compiled from Typescript is using 'import' and I get from browser it is not supported. What I have missed?
This is a simple angular 2 componenet:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'hello-world',
template: `
<p>
hello from angular 2!
</p>
`,
styles: []
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import * as angular from 'angular';
import { downgradeComponent } from '#angular/upgrade/static';
angular.module('dannyApp', [])
.directive(
'helloWorld',
downgradeComponent({component: HelloWorldComponent}) as angular.IDirectiveFactory
);
This is the simple angular1 app tring to use this angular 2 component above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dist\out-tsc\app\hello-world\hello-world.component.js"></script>
<script>
angular.module('app', [])
.controller('FrameController', ['$injector', function($injector) {
var vm = this;
vm.message = 'Hello from angular 1';
}]);
</script>
<title>Title</title>
</head>
<body ng-app="app">
<div id="body">
<div ng-controller="FrameController as vm">
{{vm.message}}
</div>
<!-- the angular 2 componenet -->
<hello-world></hello-world>
</div>
</body>
</html>
The browser error:
Uncaught SyntaxError: Unexpected token import
on the line:
import { Component } from '#angular/core';
Make sure you have compiled your Typescript component to ES5.
Your code looks like ES6/Typescript.
Check your tsconfig.json and make sure target: "es5".
firstpage_server_side_load.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to myapp</title>
<base href="/temp/angular/" />
<script src="/temp/angular/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/temp/angular/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system.src.js"></script>
<script src="/temp/angular/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/router.dev.js"></script>
</head>
<body>
<nav class="nav set-navigation-tab-nav navigation">
<ul class="set-navigation-tab-nav">
<li class="set-navigation-tab-container">
<a [routerLink]="['home/home']">Home</a>
</li>
<li class="set-navigation-tab-container">
<a [routerLink]="['user/register']">register</a>
</li>
</ul>
</nav>
<script>
System.config({
baseURL: '/temp/angular/',
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
});
System.import('app/main')
.then(null, console.error.bind(console));
document.write('<base href="' + document.location + '" />');
</script>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {Utils} from './util/Utils';
import 'rxjs/Rx';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS } from 'angular2/router';
import {myappComponent} from './myapp.component';
bootstrap(myappComponent,[HTTP_PROVIDERS,Utils,ROUTER_PROVIDERS]);
myapp.component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Home} from './home/component.home';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {RegisterPageComponent} from './register-page/component.register.page';
#Component({
selector: 'my-app',
templateUrl: './app/template/common/my.body.html',
directives:[ROUTER_DIRECTIVES]
})
#RouteConfig([
{
path:"/home/home",component:Home ,name:'Home',useAsDefault:true
},
{
path:"user/register",component:RegisterPageComponent ,name:'User'
},
])
export class myappComponent{ }
Home.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'home',
templateUrl:'./app/template/home/home.html',
host:{
'(submit)':'onSubmit()'},
directives:[ROUTER_DIRECTIVES],
})
export class Home{}
RegisterPageComponent.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'register',
templateUrl:'./app/template/user/register.html',
directives:[ROUTER_DIRECTIVES],
})
export class RegisterPageComponent{}
my.body.html
<my-app>
<router-outlet></router-outlet>
<home>
</home>
<register>
</register>
</my-app>
Explanation I am using XAMPP server, which load firstpage_server_side_load.html page on URL: http://localhost/home/home, Once page get loaded properly typescript get executed in script tag of html. All the required file loaded by this configuration.
main.ts execute configure web page for my applicatioon. All the steps working fine but once everything loaded then url of page get changed to http://localhost/temp/angular/home/home.
Problem: Now if I try to click on Either Register link or Home link both are not working. Even I don't find anything in console as well regarding these link like any error or message.
Please tell me how to make it work.
thanks
I am new to angular and I am trying to use the new component helper in angular 1.5.
My index.html file looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Github Invoicing</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<base href="/">
</head>
<body ng-app="app">
<div ng-controller="mainCtrl as ctrl">
<log-in/>
</div>
</body>
</html>
My app.js file looks like this:
import angular from 'angular';
import logIn from './components/logIn';
angular.module('app', [])
.controller('mainCtrl', function() {
});
My logIn.js file looks like this
import angular from 'angular';
angular.module('app')
.component('logIn', {
template: function($element, $attrs) {
return [
'<div>Content</div>'
].join('');
}
});
I get the following error
Uncaught Error: [$injector:nomod] Module 'app' is not available! You
either misspelled the module name or forgot to load it. If registering
a module ensure that you specify the dependencies as the second
argument.
This is obviously because the app has not been created when the import statement for logIn.js executes from app.js runs.
If this was react or ember, I would be exporting the component somehow but as I'm new to angular, I don't really know what to do.
The only way I can get this to work is define logIn.js like this:
import angular from 'angular';
const logIn = {
template: function($element, $attrs) {
return [
'<div>Content</div>'
].join('');
}
};
export default logIn;
And then create the component in app.js:
import angular from 'angular';
import logIn from './components/logIn';
angular.module('app', [])
.controller('mainCtrl', function() {
}).component('logIn', logIn);
This feels wrong.
you can create another module e.x. component
import angular from 'angular'
angular.module('component',[])
.component('logIn', {
template: function($element, $attrs) {
return [
'<div>Content</div>'
].join('');
}
});
and your app will be depended on this module
import angular from 'angular';
import logIn from './components/logIn';
angular.module('app', ['component'])
.controller('mainCtrl', function() {
});
I'm trying to setup routing inside my application, but am getting following error in the console:
angular2-polyfills.js:138 Error: XHR error (404 Not Found) loading http://localhost:9000/angular2/router.js(…)
here is my boot.ts
// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />
//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
Router,
RouteConfig,
} from 'angular2/router';
// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';
// -- Enable production module -------------------------------------------------
enableProdMode();
// -- Component ----------------------------------------------------------------
#Component({
selector: 'main-app',
directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
template: `
<app-navbar></app-navbar>
<router-outlet></router-outlet>
`
})
// -- Routing ------------------------------------------------------------------
#RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Home'] },
{ path: '/home', name: 'Home', component: HomePage }
])
// -- Class --------------------------------------------------------------------
export class MainApp {
constructor(public router: Router) {}
}
// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
ROUTER_PROVIDERS
]);
and index.html -----
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Angular2 starter</title>
<!-- Application css -->
<link href="dist/libraries/bundle.css" rel="stylesheet"></link>
<link href="dist/styles/main.css" rel="stylesheet"></link>
</head>
<body>
<main-app>Loading...</main-app>
<!-- Application js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="dist/libraries/bundle.js"></script>
</body>
<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('dist/app/boot').catch(console.log.bind(console));
</script>
</html>
You are missing a script router.dev.js which is not shown very clearly in a lot of places and examples.
<script src="/node_modules/angular2/bundles/router.dev.js"></script>