I followed this: https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part
Error:
My URL - - - > http://localhost/home
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its
dependencies) could have been removed, had its name changed, or is
temporarily unavailable. Please review the following URL and make
sure that it is spelled correctly.
Requested URL: /home
Version Information: Microsoft .NET Framework Version:4.0.30319;
ASP.NET Version:4.7.2110.0
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
appcomponent
import { Component } from "#angular/core"
#Component({
selector: "user-app",
template: `
<div>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<ul class='nav navbar-nav'>
<li><a [routerLink]="['home']">Home</a></li>
</ul>
</div>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>
`
})
export class AppComponent {
}
app.routing
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './Components/home.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.module
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
_layout.cshtml
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<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/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
System.import('app/main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Need support please
in your systemjs.config.js change 'npm:': 'node_modules/' to 'npm:': '/node_modules/'
No issues in the code. All good. I was requesting a wrong url.
Also one small change in system.config.js
Instead of 'npm:': 'node_modules/', we need to use 'npm:': '/node_modules/'
Related
I have a Laravel project using vue js.
I made a toggle component with Vue.js to display and hide an element.
But the toggle button does not appear in my page.
What's wrong with my code ? I can find only Hello component appear on the page.
app.js
require('./bootstrap');
import { createApp } from 'vue';
import Hello from './components/Hello.vue';
import Toggle from './components/Toggle.vue';
createApp({
components: {
Hello,
Toggle,
}
}).mount('#app');
Toggle.vue
<template>
<div>
<button #click="toggleVisibility">Toggle</button>
<div v-if="visible">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Toggle',
data() {
return {
visible: true
};
},
methods: {
toggleVisibility() {
this.visible = !this.visible;
}
}
};
</script>
Hello.vue
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
name: 'Hello',
data() {
return {
message: 'Hello world'
};
}
};
</script>
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="app">
<Hello/>
<Toggle>
<p>This will be appeared</p>
</Toggle>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>
I have a problem with my simple application using Vue 3, Vue router 4 & Laravel 8, my problem is that the main component is not loading I need to Ctrl + R to be able to see the main component and for the other component using Vue router nothing is loading properly this is my full code after downloading all the packages and run npm install , npm run dev & npm run watch :
app.js
require("./bootstrap");
import { createApp } from "vue";
import Main from "./components/App.vue";
import router from "./router";
const app = createApp({});
app.component("main-app", Main);
app.use(router);
app.mount("#app");
router.js
import { createRouter, createWebHistory, routerKey } from "vue-router";
import Home from "./components/pages/Home.vue";
import About from "./components/pages/About.vue";
import NotFound from "./components/pages/NotFound.vue";
const routes = [
{
path: "/Home",
name: "Home",
component: Home,
},
{
path: "/About",
name: "About",
component: About,
},
{
path: "/:catchAll(.*)",
component: NotFound,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
// export default createRouter({
// history: createWebHistory(),
// routes,
// });
welcome.blade.php I named app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<main-app />
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
App.vue
<template>
<h1>Hello from the main app</h1>
<div id="nav">
<router-link to="/Home">Home</router-link> |
<router-link to="/About">About</router-link>
</div>
<router-veiw />
</template>
<script>
export default {};
</script>
About.vue, Home.vue & NotFound.vue
They have the same code so no need to write them again in each file I change x
<template>
<p>Hello from X component</p>
</template>
<script>
export default {};
</script>
and finally web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Back\DashboardController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// Call main path
Route::get('/', function () {
return view('app');
});
So I am trying to build a new Laravel app with Vue. For some reason, the example component that the app comes with works fine, but my own doesn't. Here's my file structure and code:
views/layout/vue.blade.php
<html>
<head>
<title>Skat</title>
</head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<body>
<div id="app">
#yield("content")
</div>
<script src="/js/app.js"></script>
</body>
</html>
resources/views/vue.blade.php this is working fine!
#extends('layouts.vue')
#section('content')
<example-component></example-component>
#endsection
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
some stuff ..
</div>
</template>
<script>
export default {
name: 'example-component',
mounted() {
console.log('Component mounted.')
}
}
</script>
resources/views/home.blade.php this is NOT working :(
#extends('layouts.vue')
#section('content')
<home></home>
#endsection
resources/js/components/Home.vue
<template>
<div class="container-fluid d-flex h-100 flex-column">
test test
</div>
</template>
<script>
export default {
name: 'home',
components: {
}
}
</script>
<style scoped>
...
</style>
routes/web.php
Route::get('/', function () {
return view('vue');
});
Route::get('/home', function () {
return view('home');
});
resources/js/app.js
...
import ExampleComponent from './components/ExampleComponent.vue';
import Home from './components/Home.vue';
const app = new Vue({
el: '#app',
components: {
ExampleComponent,
Home
}
});
I am not getting any errors or anything. I guess somewhere I didn't set it up right, but I'm confused!
Thanks! :)
Don't use components: {} on the root instance. Explicitly declare it with:
Vue.component('example-component', ExampleComponent).
Even better.
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
I'm trying to implement an angular 2 app as a joomla component, using angular2 release candidate 1. But I am having trouble getting routing to work. I think the problem have something to do with the fact that the url to the angular app is
localhost/index.php?=com_mycomponent
I have the following code:
index.html
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<!--<link rel="stylesheet" href="components/com_mycomponent/app/lib/bootstrap.min.css">-->
<link rel="stylesheet" href="components/com_mycomponent/app/styles/styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="components/com_mycomponent/app/lib/shim.min.js"></script>
<script src="components/com_mycomponent/app/lib/zone.js"></script>
<script src="components/com_mycomponent/app/lib/Reflect.js"></script>
<script src="components/com_mycomponent/lib/system.src.js"></script>
<script src="components/com_mycomponent/app/lib/system.config.js""></script>
<script>
System.import('components/com_mycomponent/app/scripts/bootstrapper').catch(function(err){ console.error(err); });
</script>
<base href="/">
</head>
<!-- 3. Display the application -->
<body>
<body>
<my-app>Loading...</my-app>
</body>
</body>
</html>
bootstrapper.ts
import {bootstrap} from '#angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '#angular/router';
import {ShellComponent} from './shell.component';
import {HTTP_PROVIDERS} from '#angular/http';
bootstrap(ShellComponent, [
HTTP_PROVIDERS,
ROUTER_PROVIDERS
]);
shell.component.ts
import {Component} from '#angular/core';
import {Http} from '#angular/http';
import { ROUTER_DIRECTIVES, Routes} from '#angular/router';
import {BComponent} from 'b.component';
import {AComponent} from 'a.component';
#Component({
selector: 'my-app',
templateUrl: 'components/com_mycomponent/app/html/shell.html',
directives: [ROUTER_DIRECTIVES]
})
#Routes([
{
path: '/b',
component: BComponent
},
{
path: '/',
component: AComponent
}
])
export class ShellComponent{
constructor() {
}
// ngOnInit() {
// this.router.navigate(['/egendefinertrapport']);
// }
}
shell.html
<a [routerLink]="['/b']">BComponent</a>
And I get the following error message:
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined
I've tried changing the bash href to '/index.php?option=com_atkstat', including the routerLink and paths - but to no avail. Any takers?
I guess you need to provide a custom RouterUrlSerializer (new RC router) and a custom LocationStrategy in beta.x (RC router-deprecated) to customize which part of the URL is used or ignored by the Angular router.
I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:
http://localhost/app.html/pizza
This is the sourcecode inside of app.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum"
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">
</div>
Modified from JoeyP's post to make it work:
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
templateUrl: "yum.html" // there was a typo here in the OP
})
.otherwise( {
redirectTo: '/'
});
});
app.controller("AppCtrl", function ($scope) {
$scope.message= "this is my app";
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
Go get some pizza! {{message}}
</div>
yum.html
<p>
MMMM, pizza
more pizzaaaaaaaa
</p>
Note: The code need to be run on web-server (ex. Apache) to function.
app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.
On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example
index.html (excluding <html>,<head>,<body>, etc)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum.html" // there was a typo here in the OP
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
<p ng-bind="model.app"><p>
<a ng-href="/pizza">Go get some pizza!</a>
</div>
yum.html
<p>
MMMM, pizza
</p>
The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.
John from egghead.io really needs to update this section of his tutorial.
See this answer:
Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
you need to add this dependency:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module("app", ['ngRoute']);
P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")