I am getting my head around angular 2 and trying to define a service called searchservice and inject this in the bootstap part:
import {SearchService} from 'src/service';
This is what the service looks like:
import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp} from 'angular2/http';
#Injectable()
export class SearchService {
constructor(private http: Http) {}
search (name: string) {
http.get('https://api.spotify.com/v1/search?q='+name.value+'&type=artist')
.map(response=>response.json());
}
}
However how can I fix this error that comes up when running the app?:
VM337 angular2-polyfills.js:138 Error: Cannot read property 'getOptional' of undefined
Error loading http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/boot.ts
at _runAppInitializers (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14832:25)
at PlatformRef_._initApp (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14813:7)
at PlatformRef_.application (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14768:22)
at Object.bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:25054:64)
at execute (http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/boot.ts!transpiled:60:23)
at u (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:97)
at Object.execute (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:3188)
at y (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:9948)
at w (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:10327)
plunkr ref:http://plnkr.co/edit/F6TSGfyRnR5jvbpiv2QJ?p=preview
The important part of the error is the line above the one you listed, which says:
Cannot resolve all parameters for SearchService(?). Make sure they all have valid type or annotations.
Your search service is trying to define a variable of type Http but you didn't import Http into the service.
change the import line to import {URLSearchParams, Jsonp, Http} from 'angular2/http';.
Related
As I'm using Firebase Cloud Messaging in my React, it requires me to put the firebase-messaging-sw.js in my public folder.
In there, it is defining the function for the onBackgroundMessage, which I want to have an access to my module, and update some of my components in my src.
import { toast } from "react-toastify"; // or import my other modules
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
//toast or do some updating my modules
toast(`Message received : ${payload}`) // here comes the error
});
But I got an error of
Uncaught SyntaxError: Cannot use import statement outside a module (at
firebase-messaging-sw.js:3:1)
How can I import my src module to the public folder?
How should I properly use the onBackgroundMessage in React?
is it normal to import module from src to the public folder?
Use importScripts to import scripts into the worker's scope like firebase-messaging itself.
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');
auth.component.html:
<amplify-authenticator></amplify-authenticator>
auth.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
enter image description here
--------------------------------## Heading ##
Error:
ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:47)
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31)
at callHook (core.js:4726)
at callHooks (core.js:4690)
at executeInitAndCheckHooks (core.js:4630)
at refreshView (core.js:12013)
at refreshComponent (core.js:13445)
at refreshChildComponents (core.js:11716)
at refreshView (core.js:12051)
at refreshEmbeddedViews (core.js:13391)
It is not supported in Angular 9.
Found this in the docs
Angular 9 is not supported in the legacy version of the Angular UI Components. If you app in using Angular 9, please see our new Angular UI Component package.
source: https://docs.amplify.aws/ui-legacy/q/framework/angular
I looked around and found that the package 'aws-amplify-angular' doesn't really work with Angular 9 and above. I have even tried with 11 and it does the same.
The solution is to migrate from 'aws-amplify-angular' to '#aws-amplify/ui-angular'
Steps for integration are available here - https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular
I am confused about aws-sdk for react, trying to configure it throws error which is a bit confusing, considering the object looks fine in the debugger, but the moment that I step over it throws error: TypeError: Unable to get property 'config' of undefined or null reference
the code:
import {AWS, CustomEvent, AMA} from 'aws-sdk';
class App extends Component {
constructor(props) {
debugger;
AWS.config.region = 'us-east-1';
...
I assumed that once imported the AWS included config object, and if I were to attach with debugger (at the debugger; line) the AWS object looks good and so does the AWS.config and further AWS.config.region is set to null, but if I step, it throws the above error.... Any thoughts what may be misconfigured?
I had the same issue, I solved it with:
import AWS from 'aws-sdk';
AWS.config.region = 'us-east-1';
For some reason it is the import { AWS } as opposed to import AWS that caused the error
I'm sorry, but I'm very lost. Actually I have this:
import * as angular from 'angular';
import 'ts-angular-jsonapi';
And dont return any errors. But, when I do this
import * as angular from 'angular';
import * as jsonapi from 'ts-angular-jsonapi';
I get this error:
ERROR in ./src/index.ts
(14,23): error TS2307: Cannot find module 'ts-angular-jsonapi'.
What changes need I do on ts-angular-jsonapi library for fix this errors.
More info: I need do this becouse I need make something like this:
class myresource extend jsonapi.resource {
}
I found the solution. When you write a .TS file, you can not import any .JS file. You need use require(). In the code:
// some_file.ts
import * as angular from 'angular';
var jsonapi = require('ts-angular-jsonapi'); // .js library
But if you are searching the best and correct solution for typescript node module, I build a simple example on github. With this example, you can do something like this:
import * as animal_module from 'animal_module';
class Snake extends animal_module.Animal {
constructor(name: string) { super(name); }
}
let sam = new Snake('Sammy the Python');
why don't you try
import angular from 'angular'; import jsonapi from 'ts-angular-jsonapi';
I am new to Angular, background is server side Java, .Net...
So, I completed the Tour of Heroes and I have created simple hard coded multi-page application. Now I need to go the next step and call the server to retrieve data via a rest/JSON call. Based on the AngularJS example:
https://angular.io/docs/ts/latest/guide/server-communication.html
and a few other blogs such as:
http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
I have a pretty good understanding of how it is supposed to work. However, I see two errors now:
In the browser: Cannot resolve all parameters for 'AuthService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthService' is decorated with Injectable.
and in NPM:
app/auth.service.ts(9,19): error TS2304: Cannot find name 'Http'.
I have no clue how to chase the dependencies down. packages.json? typings.json, tsconfig.json... Or how they all work; and I cannot find any documentation; any suggestions?
auth.service:
import {Injectable} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
#Injectable()
export class AuthService {
items:Array<any>;
constructor(http:Http) {
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';
import { AuthService } from './auth.service';
bootstrap(AppComponent, [HTTP_PROVIDERS, AuthService]);
I have not consumed the Auth.Service in an component yet.
Tim
I think the problem is you are not pulling in Http, just HTTP_PROVIDERS, in your auth.service try this
import {Http} from 'angular2/http'