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>
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".
I am trying to learn Angularjs2 and make my first app but its not working fine and also not showing any error. I have made "my-app" component with some html "Angular 2 First App Here is my component", this one is working fine but when I have made new component named "my-component" with text "Hi, I am {{name}}" its not showing in the browser.
Also when I am trying to remove text form "my-app" like:
Text is: "Angular 2" so it shows my previous text which is "Angular 2 First App"
Please check what I am doing wrong in the below code:
index.html:
<!doctype>
<html>
<head>
<base href="/angular2_project/">
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.component.ts:
import {Component} from 'angular2/core';
import {MyComponentComponent} from './my-component.component';
#Component({
selector: 'my-app',
template: `
<h1>Angular 2 First App</h1>
<h2>Here is my component</h2>
<my-component></my-component>
`,
directives: [MyComponentComponent],
})
export class AppComponent {
}
my-component.component.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
Hi, I am {{name}}
`,
})
export class MyComponentComponent {
name = 'Ovais';
}
I am learning Angular 2 from the official tutorial. I have just completed the latest routing tutorial. What keeps bothering me is that I am able to click through to the path till the detail level which is something like 'http://domainname:portnumber/crisis-center/11' where 'crisis-center' is a subpath and '11' is the id passed in a parameter.
what I found is if I navigate from the root path which is 'http://domainname:portnumber', then I could go through to the detail page without any trouble. But if I open a new window and directly visit the detail view page then it gives me error says
which I believe is a failure of loading the loading 'js' files.
I have already had the base ulr tag
in the index.html page
<html>
<head>
<title>Tour of Heroes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
and here is my path settings
import {RouterConfig} from '#angular/router';
import {CrisisDetailComponent} from './crisis-detail.component';
import {CrisisListComponent} from './crisis-list.component';
import {CrisisCenterComponent} from './crisis-center.component';
import {CrisisAdminComponent} from './crisis-admin.component';
import {AuthGuard} from '../auth.guard';
export const CrisisCenterRoutes: RouterConfig = [
{
path: '',
redirectTo: '/crisis-center',
terminal: true
},
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{ path: 'admin', component: CrisisAdminComponent, canActivate: [AuthGuard] },
{ path: ':id', component: CrisisDetailComponent },
{ path: '', component: CrisisListComponent }
]
}
]
Has anyone had similar issue and fixed it?
Thanks
I believe you are missing one tiny line in your main index.html:
<base href="/">
as mentioned here https://angular.io/docs/ts/latest/guide/router.html#!#base-href
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